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

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 docs建议您使用扩展运算符方法而不是 Object.assign

根据文档:

另一种方法是使用为下一版JavaScript提出的对象扩展语法,它允许您使用spread(...)运算符以更简洁的方式将可枚举属性从一个对象复制到另一个对象.对象扩展运算符在概念上类似于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}
            }
         }
    })
   }
}