跳到主要内容

 

生成的API切片

API切片概述​

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

本节文档记录了该API结构的内容，不同的字段按类别分组。API类型和描述在每个类别的单独页面上列出。

提示

通常，你应该只有一个API切片用于你的应用需要通信的基础URL。例如，如果你的站点从/api/posts和/api/users两处获取数据，你应该有一个单独的API切片，其基础URL为/api/，并为posts和users定义单独的端点。这样你可以有效地利用自动重新获取通过定义跨端点的tag关系。

出于可维护性的考虑，你可能希望将端点定义分散在多个文件中，同时仍然维护一个包含所有这些端点的单一API切片。请参阅code splitting了解如何使用injectEndpoints属性将API端点从其他文件注入到单一API切片定义中。

API切片内容
const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  endpoints: (build) => ({
    // ...
  }),
})

type Api = {
  // Redux集成
  reducerPath: string
  reducer: Reducer
  middleware: Middleware

  // 端点交互
  endpoints: Record<string, EndpointDefinition>

  // 代码分割和生成
  injectEndpoints: (options: InjectEndpointsOptions) => UpdatedApi
  enhanceEndpoints: (options: EnhanceEndpointsOptions) => UpdatedApi

  // 实用工具
  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>>
    >
  }

  // 内部操作
  internalActions: InternalActions

  // React钩子（如果适用）
  [key in GeneratedReactHooks]: GeneratedReactHooks[key]
}

Redux集成​

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

生成的切片reducer和中间件都需要添加到你的Redux store设置中的configureStore中，以便正确工作。

API参考

端点​

API切片对象将有一个endpoints字段在内部。这个部分将你提供给createApi的端点名称映射到用于触发数据获取和读取该端点的缓存数据的核心Redux逻辑（thunks和选择器）。如果你使用的是createApi的React特定版本，每个端点定义也将包含该端点的自动生成的React钩子。

API参考

代码分割和生成​

每个API切片都允许在初始API切片定义后的运行时注入额外的端点定义。这对于可能有_许多_端点的应用程序可能是有益的。

单个API切片端点定义也可以分割在多个文件中。这主要用于处理从API模式文件代码生成的API切片，允许你向一组自动生成的端点定义添加额外的自定义行为和配置。

每个API切片对象都有injectEndpoints和enhanceEndpoints函数来支持这些用例。

API参考

API切片实用工具​

util字段包含了可以用来管理缓存的各种实用函数，包括手动更新查询缓存数据、触发数据的预获取、手动使标签无效、手动重置api状态，以及在各种场景中使用的其他实用函数，包括SSR。

API参考

内部操作​

internalActions字段包含一组用于内部行为的额外thunks，例如基于焦点的更新管理。

React钩子​

核心的RTK Query createApi方法是UI不可知的，就像Redux核心库和Redux Toolkit一样。它们都是可以在任何地方使用的纯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的端点，这些选项将可用：

生成的React钩子名称
// 钩子附加到端点定义
const { data } = api.endpoints.getPosts.useQuery()
const { data } = api.endpoints.updatePost.useMutation()

// 相同的钩子，但给出唯一的名称并附加到API切片对象
const { data } = api.useGetPostsQuery()
const [updatePost] = api.useUpdatePostMutation()

React特定版本的createApi还生成了一个usePrefetch钩子，附加到Api对象上，可以用来提前开始获取数据。

API参考