如何在react-router-dom的loader函数中使用react-redux的dispatch？

在React Router的loader函数中无法使用useDispatch，但可以直接通过Redux store实例调用dispatch方法，具体实现步骤如下：

1. 确保已创建Redux Store #

首先确认你的Redux store是通过Redux Toolkit的configureStore创建并导出的，示例如下：

// store.js
import { configureStore } from '@reduxjs/toolkit';
import yourDataSlice from './features/yourDataSlice';

export const store = configureStore({
  reducer: {
    yourData: yourDataSlice,
  },
});

2. 在Loader中直接调用store.dispatch #

在路由配置文件中导入store和对应的action creator，然后在loader函数内直接调用store.dispatch更新状态：

import { store } from './store';
import { setYourData } from './features/yourDataSlice';
import { createBrowserRouter, json } from 'react-router-dom';
import axios from 'axios';
import Error from './Error';
import Home from './Home';

const router = createBrowserRouter([
  {
    path: "/",
    errorElement: <Error />,
    children: [
      {
        index: true,
        element: <Home />,
        loader: async () => {
          try {
            const response = await axios({
              method: "get",
              url: "some URL here",
            });
            // 直接使用store.dispatch更新Redux状态
            store.dispatch(setYourData(response.data));
            return response;
          } catch (e) {
            throw json(
              { message: "Error occured while fetching data" },
              { status: e?.response?.status || 500 }
            );
          }
        },
      },
    ],
  },
]);

3. 定义对应的Slice Action #

确保你的slice中已经定义了用于更新状态的action creator，示例：

// features/yourDataSlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  data: null,
};

const yourDataSlice = createSlice({
  name: 'yourData',
  initialState,
  reducers: {
    setYourData: (state, action) => {
      state.data = action.payload;
    },
  },
});

export const { setYourData } = yourDataSlice.actions;
export default yourDataSlice.reducer;

注意事项 #

• 这种方式绕过了React的组件上下文，直接操作store实例，完全适用于loader这类非组件环境。
• 如果你的应用使用了服务端渲染（SSR），需要注意store实例的复用问题，但对于纯客户端应用无需额外处理。

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