在React / Redux中使用Object.assign或Spread Operator？哪个是更好的做法 [英] Use Object.assign or Spread Operator in React/Redux? Which is a better practise

问题描述

我对React和Redux使用 Object.assign 感到困惑。

I have some confusion about using Object.assign for React and Redux.

我读了这个文章。

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

It says ES6 Does not supported by all browsers but I have started using it.

我有两个问题：

1. 继续使用 Object.assign 是否是正确的决定？


2. 有什么选择？

1. Is it the right decision to continue with Object.assign?
2. What is the alternative?

我的代码

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
             })
         })
      })
   }
}

什么是上述代码的替代方法吗？

What is the alternative for the above code?

推荐答案

Redux文档建议您使用扩展运算符方法而不是 Object.assign

Redux docs recommends you to use the spread operator approach instead of the Object.assign

根据文档：

另一种方法是使用建议的
的对象扩展语法用于下一版本的JavaScript，它允许您使用spread
（...）运算符将可枚举属性从一个对象复制到
另一种更简洁的方式。对象扩展运算符是
，概念上类似于ES6数组扩展运算符

An alternative approach is to use the object spread syntax proposed for the next versions of JavaScript which lets you use the spread (...) operator to copy enumerable properties from one object to another in a more succinct way. The object spread operator is conceptually similar to the ES6 array spread operator

使用对象扩展语法的优势变得更多当你编写复杂对象时很明显

The advantage of using the object spread syntax becomes more apparent when you're composing complex objects

使用Spread运算符语法

Using the Spread operator syntax

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文档 。相同的代码

It still uses ES6. See the Redux docs for more info on configuring your code for the same

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

However when you are dealing with the nested data. I prefer to use 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}
            }
         }
    })
   }
}

这篇关于在React / Redux中使用Object.assign或Spread Operator？哪个是更好的做法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！