API 切片：Redux 整合

在內部，createApi 會呼叫 Redux Toolkit createSlice API 來產生切片 Reducer 和對應的動作建立器，並具備快取擷取資料的適當邏輯。它也會自動產生自訂 Redux 中介軟體來管理訂閱數量和快取生命週期。

產生的切片 Reducer 和中介軟體都需要在 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 切片 Reducer 函式。使用您提供的 reducerPath 作為根狀態金鑰，將此選項加入 Redux 儲存。

middleware

middleware: Middleware

一個自訂 Redux 中間件，包含管理快取、失效、訂閱、輪詢等邏輯。在其他中間件後將此新增至儲存設定。