Utilisez Object.assign ou Spread Operator dans React / Redux? Quelle est une meilleure pratique

J'ai une certaine confusion sur l'utilisation de Object.assign pour Réagir et Redux.

J'ai lu ce l'article.

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

J'ai deux questions:

  1. Est-il 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?

source d'informationauteur Gopinath Kaliappan

  1. 14

    Redux docs vous recommande d'utiliser la propagation de l'opérateur au lieu de la Object.assign

    Que par les docs:

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

    L'avantage de l'utilisation de l'objet de la propagation de la syntaxe devient plus évident quand vous êtes à la composition complexe des objets

    À l'aide de la Propagation de l'opérateur syntaxe

    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 encore l'ES6. Voir la Redux docs pour plus d'informations sur la configuration de votre code pour le même

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

    Pour votre code, il va être 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}
            }
         }
    })
   }
}
  2. 2

    Ok peut être que je n'étais pas vraiment droit, mais c'est à partir de Dan Abramov (redux créateur)

    Enfin, il faut rappeler que l'Objet.attribuer est une nouvelle méthode dans
    ES6, de sorte qu'il n'est pas disponible en mode natif dans tous les navigateurs. Vous devriez
    utiliser un polyfill, celui qui est livré avec Babel ou autonome
    Objet.attribuer polyfill, de l'utiliser sans risquer de s'écraser votre
    site web.

    Une autre option qui ne nécessite pas un polyfill est d'utiliser le nouveau
    objet de la propagation de l'opérateur, qui ne fait pas partie de l'ES6. Cependant, il est
    proposé pour l'ES7. Il est assez populaire, et qu'il est activé dans Babel si
    vous utilisez les deux étapes de présélection.

  3. 1

    L'alternative pour le code que vous avez posté est l'objet d'épandage:

    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 aussi de raccourcir le corps de la flèche en fonction de votre code de simplement retourner l'objet.

    Vous pouvez utiliser l'objet reste la propagation de la syntaxe à l'aide de la Babel plugin transformer-objet-repos-propagation.

    L'installer comme ceci:

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

    Configurer son utilisation dans votre .babelrc comme ceci:

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

    Objet de la propagation est ES7 de la syntaxe, de rendre soutenu par Babel, l'Objet.assign() est ES6 syntaxe, pas de soutien dans certains navigateur.
    C'est pourquoi vous devez utiliser l'Objet de la propagation à la place de l'Objet.assign()