it-swarm.com.ru

Использовать Object.assign или Spread Operator в React / Redux? Что является лучшей практикой

У меня путаница в использовании Object.assign для React и ​​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
             })
         })
      })
   }
}

Какая альтернатива для приведенного выше кода?

15
Gopinath Kaliappan

Redux docs рекомендует использовать подход оператора распространения вместо Object.assign 

Согласно документам:

Альтернативный подход заключается в использовании предложенного синтаксиса распространения объекта для следующих версий 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 docs для получения дополнительной информации о настройке вашего кода для того же

Однако, когда вы имеете дело с вложенными данными. Я предпочитаю использовать 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}
            }
         }
    })
   }
}
16
Shubham Khatri

Хорошо, может быть, я был не совсем прав, но это от Дана Абрамова (создатель излишков)

Наконец, вы должны помнить, что Object.assign - это новый метод в ES6, поэтому он доступен не во всех браузерах. Вам следует используйте полифилл, либо тот, который поставляется с Вавилоном, либо автономный Object.assign polyfill, чтобы использовать его, не рискуя разбить ваш Веб-сайт.

Другой вариант, который не требует полифилла, - это использовать новый оператор распространения объекта, который не является частью ES6. Тем не менее, это предлагается для ES7. Он довольно популярен и включен в Babel, если Вы используете предварительную настройку второго этапа.

2
Son Dang

Альтернативой коду, который вы разместили, является распространение объекта:

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

Я также сократил тело функции стрелки в вашем коде до простого возврата объекта.

Вы можете использовать синтаксис распространения покоя объекта с помощью плагина Babel transform-object-rest-spread .

Установите это так:

npm install --save-dev babel-plugin-transform-object-rest-spread

Настройте его использование в вашем .babelrc следующим образом:

{
    "plugins": ["transform-object-rest-spread"]
}
2
Patrick Hund

Распространение объектов - это синтаксис ES7, рендеринг поддерживается Babel, Object.assign () - это синтаксис ES6, он не поддерживается в некоторых браузерах. Вот почему вы должны использовать Object распространения вместо Object.assign ()

0
Son Dang