React-Redux中是否需要为每个配置属性编写单独的Reducer？

绝对不要复制100份counterSlice.js——这种做法会造成严重的代码冗余，后续维护和扩展都会变成灾难。正确的方案是将单个数值替换为包含所有配置值的对象，同时调整reducers逻辑，让它们支持针对指定配置项进行操作。

修改后的configSlice.js示例 #

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

// 初始化100个配置项的初始状态（可根据实际需求调整初始值）
const initialState = {};
for (let i = 1; i <= 100; i++) {
  initialState[`config${i}`] = 0;
}

export const configSlice = createSlice({
  name: 'configs',
  initialState,
  reducers: {
    increment: (state, action) => {
      const { key } = action.payload;
      // Immer允许我们直接修改draft state
      state[key] += 1;
    },
    decrement: (state, action) => {
      const { key } = action.payload;
      state[key] -= 1;
    },
    incrementByAmount: (state, action) => {
      const { key, amount } = action.payload;
      state[key] += amount;
    },
  },
});

export const { increment, decrement, incrementByAmount } = configSlice.actions;

export default configSlice.reducer;

组件中调用示例 #

在组件里操作指定配置项时，只需要在dispatch时传入对应的key：

// 递增config1的值
dispatch(increment({ key: 'config1' }));

// 给config50增加指定数值
dispatch(incrementByAmount({ key: 'config50', amount: 10 }));

方案优势 #

• 仅需维护单个slice，代码简洁易维护
• 所有配置项的状态逻辑统一，避免重复代码
• 可灵活扩展配置项数量，新增或删除只需调整初始化逻辑

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