在reducer中向对象添加属性

Question

我正在尝试向我的州currentDrink添加属性：

{
    currentDrink: {
      ...action.payload
    },
    ...state
}

我希望我的州成为：

currentDrink: {
    prop: 1,
    prop: 2,
    ...etc
},

我的状态只包含一个属性。

Answer 1

问题非常简单，使用扩展运算符语法的顺序决定了最终结果

所以

{
    currentDrink: {
      ...action.payload
    },
    ...state
  }

与

不同

 {
    ...state,
    currentDrink: {
      ...action.payload
    }
  }

在第一种情况下，如果州已经包含currentDrink属性，则您的自定义更改currentDrink将被状态1覆盖。

在第二秒中，自定义currentDrink对象将覆盖状态中存在的内容（如果有的话）。但是

currentDrink: {
    ...action.payload
}

将解构action.payload并将其分配给currentDrink并覆盖当前状态中currentDrink对象中存在的内容。

您应该使用

{
    ...state,
    currentDrink: {
      ...state.currentDrink,
      ...action.payload
    }
}