0

我正在使用 RTK Query 下载数据，然后在本地操作该数据，而不进行任何 api 突变。所以我已经使用extraReducers

api.js

const baseApi = createApi({
  reducerPath: "baseApi",
  baseQuery: fetchBaseQuery({
    baseUrl: Globals.BASE_URL + "/api",
    prepareHeaders,
  }),
  endpoints: () => ({}),
});

export default baseApi;

draftables.js

export const { useGetDraftablesQuery } = baseApi.injectEndpoints({
  endpoints: build => ({
    getDraftables: build.query({
      query: ({ draftgroupId, gameTypeId }) => "whatever/url",
      transformResponse: ({ data: players }) =>
        players.map(transformApiPlayer),
    }),
  }),
});

currentDraftSlice.js

const currentDraftSlice = createSlice({
  name: "currentDraft",
  initialState,
  extraReducers: builder => {
    builder.addMatcher(
      baseApi.endpoints.getDraftables.matchFulfilled,
      (state, action) => {
        state.players = action.payload.map(p => ({
          ...p,
          drafted: false,
        }));
      }
    );
  },
// ... rest of the slice

但是，应用程序崩溃说无法matchFulfilled从未定义中获取。或类似的东西。这似乎正在发生，因为createSlice在 aftercreateApi但before injectEndpoints运行。

我通过在切片文件中导入注入解决了这个问题：

import "../../../services/api/draftables"; // inject draftables endpoint

但这感觉不对，它绝对不是中心化的。

是否有解决方案，或者至少是最佳实践？

顺便说一句，我明白获取数据并在本地操作它不是 RTK 查询的预期用例，但这是我想要使用它的方式。API 层抽象太好了，不能放弃。

4

1 回答 1

1

导入“注入”的 api，这样您就可以确保它始终存在 - 这就是它的用途：

export const apiWithGetDraftables = baseApi.injectEndpoints({ ... })

export const { useGetDraftablesQuery } = apiWithGetDraftables

builder.addMatcher(
      apiWithGetDraftables.endpoints.getDraftables.matchFulfilled,
      (state, action) => {

当然，您也可以只导出端点或“保证注入的端点” - 重要的是您从这个文件中导入它：

export const endpointsWithGetDraftables = apiWithGetDraftables.endpoints

export const getDraftablesEndpoint = apiWithGetDraftables.endpoints.getDraftables
于 2021-10-25T20:43:05.290 回答