每个属性都需要一个reducer吗？

Question

我正在跟随这个教程来递增一个数字。

它是有效的，但是现在我想要将其实现到大约100个配置值上。我需要复制counterSlice.js 100次还是需要用一个具有100个属性的对象替换数字？

counterSlice.js

export const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
  },
  reducers: {
    increment: (state) => {
      // Redux Toolkit 允许我们在 reducer 中编写“修改”逻辑。它实际上不会改变状态，因为它使用 Immer 库，
      // 它检测到对“draft state”的更改，并基于这些更改生成一个全新的不可变状态。
      // 此外，这些函数不需要返回语句。
      state.value += 1
    },
    decrement: (state) => {
      state.value -= 1
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload
    },
  },
})

// 为每个 case reducer 函数生成 action creators
export const { increment, decrement, incrementByAmount } = counterSlice.actions

export default counterSlice.reducer

Answer 1

在某些情况下，明确为每个状态字段创建函数可能是明智的。但是如果你确实有大约100个状态字段，那么你需要采用更通用的方法。

我建议在reducer函数的payload中包含一个key和value字段。

export const configSlice = createSlice({
  name: 'config',
  initialState: {},
  reducers: {
    setConfigValue: (state, action) => {
      const { key, value } = action.payload;

      state[key] = value;
    },
  },
})

---