メインコンテンツにスキップ

React Hooksなしでの使用

Redux coreやRedux Toolkitと同様に、RTK Queryの主要機能はUIに依存せず、あらゆるUIレイヤーで使用できます。RTK Queryには、Reactでの使用に特化したcreateApiのバージョンも含まれており、自動的にReact hooksを生成します。

React hooksは、ほとんどのユーザーがRTK Queryを使用する主な方法ですが、ライブラリ自体はプレーンなJSロジックを使用しており、React ClassコンポーネントでもReact自体に依存せずに使用できます。

このページでは、RTK Queryのキャッシュの挙動を適切に活用するために、React Hooksを使用せずにRTK Queryとやり取りする方法について説明します。

サブスクリプションの追加​

キャッシュのサブスクリプションは、RTK Queryにエンドポイントのデータをフェッチする必要があることを伝えるために使用されます。エンドポイントのサブスクリプションは、クエリエンドポイントにアタッチされたinitiate thunkアクションクリエーターの結果をディスパッチすることで追加できます。

React hooksを使用する場合、この動作は代わりにuseQuery、useQuerySubscription、useLazyQuery、およびuseLazyQuerySubscription内で処理されます。

キャッシュされたデータのサブスクライブ
const promise = dispatch(api.endpoints.getPosts.initiate())
const { refetch } = promise
// interact with the cache in the same way as you would with a useFetch...() hook
const { data, isLoading, isSuccess /*...*/ } = await promise

サブスクリプションの削除​

キャッシュのサブスクリプションを削除することは、キャッシュされたデータが不要になったことをRTK Queryが識別するために必要です。これにより、RTK Queryは古いキャッシュデータをクリーンアップして削除できます。

クエリエンドポイントのinitiate thunkアクションクリエーターをディスパッチした結果は、unsubscribeプロパティを持つPromiseです。このプロパティは、呼び出されると対応するキャッシュサブスクリプションを削除する関数です。

React hooksを使用する場合、この動作は代わりにuseQuery、useQuerySubscription、useLazyQuery、およびuseLazyQuerySubscription内で処理されます。

キャッシュされたデータのサブスクライブ解除
// Adding a cache subscription
const promise = dispatch(api.endpoints.getPosts.initiate())

// Removing the corresponding cache subscription
promise.unsubscribe()

キャッシュされたデータとリクエストステータスへのアクセス​

キャッシュデータとリクエストステータス情報へのアクセスは、クエリエンドポイントのselect関数プロパティを使用してセレクターを作成し、それをRedux stateで呼び出すことで実行できます。これにより、呼び出された時点でのキャッシュデータとリクエストステータス情報のスナップショットが提供されます。

注意

endpoint.select(arg)関数は新しいセレクターインスタンスを作成します。実際のセレクター関数自体ではありません！

React hooksを使用する場合、この動作は代わりにuseQuery、useQueryState、およびuseLazyQuery内で処理されます。

キャッシュされたデータとリクエストステータスへのアクセス
const result = api.endpoints.getPosts.select()(state)
const { data, isSuccess, isError, error } = result

自動生成されたhooksとは異なり、isFetchingフラグはなく、すでにデータがある場合でも、ステータスが保留中の場合はisLoadingフラグがtrueになることに注意してください。

メモ化​

endpoint.select(arg)関数は呼び出されるたびに新しいセレクターを返し、このインスタンス自体がメモ化されているため、セレクターの作成をメモ化（たとえば、別のセレクターでそのメモ化されたインスタンスを使用するため）することが望ましい場合があります。これはcreateSelectorを使用して行うことができます

メモ化されたセレクタークリエーターの作成
const createGetPostSelector = createSelector(
  (id: string) => id,
  (id) => api.endpoints.getPost.select(id),
)

const selectGetPostError = createSelector(
  (state: RootState) => state,
  (state: RootState, id: string) => createGetPostSelector(id),
  (state, selectGetPost) => selectGetPost(state).error,
)

ミューテーションの実行​

ミューテーションは、サーバー上のデータを更新するために使用されます。ミューテーションは、ミューテーションエンドポイントにアタッチされたinitiate thunkアクションクリエーターの結果をディスパッチすることで実行できます。

React hooksを使用する場合、この動作は代わりにuseMutation内で処理されます。

ミューテーションエンドポイントのトリガー
dispatch(api.endpoints.addPost.initiate({ name: 'foo' }))

例​

React hooksを使用しない場合の例は、以下にあります。

詳細情報​

最終更新