代码之家 › 专栏 › 技术社区 › Slodin

Redux查询多个createApi和reducerPath,并进行重新蚀刻

rtk-query redux-toolkit react-redux reactjs javascript

1

Slodin · 技术社区 · 2 年前

我的应用程序必须从3个不同的服务器获取数据,它们都连接到同一个数据库。因此,我将代码拆分为3个不同的createAPI,并使用不同的reducer路径,然而,如果我从API A编辑PUT,似乎无法使用refetch,但API B也需要刷新。

我无法更改服务器的布局,因为这是我们的后端服务器架构。

export const commonApi = createApi({
  reducerPath: "commonApi",
  baseQuery: commonBaseQuery, //URL: common.dev.example.com
  endpoints: () => ({}), //later injected
  tagTypes: ["SCHEME_LIST", "SCHEME_DETAIL"],
});

export const taskApi = createApi({
  reducerPath: "taskApi",
  baseQuery: taskBaseQuery, //URL: task.dev.example.com
  endpoints: () => ({}), //later injected
  tagTypes: ["LIST", "DETAIL"]
});

export const addressApi = createApi({...}) // omitted, same as above with different url

现在,如果我使用突变查询 editTask 从…起 taskAPI 。需要更新 getTaskList , getTaskDetail 从…起 taskAPI 。通过使用 invalidatesTags: ['LIST', 'DETAIL'] 我可以自动获得更改。

然而,在此期间 编辑任务 ,API getWarehouseList 从…起 commonAPI 也需要更新以反映一些变化。我不能再使用标签了,因为它们不属于同一个createApi/reducerPath

问题是我该如何更新 获取仓库列表 从…起 commonAPI 什么时候 编辑任务 从…起 taskAPI 做出改变?或者唯一的方法是执行unwrap().then(),然后手动重新绘制这些数据?

1 回复 | 直到 2 年前

1

2

Drew Reese 2 年前

您可以使用 invalidateTags API切片实用程序,使您喜欢的任何特定标签无效。如何使用它是中的突变终点 commonApi 可以使中的特定标记无效 taskApi ,反之亦然。我建议使用突变终点 onQueryStarted 处理程序执行此操作。

实例

taskAPI切片

...
editTask: build.mutation({
  ...
  onQueryStarted: async(arg, { dispatch, queryFulfilled }) => {
    try {
      await queryFulfilled;
      dispatch(commonAPI.util.invalidateTags(
        ["SCHEME_LIST", "SCHEME_DETAIL"] // or whatever you specifically need
      ));
    } catch(error) {
      // handle/ignore/etc
    }
  },
}),
...

就其价值而言,使用 unwrap().then() 在UI代码中也可以工作,尽管我仍然建议手动使标签无效而不是手动重新蚀刻。如下所示:

try {
  await editTaskTrigger().unwrap();
  dispatch(commonAPI.util.invalidateTags(["SCHEME_LIST", "SCHEME_DETAIL"]));
} catch(error) {
  ...
}