程式碼分割

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'，則會擲出一個錯誤。