web-dev-qa-db-fra.com

Utiliser Object.assign ou Spread Operator dans React/Redux? Quelle est la meilleure pratique

J'ai une certaine confusion à propos de l'utilisation de Object.assign pour React et Redux.

J'ai lu cet article article . 

ES6 n'est pas pris en charge par tous les navigateurs, mais j'ai commencé à l'utiliser.

J'ai deux questions:

  1. Est-ce la bonne décision de continuer avec Object.assign?
  2. Quelle est l'alternative?

Mon code 

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

Quelle est l'alternative pour le code ci-dessus?

javascriptreactjsredux
15
Gopinath Kaliappan

Redux docs vous recommande d’utiliser l’approche de l’opérateur de propagation au lieu du Object.assign 

Selon les docs:

Une autre approche consiste à utiliser la syntaxe de propagation d'objet proposée pour les prochaines versions de JavaScript qui vous permettent d'utiliser la propagation (...) opérateur pour copier les propriétés énumérables d'un objet vers un autre de manière plus succincte. L'opérateur de propagation d'objet est conceptuellement similaire à l'opérateur de propagation de matrice ES6

L'avantage d'utiliser la syntaxe de propagation d'objet devient plus évident lorsque vous composez des objets complexes

Utilisation de la syntaxe d'opérateur 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
                           }
                 }

             }
   }
}

Il utilise toujours ES6. Voir Redux docs pour plus d'informations sur la configuration de votre code pour le même

Cependant, lorsque vous traitez avec les données imbriquées. Je préfère utiliser immutability-helpers

Pour votre code ce sera comme

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

Ok, peut-être que je n’avais pas vraiment raison mais c’est de Dan Abramov (créateur de redux)

Enfin, vous devez vous rappeler que Object.assign est une nouvelle méthode dans ES6, il n'est donc pas disponible nativement dans tous les navigateurs. Vous devriez utilisez un polyfill, soit celui livré avec Babel, soit un autonome Object.assign polyfill, pour l'utiliser sans risque de planter votre site Internet.

Une autre option qui ne nécessite pas de remplissage multiple consiste à utiliser le nouveau fichier objet de propagation d'objet, qui ne fait pas partie de ES6. Cependant, il est proposé pour ES7. Il est assez populaire et activé dans Babel si vous utilisez le préréglage de l'étape deux.

2
Son Dang

L'alternative au code que vous avez posté utilise la propagation d'objet:

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

J'ai également raccourci le corps de la fonction de flèche dans votre code pour renvoyer simplement l'objet.

Vous pouvez utiliser la syntaxe de propagation objet rest en utilisant le plugin Babel transform-object-rest-spread .

Installez-le comme ceci:

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

Configurez son utilisation dans votre .babelrc comme ceci:

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

La propagation d'un objet est la syntaxe ES7, rendue par Babel, Object.assign () est la syntaxe ES6 et n'est pas prise en charge par certains navigateurs. C'est pourquoi vous devriez utiliser Object spread au lieu de Object.assign ()

0
Son Dang