生成的 API 切片
API 切片概述
当您调用 createApi
时,它会自动生成并返回一个 API 服务“切片”对象结构,其中包含您可以用来与定义的端点交互的 Redux 逻辑。此切片对象包含一个用于管理缓存数据的 reducer、一个用于管理缓存生命周期和订阅的中间件,以及每个端点的选择器和 thunk。如果您从 React 特定的入口点导入了 createApi
,它还包含自动生成的 React 钩子,供您在组件中使用。
本节介绍该 API 结构的内容,并将不同的字段按类别分组。API 类型和描述在每个类别的单独页面中列出。
const api = createApi({
baseQuery: fetchBaseQuery({ baseUrl: '/' }),
endpoints: (build) => ({
// ...
}),
})
type Api = {
// Redux integration
reducerPath: string
reducer: Reducer
middleware: Middleware
// Endpoint interactions
endpoints: Record<string, EndpointDefinition>
// Code splitting and generation
injectEndpoints: (options: InjectEndpointsOptions) => UpdatedApi
enhanceEndpoints: (options: EnhanceEndpointsOptions) => UpdatedApi
// Utilities
utils: {
updateQueryData: UpdateQueryDataThunk
patchQueryData: PatchQueryDataThunk
prefetch: PrefetchThunk
invalidateTags: ActionCreatorWithPayload<
Array<TagTypes | FullTagDescription<TagTypes>>,
string
>
selectInvalidatedBy: (
state: FullState,
tags: Array<TagTypes | FullTagDescription<TagTypes>>,
) => Array<{
endpointName: string
originalArgs: any
queryCacheKey: string
}>
selectCachedArgsForQuery: (
state: FullState,
endpointName: EndpointName,
) => Array<QueryArg>
resetApiState: ActionCreator<ResetAction>
getRunningQueryThunk(
endpointName: EndpointName,
args: QueryArg,
): ThunkWithReturnValue<QueryActionCreatorResult | undefined>
getRunningMutationThunk(
endpointName: EndpointName,
fixedCacheKeyOrRequestId: string,
): ThunkWithReturnValue<MutationActionCreatorResult | undefined>
getRunningQueriesThunk(): ThunkWithReturnValue<
Array<QueryActionCreatorResult<any>>
>
getRunningMutationsThunk(): ThunkWithReturnValue<
Array<MutationActionCreatorResult<any>>
>
}
// Internal actions
internalActions: InternalActions
// React hooks (if applicable)
[key in GeneratedReactHooks]: GeneratedReactHooks[key]
}
Redux 集成
在内部,createApi
将调用 Redux Toolkit 的 createSlice
API 来生成切片 reducer 和相应的 action creators,它们包含用于缓存获取数据的适当逻辑。它还会自动生成一个自定义的 Redux 中间件,用于管理订阅计数和缓存生命周期。
生成的切片 reducer 和中间件都需要添加到您的 Redux store 设置中的 configureStore
中才能正常工作。
端点
API 切片对象将包含一个 endpoints
字段。本节将您提供给 createApi
的端点名称映射到用于触发数据获取和读取该端点缓存数据的核心 Redux 逻辑(thunk 和选择器)。如果您使用的是 React 特定的 createApi
版本,每个端点定义还将包含该端点的自动生成的 React hook。
代码拆分和生成
每个 API 切片允许在初始 API 切片定义之后 在运行时注入额外的端点定义。这对于可能具有许多端点的应用程序来说可能是有益的。
单个 API 切片端点定义也可以拆分到多个文件中。这主要用于处理从 API 模式文件代码生成的 API 切片,允许您向一组自动生成的端点定义添加额外的自定义行为和配置。
每个 API 切片对象都有 injectEndpoints
和 enhanceEndpoints
函数来支持这些用例。
API 切片实用程序
util
字段包含各种实用程序函数,可用于管理缓存,包括手动更新查询缓存数据、触发数据预取、手动使标签失效和手动重置 api 状态,以及可用于各种场景(包括 SSR)的其他实用程序函数。
内部操作
internalActions
字段包含一组用于内部行为的额外 thunk,例如管理基于焦点的更新。
React Hooks
核心 RTK Query createApi
方法与 UI 无关,就像 Redux 核心库和 Redux Toolkit 与 UI 无关一样。它们都是可以在任何地方使用的纯 JS 逻辑。
然而,RTK Query 还提供了为每个端点自动生成 React 钩子的功能。由于这专门依赖于 React 本身,RTK Query 提供了一个备用入口点,它公开了一个定制版本的 createApi
,其中包含该功能。
import { createApi } from '@reduxjs/toolkit/query/react'
如果您使用了 React 特定的 createApi
版本,生成的 Api
切片结构也将包含一组 React 钩子。这些端点钩子可作为 api.endpoints[endpointName].useQuery
或 api.endpoints[endpointName].useMutation
使用,与您定义该端点的方式相匹配。
相同的钩子也会添加到 Api
对象本身,并根据端点名称和查询/突变类型自动生成名称。
例如,如果您有用于 getPosts
和 updatePost
的端点,则可以使用以下选项。
// Hooks attached to the endpoint definition
const { data } = api.endpoints.getPosts.useQuery()
const { data } = api.endpoints.updatePost.useMutation()
// Same hooks, but given unique names and attached to the API slice object
const { data } = api.useGetPostsQuery()
const [updatePost] = api.useUpdatePostMutation()
React 特定的 createApi
版本还会生成一个 usePrefetch
钩子,附加到 Api
对象,可用于提前启动数据获取。