Redux中如何为状态树指定嵌套机器对象赋值options和packages

首先先补全你没写完的动作创建器代码（应该是漏了options和packages的完整定义）：

export const submitconfigMachine = (machineName, options, packages) => ({
  type: CONFIG_MACHINE,
  payload: { machineName, options, packages }
});

接下来是核心的Reducer实现，利用对象的动态属性键就能精准匹配到对应的机器，同时遵循Redux的immutable状态更新规则：

// 初始化状态树
const initialState = {
  machines: {
    "first_machine": {},
    "second_machine": { options: [], packages: [] }
  }
};

const machineReducer = (state = initialState, action) => {
  switch (action.type) {
    case CONFIG_MACHINE: {
      // 从payload中解构出需要的参数
      const { machineName, options, packages } = action.payload;
      
      // 返回新的状态对象，确保不修改原状态
      return {
        ...state,
        machines: {
          // 复制原有所有机器的状态
          ...state.machines,
          // 动态匹配目标机器，更新它的options和packages
          [machineName]: {
            // 保留该机器原有其他属性（如果以后扩展字段也能兼容）
            ...state.machines[machineName],
            options,
            packages
          }
        }
      };
    }
    // 默认返回原状态
    default:
      return state;
  }
};

关键细节说明 #

• 动态属性键：[machineName] 是ES6的语法，能直接把变量值作为对象的键，完美匹配你状态树里的机器名称（比如"first_machine"或"second_machine"）
• Immutable更新：全程用扩展运算符...复制原有状态，只修改目标机器的对应字段，符合Redux对状态不可变的要求
• 兼容扩展：...state.machines[machineName] 会保留该机器原来的其他属性，就算以后给机器加新字段（比如status），这个Reducer也不用修改就能正常工作

因为你提到所有机器名称都存在于状态树中，所以不用额外做存在性检查，直接更新即可。

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