代码拆分

RTK Query 使您能够通过在设置初始服务定义后注入额外的端点来缩减初始捆绑包大小。这对于可能具有许多端点的较大应用程序非常有利。

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

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

一种典型的方法是创建一个空的中央 API 切片定义

TypeScript

基本设置

// Or from '@reduxjs/toolkit/query' if not using the auto-generated hooks
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

// initialize an empty api service that we'll inject endpoints into later as needed
export const emptySplitApi = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  endpoints: () => ({}),
})

JavaScript

基本设置

// Or from '@reduxjs/toolkit/query' if not using the auto-generated hooks
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

// initialize an empty api service that we'll inject endpoints into later as needed
export const emptySplitApi = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  endpoints: () => ({}),
})

然后在其他文件中注入 API 端点并从那里导出它们 - 这样你就可以确保始终以端点被注入的方式导入它们。

TypeScript

注入和导出额外的端点

import { emptySplitApi } from './emptySplitApi'

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

export const { useExampleQuery } = extendedApi

JavaScript

注入和导出额外的端点

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'，则会抛出错误。