如何在Redux中复用Reducer逻辑？多按钮状态管理优化

这种重复逻辑的场景正好适合用通用化的Reducer来处理，不用为每个按钮单独写一套重复的switch case，既减少代码冗余，也方便后续扩展新按钮。下面一步步给你拆解实现思路：

1. 设计通用的Action结构 #

因为要区分不同按钮的状态，我们的action需要携带一个key字段，用来标识要切换的是哪个按钮的状态。统一用一个action类型（比如TOGGLE_BUTTON）即可：

// 通用action创建函数
export const toggleButton = (buttonKey) => ({
  type: 'TOGGLE_BUTTON',
  payload: { key: buttonKey }
});

2. 编写通用Reducer逻辑 #

Reducer的初始状态是一个对象，每个键对应一个按钮的状态（初始值设为false）。当收到TOGGLE_BUTTON类型的action时，通过action.payload.key找到对应的状态，切换它的布尔值，同时严格遵守Redux的状态不可变性要求：

const initialButtonState = {
  button1: false,
  button2: false,
  button3: false
  // 后续加新按钮直接在这里加键值对就行！
};

export const buttonReducer = (state = initialButtonState, action) => {
  switch (action.type) {
    case 'TOGGLE_BUTTON':
      const targetKey = action.payload.key;
      return {
        ...state, // 展开原有状态，避免直接修改
        [targetKey]: !state[targetKey] // 切换目标按钮的状态
      };
    default:
      return state;
  }
};

3. 组件中复用通用逻辑 #

在组件里，只需要传入对应按钮的key，就能复用同一个按钮组件，不用为每个按钮写单独的dispatch逻辑：

import { useDispatch, useSelector } from 'react-redux';
import { toggleButton } from './your-action-file';

// 通用按钮组件
const ToggleableButton = ({ buttonKey, buttonLabel }) => {
  const dispatch = useDispatch();
  // 通过buttonKey获取对应按钮的状态
  const isActive = useSelector(state => state.buttons[buttonKey]);

  return (
    <button
      onClick={() => dispatch(toggleButton(buttonKey))}
      style={{ backgroundColor: isActive ? '#2196F3' : '#E0E0E0', color: isActive ? 'white' : 'black' }}
    >
      {buttonLabel} {isActive ? '(已激活)' : '(未激活)'}
    </button>
  );
};

// 在父组件中批量调用
const ButtonGroup = () => {
  return (
    <div style={{ gap: '10px', display: 'flex' }}>
      <ToggleableButton buttonKey="button1" buttonLabel="按钮A" />
      <ToggleableButton buttonKey="button2" buttonLabel="按钮B" />
      <ToggleableButton buttonKey="button3" buttonLabel="按钮C" />
    </div>
  );
};

额外扩展建议 #

• 如果需要批量重置所有按钮状态，可以给Reducer加一个RESET_ALL_BUTTONS的case，直接返回初始状态即可；
• 如果某些按钮需要特殊初始状态，只需要在initialButtonState里修改对应键的值就行；
• 如果你用的是Redux Toolkit（现代Redux的推荐写法），可以用createSlice进一步简化逻辑，它会自动处理状态不可变性，还自带action创建函数：

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

const buttonSlice = createSlice({
  name: 'buttons',
  initialState: {
    button1: false,
    button2: false,
    button3: false
  },
  reducers: {
    toggleButton: (state, action) => {
      const key = action.payload;
      state[key] = !state[key];
      // Redux Toolkit允许直接修改状态，内部会自动转换为不可变更新
    },
    resetAllButtons: (state) => {
      Object.keys(state).forEach(key => state[key] = false);
    }
  }
});

export const { toggleButton, resetAllButtons } = buttonSlice.actions;
export default buttonSlice.reducer;

这种写法更简洁，代码量更少，维护成本也更低~

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