如何批量修改Redux对象中多个属性的值？

场景1：将所有布尔类型的flags设为false #

首先修正你初始状态里的语法错误（把three: false;的分号改成逗号）：

const initialState = {
  flags: {
    one: true,
    two: true,
    three: false
  }
};

在Redux Toolkit的切片reducer中，你可以通过Object.fromEntries结合Object.keys快速生成一个所有属性值为false的新对象，同时保持immutability（Redux Toolkit的Immer会帮你处理不可变更新）：

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

const flagsSlice = createSlice({
  name: 'flags',
  initialState,
  reducers: {
    setAllFlagsToFalse: (state) => {
      // 生成新的flags对象，所有属性设为false
      state.flags = Object.fromEntries(
        Object.keys(state.flags).map(key => [key, false])
      );
    },
    // 其他reducer逻辑...
  }
});

// 导出action供组件调用
export const { setAllFlagsToFalse } = flagsSlice.actions;
export default flagsSlice.reducer;

在组件中调用时，直接dispatch这个action即可：

dispatch(setAllFlagsToFalse());

场景2：将所有字符串类型的flags统一修改为指定字符串 #

假设你的初始状态是字符串类型：

const initialState = {
  flags: {
    one: 'default',
    two: 'default',
    three: 'default'
  }
};

你可以创建一个带payload的reducer，让action携带要设置的目标字符串：

const flagsSlice = createSlice({
  name: 'flags',
  initialState,
  reducers: {
    setAllFlagsToTargetString: (state, action) => {
      const targetString = action.payload;
      state.flags = Object.fromEntries(
        Object.keys(state.flags).map(key => [key, targetString])
      );
    },
    // 其他reducer逻辑...
  }
});

export const { setAllFlagsToTargetString } = flagsSlice.actions;
export default flagsSlice.reducer;

调用时传入目标字符串作为payload：

dispatch(setAllFlagsToTargetString('new-unique-value'));

核心思路 #

两种场景的本质都是基于原flags对象的键生成新对象，避免直接修改原状态（符合Redux的不可变更新原则）。Redux Toolkit的Immer允许我们直接赋值state.flags，不需要手动展开原对象再修改，简化了代码。

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