3

我正在一个大型项目中工作，其中包含许多基本 URL和资源，我们可以理解为许多不同的集成服务。

按照资源行（隔离）在我的应用程序上插入 RTK，我每个资源都有一个 createApi()。

我遵循这条路径是因为每个资源都有所有CRUD方法和一些自定义方法，想象我们将有 10 个方法（调用）来管理每个资源并且，使用单个创建 API，我可以在单个 createApi/reducerPath 上拥有 200 个方法.

示例：（我想这可以解决我的问题）

// users-api.ts
 export const usersApi = createApi({
    reducerPath: 'usersApi',
    baseQuery: httpClientBaseQuery({
        baseUrl: 'http://localhost:3000/' // (same base url)
    })
  // getUsers(), getUser(), getManyUsers() createUser(), updateUser(), ... 
 })

// cards-api.ts
 export const cardsApi = createApi({
    reducerPath: 'cardsApi ',
    baseQuery: httpClientBaseQuery({
        baseUrl: 'http://localhost:3000/' // (same base url)
    })
  // ...
 })

// accounts-api.ts
 export const accountsApi = createApi({
    reducerPath: 'accountsApi ',
    baseQuery: httpClientBaseQuery({
        baseUrl: 'http://localhost:3000/' // (same base url)
    })
  // ...
 })

// preferences-api.ts
 export const preferencesApi = createApi({
    reducerPath: 'preferencesApi',
    baseQuery: httpClientBaseQuery({
        baseUrl: 'http://localhost:3000/' // (same base url)
    })
  // ...
 })

// templates-api.ts
 export const templatesApi = createApi({
    reducerPath: 'templatesApi',
    baseQuery: httpClientBaseQuery({
        baseUrl: 'http://localhost:3000/' // (different base url)
    })
  // ...
 })

...

来自 RTK 文档：

“createApi()：RTK Query 功能的核心。它允许您定义一组端点，描述如何从一系列端点检索数据，包括如何获取和转换该数据的配置。在大多数情况下，您应该使用每个应用程序一次，根据经验，“每个基本 URL 一个 API 切片”。

问题是，以这种方式（每个资源）使用 RTK 可以吗？我会有性能问题，还是不是正确的方法？

4

1 回答 1

8

我们建议您应该createApi为每个互连的数据源拥有一个 - 通常每个域都有一个。如果将其拆分为多个createApi调用，则这些 api 无法相互影响，因此一个端点的突变无法自动触发从另一个端点重新获取横向受影响的数据createApi。

即使您只有一个调用，您仍然可以使用代码拆分方法将createApi其拆分为多个文件，使用.injectEndpoints

// a central, potentially empty api definition
import { emptySplitApi } from './emptySplitApi'

const extendedApi = emptySplitApi.injectEndpoints({
  endpoints: (build) => ({
    // adding only this endpoint in this file
    example: build.query({
      query: () => 'test',
    }),
  }),
  overrideExisting: false,
})

// and exporting the hook to be used from components
export const { useExampleQuery } = extendedApi
于 2021-06-27T18:05:57.573 回答