跳至主要内容

生成的 API 切片

API 切片概述

当您调用 createApi 时,它会自动生成并返回一个 API 服务“切片”对象结构,其中包含您可以用来与定义的端点交互的 Redux 逻辑。此切片对象包含一个用于管理缓存数据的 reducer、一个用于管理缓存生命周期和订阅的中间件,以及每个端点的选择器和 thunk。如果您从 React 特定的入口点导入了 createApi,它还包含自动生成的 React 钩子,供您在组件中使用。

本节介绍该 API 结构的内容,并将不同的字段按类别分组。API 类型和描述在每个类别的单独页面中列出。

提示

通常,您应该为应用程序需要与之通信的每个基本 URL 只有一个 API 切片。例如,如果您的站点从 /api/posts/api/users 同时获取数据,您将拥有一个带有 /api/ 作为基本 URL 的单个 API 切片,以及 postsusers 的单独端点定义。这使您能够通过跨端点定义 标签 关系来有效地利用 自动重新获取

出于可维护性目的,您可能希望将端点定义拆分到多个文件中,同时仍然维护一个包含所有这些端点的单个 API 切片。有关如何使用 injectEndpoints 属性将 API 端点从其他文件注入单个 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 切片对象都有 injectEndpointsenhanceEndpoints 函数来支持这些用例。

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].useQueryapi.endpoints[endpointName].useMutation 使用,与您定义该端点的方式相匹配。

相同的钩子也会添加到 Api 对象本身,并根据端点名称和查询/突变类型自动生成名称。

例如,如果您有用于 getPostsupdatePost 的端点,则可以使用以下选项。

生成的 React 钩子名称
// 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 对象,可用于提前启动数据获取。