如何在Redux场景下避免reducer中重复设置status字段的冗余代码？

有3种常用的实现方式，不需要修改现有业务逻辑，就能彻底去掉重复的status赋值代码：

1. 高阶Reducer封装（通用性最高，兼容原生Redux） #

写一个高阶reducer包装函数，统一处理status字段的注入逻辑，所有需要status的reducer都用这个函数包裹即可：

// 高阶reducer定义
const withAutoStatus = (reducer) => {
  return (state, action) => {
    const processedState = reducer(state, action);
    // 仅当action携带status字段时才更新，不影响普通action
    if (action.status !== undefined) {
      return {
        ...processedState,
        status: action.status
      };
    }
    return processedState;
  };
};

使用方法：

// 原业务reducer不需要修改任何case逻辑，去掉所有手动加的status赋值即可
const originUserReducer = (state = initialState, action) => {
  switch (action.type) {
    case SET_USER:
      return {
        ...state,
        workspaces: action.response.data.workspaces
      };
    // 其他case保持不变
    default:
      return state;
  }
};

// 导出时用高阶reducer包裹
export const userReducer = withAutoStatus(originUserReducer);

如果仅需要给特定类型的action加status，可以在高阶reducer里加type匹配规则，比如只处理API请求相关的action：

const withAutoStatus = (reducer) => {
  return (state, action) => {
    const processedState = reducer(state, action);
    // 示例：只给type前缀为API_的action自动赋值status
    if (action.type.startsWith('API_') && action.status !== undefined) {
      return {
        ...processedState,
        status: action.status
      };
    }
    return processedState;
  };
};

2. Redux Toolkit 匹配器方案（如果项目用了RTK更简洁） #

如果你用了Redux Toolkit，可以用addMatcher统一匹配目标action，全局处理status赋值：

import { createSlice, isAnyOf } from '@reduxjs/toolkit';
// 导入所有需要自动加status的action
import { setUser, setWorkspace, fetchUserList } from './userActions';

const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    // 普通业务逻辑不需要写status
    setCurrentId: (state, action) => {
      state.currentId = action.payload;
    }
  },
  extraReducers: (builder) => {
    builder
      .addCase(setUser, (state, action) => {
        state.workspaces = action.response.data.workspaces;
      })
      .addCase(setWorkspace, (state, action) => {
        state.currentWorkspace = action.payload;
      })
      // 统一匹配所有需要加status的action，自动注入
      .addMatcher(
        isAnyOf(setUser, setWorkspace, fetchUserList),
        (state, action) => {
          if (action.status) state.status = action.status;
        }
      );
  }
});

3. 自定义Reducer组合逻辑 #

如果你的状态树是多层嵌套结构，可以在根reducer层做统一处理，给指定子模块自动加status，不需要修改每个子reducer：

import { combineReducers } from 'redux';
import userReducer from './userReducer';
import workspaceReducer from './workspaceReducer';

const rootReducer = combineReducers({
  user: userReducer,
  workspace: workspaceReducer
});

const autoStatusRootReducer = (state, action) => {
  const newState = rootReducer(state, action);
  // 示例：给user和workspace模块自动加status
  if (action.status && ['SET_USER', 'SET_WORKSPACE'].includes(action.type)) {
    const moduleName = action.type === 'SET_USER' ? 'user' : 'workspace';
    return {
      ...newState,
      [moduleName]: {
        ...newState[moduleName],
        status: action.status
      }
    };
  }
  return newState;
};

export default autoStatusRootReducer;

注意事项 #

• 不需要自动赋值status的action，只要不携带status字段即可，不会被逻辑命中
• 如果不同模块的status字段名不同，可以给高阶reducer增加自定义字段参数，适配不同场景

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