如何在React Redux-Toolkit中实现切片动作/Reducer执行前的中间件？

最靠谱的方案：自定义Redux中间件 #

Redux的中间件本来就是用来在动作传到reducer之前拦截处理的，刚好能满足你“切片动作更新前检查数据”的需求，比listener middleware更适配这个场景。

具体步骤： #

1. 编写自定义中间件函数
   中间件是嵌套函数结构，你可以在里面拿到当前全局状态，执行检查逻辑，甚至决定要不要让这个动作继续传递到reducer。

   示例代码：

   const preCheckMiddleware = storeAPI => next => action => {
     // 获取当前的全局状态
     const currentState = storeAPI.getState();
     
     // 比如只针对特定切片的动作做检查
     if (action.type.includes('user/')) {
       // 检查用户切片是否存在必要数据
       if (!currentState.user.loginStatus) {
         console.log('用户未登录，该动作无法执行');
         // 直接return，阻止动作到达reducer，避免状态更新
         return;
       }
     }
   
     // 检查通过，让动作继续向下传递
     return next(action);
   };
   

2. 将中间件注入到Redux Store
   使用configureStore创建store时，通过middleware选项添加自定义中间件，用prepend确保它优先于默认中间件执行：

   import { configureStore } from '@reduxjs/toolkit';
   import userSlice from './features/userSlice';
   import preCheckMiddleware from './middleware/preCheckMiddleware';
   
   const store = configureStore({
     reducer: {
       user: userSlice.reducer,
     },
     middleware: (getDefaultMiddleware) =>
       getDefaultMiddleware().prepend(preCheckMiddleware),
   });
   

针对单个动作的局部方案：切片内的prepare函数 #

如果你只需要给某几个特定动作做前置检查，不用全局中间件，直接在定义切片动作时使用prepare函数即可：

示例代码：

import { createSlice } from '@reduxjs/toolkit';

const userSlice = createSlice({
  name: 'user',
  initialState: { loginStatus: false, profile: {} },
  reducers: {
    updateProfile: {
      prepare: (profileData) => {
        // 前置检查传入的参数是否合法
        if (!profileData?.username) {
          throw new Error('更新个人资料必须填写用户名');
        }
        // 检查通过后返回动作的payload
        return { payload: profileData };
      },
      reducer: (state, action) => {
        // 正常执行状态更新逻辑
        state.profile = action.payload;
      },
    },
  },
});

这种方式适合单个动作的局部校验，全局范围的前置检查还是用自定义中间件更高效。

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