如何更新 Redux + React 中的嵌套对象属性？答案

【问题标题】：How to update nested object property in Redux + React?如何更新 Redux + React 中的嵌套对象属性？
【发布时间】：2016-10-05 08:18:41
【问题描述】：

首先，具有一些属性（name、color、age）的user 对象通过SET_USER 设置，我想更新@ 中的name 属性987654328@ 对象通过UPDATE_USER_NAME，但是当我使用下面的代码并在UPDATE_USER_NAME 中嵌套循环时，name 属性不会更新。

我做错了什么？如果我执行user: {action.name, ...state.user} 之类的操作，user 对象会更新并正常工作，但这只会从action.name 创建另一个新属性，而不是更新user 对象内的当前name。

const DEFAULT_STATE = {
  user: {},
}

export default function(state = DEFAULT_STATE, action) {\
  switch(action.type) {
    case actionTypes.SET_USER:
      return {
        ...state,
        user: action.user,
      }

    case actionTypes.UPDATE_USER_NAME:
      return {
        ...state,
        user: {
          name: action.name,
          ...state.user,
        }
      }

    default:
      return state
  }
}

【问题讨论】：

我发现一个“合并”新对象创建的好方法是使用Object.assign api。
例如...user: Object.assign({}, state.user, { name: action.name })

标签： javascript reactjs react-native redux react-redux

【解决方案1】：

你只需要稍微改变点差的顺序：

case actionTypes.UPDATE_USER_NAME:
      return {
        ...state,
        user: {
          ...state.user,
          name: action.name,
        }
      }

这会将user 设置为当前的state.user，然后覆盖name。传播方式类似于Object.assign（从左到右）。这是因为在对象字面量中分配相同的键将是“最后一个获胜”。

【讨论】：