在React / Redux中使用Object.assign或Spread运算符？哪个更好的做法

Question

我对使用Object.assignReact和Redux 有一些困惑。

我读了这篇文章。

它说并非所有浏览器都支持ES6，但我已经开始使用它。

我有两个问题：

1. 继续下去是正确的决定Object.assign吗？
2. 有什么选择？

我的密码

export const selectDiameter = (scaleData, size) => {
  return {
    type: SELECT_DIAMETER,
    payload: Object.assign({}, scaleData, {
         diameter: Object.assign({}, scaleData.diameter, {
             selected_tube_diameter: size,
             is_clicked: true,
             audio: Object.assign({}, scaleData.diameter.audio, {
               is_played: true
             })
         })
      })
   }
}

以上代码的替代方法是什么？

Answer 1

Redux文档建议您使用传播算子方法，而不要使用 Object.assign

根据文档：

一种替代html" target="_blank">方法是使用为下一版本的JavaScript提议的对象传播语法，该语法使您可以使用传播（…）运算符以更简洁的方式将可枚举的属性从一个对象复制到另一个对象。对象扩展运算符在概念上类似于ES6阵列扩展运算符

编写复杂对象时，使用对象传播语法的优势变得更加明显

使用Spread运算符语法

export const selectDiameter = (scaleData,size) => {
  return {
    type: SELECT_DIAMETER,
    payload: {...scaleData, 
                 diameter: {
                          ...scaleData.diameter,
                           selectedTube: size,
                           isClicked: true,
                           audio: {
                                ...scaleData.diameter.audio,
                                isPlayed: true
                           }
                 }

             }
   }
}

它仍然使用ES6。有关为相同代码配置代码的更多信息，请参见
Redux文档
。

但是，当您处理嵌套数据时。我更喜欢使用immutability-helpers

对于您的代码，它将像

import update from 'immutability-helpers';

export const selectDiameter = (scaleData,size) => {
  return {
    type: SELECT_DIAMETER,
    payload: update(scaleData, {
         diameter: {
            selectedTube: { $set: size},
            isClicked: { $set: true},
            audio: {
                isPlayed: {$set: true}
            }
         }
    })
   }
}