API スライス: Redux 統合

内部的に、createApi は Redux Toolkit の createSlice API を呼び出して、スライスリデューサーと、フェッチしたデータのキャッシュに関する適切なロジックを含む対応する action creators を生成します。また、サブスクリプション数とキャッシュの有効期間を管理するカスタム Redux ミドルウェアを自動的に生成します。

生成されたスライスリデューサーとミドルウェアはどちらも、正しく機能させるために、configureStore で Redux ストアの設定に追加する必要があります。

TypeScript

src/store.ts

import { configureStore } from '@reduxjs/toolkit'
import { setupListeners } from '@reduxjs/toolkit/query'
import { pokemonApi } from './services/pokemon'

export const store = configureStore({
  reducer: {
    // Add the generated reducer as a specific top-level slice
    [pokemonApi.reducerPath]: pokemonApi.reducer,
  },
  // Adding the api middleware enables caching, invalidation, polling,
  // and other useful features of `rtk-query`.
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(pokemonApi.middleware),
})

// configure listeners using the provided defaults
setupListeners(store.dispatch)

JavaScript

src/store.js

import { configureStore } from '@reduxjs/toolkit'
import { setupListeners } from '@reduxjs/toolkit/query'
import { pokemonApi } from './services/pokemon'

export const store = configureStore({
  reducer: {
    // Add the generated reducer as a specific top-level slice
    [pokemonApi.reducerPath]: pokemonApi.reducer,
  },
  // Adding the api middleware enables caching, invalidation, polling,
  // and other useful features of `rtk-query`.
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(pokemonApi.middleware),
})

// configure listeners using the provided defaults
setupListeners(store.dispatch)

reducerPath

reducerPath: string

createApi に提供された reducerPath オプションが含まれます。ストアに reducer 関数を追加するときに、ルートステートキーとして使用します。そうすることで、生成された残りの API ロジックが正しくステートを見つけられるようになります。

reducer

reducer: Reducer

キャッシュされたデータを更新するためのロジックを含む標準の Redux スライスリデューサー関数。ルートステートキーとして提供した reducerPath を使用して Redux ストアに追加します。

middleware

middleware: Middleware

キャッシング、無効化、サブスクリプション、ポーリングなどの管理ロジックを含むカスタム Redux ミドルウェア。他のミドルウェアの後にストアの設定に追加します。