如何在React Router Dom的Action中调用Redux Toolkit的Mutation？

问题背景 #

使用createBrowserRouter配置路由时，/inventory/:inventoryId路由绑定了独立的inventoryAction函数作为表单提交处理逻辑。由于该函数不在React组件内部，无法直接调用Redux Toolkit生成的useCreateNewItemMutation Hook，需要找到在非组件环境下触发RTK Query mutation的方法。

解决方案 #

核心思路是直接使用RTK Query生成的endpoint原始方法，而非依赖只能在组件内使用的Hook。具体步骤如下：

1. 导出Redux Store实例 #

首先确保你的Redux Store实例可以被外部访问，修改store.ts导出store：

export const store = configureStore({
  reducer: {
    [apiSlice.reducerPath]: apiSlice.reducer,
    auth: authSliceReducer,
    organization: organizationSliceReducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(apiSlice.middleware),
  devTools: true,
});

export const apiSlice = createApi({
  baseQuery,
  tagTypes: ["User", "Inventory", "Item"],
  endpoints: (builder) => ({}),
});

2. 在inventoryAction中触发Mutation #

在独立的inventoryAction函数中，导入store和itemApiSlice，直接调用endpoint的initiate方法并dispatch到store：

import { store } from './store'; // 替换为你的store文件路径
import { itemApiSlice } from './path-to-itemApiSlice'; // 替换为itemApiSlice的路径

export const inventoryAction = async ({ request }: any) => {
  const data = await request.formData();
  const dataToSubmit = {
    unitName: data.get("unitName"),
    itemType: data.get("itemType"),
    price: data.get("price"),
    unitCount: data.get("unitCount"),
    inventoryId: data.get("inventoryId"),
  };

  try {
    // 触发mutation并等待结果
    await store.dispatch(
      itemApiSlice.endpoints.createNewItem.initiate(dataToSubmit)
    ).unwrap();
    
    // 提交成功后重定向回对应库存页面
    return redirect(`/inventory/${dataToSubmit.inventoryId}`);
  } catch (error) {
    // 处理提交失败的情况，返回错误信息供路由使用
    return { error: '商品创建失败，请检查输入后重试' };
  }
};

关键说明 #

• RTK Query的每个endpoint都会生成initiate方法，该方法可以直接被dispatch到Redux Store，无需依赖React Hook
• .unwrap()方法用于提取mutation的成功结果或抛出错误，让你可以用异步语法处理结果和异常
• 提交完成后可以返回redirect实现页面跳转，这是React Router Action的标准用法

内容的提问来源于stack exchange，提问作者Khant Min Si Thu