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

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

rtk-query redux-toolkit react-redux reactjs javascript

Slodin · 技术社区 · 1 年前

我的应用程序必须从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 回复 | 直到 1 年前

Drew Reese 1 年前

您可以使用 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) {
  ...
}

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

5 月前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

5 月前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

5 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

6 月前

Luckkks · 过渡色工作不正常

6 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

6 月前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

6 月前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

6 月前

noblerare · Vite错误-未定义导出(SSR)

6 月前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

6 月前