javascript - ¿Usar Object.assign u Spread Operator en React/Redux? Cual es una mejor practica

reactjs

Question

Tengo cierta confusión sobre el uso de Object.assign para React y Redux.

He leido este article .

Dice que ES6 no es compatible con todos los navegadores, pero he comenzado a usarlo.

Tengo dos preguntas:

1. ¿Es la decisión correcta continuar con Object.assign ?
2. Cual es la alternativa?

Mi código

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

¿Cuál es la alternativa para el código anterior?

Answer 1

La alternativa al código que publicó es usar la distribución de objetos:

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

También he acortado el cuerpo de la función de flecha en su código para simplemente devolver el objeto.

Puede usar la sintaxis del objeto rest spread utilizando el complemento Babel transform-object-rest-spread .

Instálalo así:

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

Configure su uso en su .babelrc de esta manera:

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

Answer 2

La propagación de objetos es la sintaxis ES7, renderizado es compatible con Babel, Object.assign () es la sintaxis ES6, no es compatible con algunos navegadores. Es por eso que debes usar Object spread en lugar de Object.assign ()

Answer 3

Ok, puede que no tuviera razón, pero esto es de Dan Abramov (creador de redux)

Finalmente, debe recordar que Object.assign es un nuevo método en ES6, por lo que no está disponible de forma nativa en todos los navegadores. Debe usar un polyfill, ya sea el que se envía con Babel o un Object.assign polyfill independiente, para usarlo sin correr el riesgo de bloquear su sitio web.

Otra opción que no requiere un polyfill es usar el nuevo operador de propagación de objetos, que no forma parte de ES6. Sin embargo, se propone para ES7. Es bastante popular y está habilitado en Babel si usa el preajuste de la etapa dos.

Answer 4

Redux docs recomienda que utilice el enfoque de operador de propagación en lugar de Object.assign

Según los documentos:

Un enfoque alternativo es usar la sintaxis de propagación de objetos propuesta para las próximas versiones de JavaScript que le permite usar el operador de propagación (...) para copiar propiedades enumerables de un objeto a otro de una manera más sucinta. El operador de propagación de objetos es conceptualmente similar al operador de propagación de matriz ES6

La ventaja de usar la sintaxis de propagación de objetos se hace más evidente cuando compones objetos complejos

Usando la sintaxis del operador 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
                           }
                 }

             }
   }
}

Todavía usa ES6. Consulte los redux.js.org/docs/recipes/UsingObjectSpreadOperator.html para obtener más información sobre cómo configurar su código para el mismo

Sin embargo, cuando se trata de datos anidados. Prefiero usar immutability-helpers

Para su código será como

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