API 切片：Redux 集成

在内部，createApi 将调用 Redux Toolkit 的 createSlice API 来生成一个切片 reducer 和相应的 action creators，它们具有缓存获取数据的适当逻辑。它还会自动生成一个自定义 Redux 中间件，用于管理订阅计数和缓存生命周期。

生成的切片 reducer 和中间件都需要添加到您的 Redux 存储设置中 configureStore 才能正常工作。

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 中间件，包含用于管理缓存、失效、订阅、轮询等的逻辑。在其他中间件之后将其添加到存储设置中。