代码分割

RTK Query 通过允许你在设置完初始服务定义后注入额外的端点，使得减小初始包大小成为可能。这对于可能有 许多 端点的大型应用程序来说非常有益。

injectEndpoints 接受一组端点，以及一个可选的 overrideExisting 参数。

调用 injectEndpoints 将把端点注入到原始 API 中，但也会返回具有这些端点正确类型的相同 API。（不幸的是，它不能修改原始定义的类型。）

典型的做法是有一个空的中心 API 切片定义：

基本设置

// 或者从 '@reduxjs/toolkit/query' 导入，如果不使用自动生成的钩子
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

// 初始化一个空的 api 服务，我们稍后将根据需要注入端点
export const emptySplitApi = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  endpoints: () => ({}),
})

然后在其他文件中注入 api 端点并从那里导出它们 - 这样你就可以确保总是以一种肯定已经注入的方式导入端点。

注入 & 导出额外的端点

// 文件: emptySplitApi.ts noEmit
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

export const emptySplitApi = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  endpoints: () => ({}),
})

// 文件: extendedApi.ts
import { emptySplitApi } from './emptySplitApi'

const extendedApi = emptySplitApi.injectEndpoints({
  endpoints: (build) => ({
    example: build.query({
      query: () => 'test',
    }),
  }),
  overrideExisting: false,
})

export const { useExampleQuery } = extendedApi

提示

如果你注入了一个已经存在的端点，并且没有明确指定 overrideExisting: true，那么该端点将不会被覆盖。在开发模式下，如果 overrideExisting 设置为 false，你会收到关于此的警告，如果设置为 'throw'，将会抛出错误。