多createApi实例下Redux Query跨实例数据刷新方案问询

你不需要只能用unwrap().then()手动重新获取数据，有更优雅的方式在RTK Query的API层处理跨实例刷新：

方法1：在mutation的onQueryStarted生命周期中触发其他实例的标签失效/重取 #

每个createApi生成的实例都会附带util对象，里面包含invalidateTags和refetch方法，你可以在taskApi的editTask mutation的onQueryStarted钩子中，通过dispatch调用commonApi的这些方法来触发数据刷新。

示例代码：

// 定义taskApi时的editTask mutation
editTask: builder.mutation({
  query: (taskData) => ({
    url: '/tasks/edit',
    method: 'PUT',
    body: taskData
  }),
  // 先处理当前实例内的标签失效
  invalidatesTags: ['TaskList', 'TaskDetail'],
  async onQueryStarted(_arg, { dispatch, queryFulfilled }) {
    try {
      // 等待mutation执行完成
      await queryFulfilled;
      // 触发commonApi中对应标签的失效，前提是getWarehouseList定义了providesTags: ['Warehouse']
      dispatch(commonApi.util.invalidateTags(['Warehouse']));
      // 或者直接指定重取getWarehouseList这个endpoint
      // dispatch(commonApi.util.refetch('getWarehouseList'));
    } catch (error) {
      // 可选：处理mutation失败的情况
      console.error('编辑任务失败', error);
    }
  }
})

对应的，commonApi的getWarehouseList需要提前定义providesTags：

// commonApi中的getWarehouseList endpoint
getWarehouseList: builder.query({
  query: () => '/warehouses',
  providesTags: ['Warehouse']
})

方法2：组件内手动触发（即你提到的unwrap().then()） #

如果不想在API层耦合两个实例，也可以在组件调用editTask后手动触发刷新，但这种方式会把刷新逻辑分散到组件中，不如API层封装简洁：

const [editTask] = useEditTaskMutation();

const handleEditTask = async (taskData) => {
  try {
    await editTask(taskData).unwrap();
    // 调用commonApi的refetch方法
    dispatch(commonApi.util.invalidateTags(['Warehouse']));
  } catch (error) {
    // 处理错误
  }
};

推荐优先使用方法1，把跨实例的刷新逻辑封装在API层，保持组件逻辑的简洁性。

内容的提问来源于stack exchange，提问作者Slodin