Redux中使用可变索引更新嵌套状态的实现疑问

我懂你现在的痛点——照着那篇Redux嵌套state更新的教程写，但发现例子里的模型ID是硬编码的62416，可你实际场景里这个ID是用户选的可变值，直接写死肯定不行对吧？

其实用ES6的计算属性名就能轻松解决这个动态键的问题，给你写个完整的reducer示例：

const yourReducer = (state, action) => {
  switch (action.type) {
    case 'SET_MODEL_FAVORITED': {
      // 从action里拿到用户当前选择的动态模型ID
      const targetModelId = action.payload.modelId;
      
      return {
        // 先解构整个state，保留其他不变的部分
        ...state,
        models: {
          // 解构models对象，保留其他模型的数据
          ...state.models,
          // 用计算属性名[targetModelId]来动态定位要修改的模型
          [targetModelId]: {
            // 解构目标模型的原有数据
            ...state.models[targetModelId],
            details: {
              // 解构details对象，保留其他字段
              ...state.models[targetModelId].details,
              // 只修改favorited字段为true
              favorited: true
            }
          }
        }
      };
    }
    default:
      return state;
  }
};

小提醒： #

如果担心state.models[targetModelId]可能不存在（比如用户选了一个还没加载到state里的模型），可以加个兜底避免报错：

[targetModelId]: {
  ...(state.models[targetModelId] || {}), // 用空对象兜底
  details: {
    ...((state.models[targetModelId]?.details) || {}),
    favorited: true
  }
}

这个方法完全符合Redux的不可变更新原则，而且完美适配你这种动态模型ID的场景~

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