webentwicklung-frage-antwort-db.com.de

Verwenden Sie Object.assign oder Spread Operator in React/Redux? Welches ist eine bessere Praxis

Ich habe einige Verwirrung über die Verwendung von Object.assign für React und Redux.

Ich habe diesen Artikel gelesen. 

Es besagt, dass ES6 nicht von allen Browsern unterstützt wird, aber ich habe damit angefangen.

Ich habe zwei Fragen:

  1. Ist es die richtige Entscheidung, mit Object.assign fortzufahren?
  2. Was ist die Alternative?

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

Was ist die Alternative für den obigen Code?

javascriptreactjsredux
15
Gopinath Kaliappan

Redux docs empfiehlt die Verwendung des Spread-Operator-Ansatzes anstelle von Object.assign. 

Wie in den Dokumenten:

Ein alternativer Ansatz ist die Verwendung der vorgeschlagenen Objektverbreitungssyntax für die nächsten Versionen von JavaScript, mit denen Sie den Spread .__ verwenden können. (...) Operator zum Kopieren von aufzählbaren Eigenschaften von einem Objekt nach eine andere auf eine prägnantere Weise. Der Objektverteilungsoperator ist konzeptionell ähnlich wie der ES6-Array-Spread-Operator

Der Vorteil der Verwendung der Objektverteilungssyntax wird deutlicher, wenn Sie komplexe Objekte erstellen

Verwenden der Spread-Operatorsyntax

export const selectDiameter = (scaleData,size) => {
  return {
    type: SELECT_DIAMETER,
    payload: {...scaleData, 
                 diameter: {
                          ...scaleData.diameter,
                           selectedTube: size,
                           isClicked: true,
                           audio: {
                                ...scaleData.diameter.audio,
                                isPlayed: true
                           }
                 }

             }
   }
}

Es verwendet immer noch ES6. Weitere Informationen zur Konfiguration Ihres Codes finden Sie in den - Redux-Dokumenten

Allerdings, wenn Sie mit den verschachtelten Daten zu tun haben. Ich bevorzuge immutability-helpers

Für Ihren Code wird es so sein

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, vielleicht war ich nicht wirklich richtig, aber das ist von Dan Abramov (Redux Creator)

Schließlich müssen Sie daran denken, dass Object.assign eine neue Methode in .__ ist. ES6, daher ist es nicht in allen Browsern nativ verfügbar. Du solltest Verwenden Sie eine Füllstofffüllung, entweder diejenige, die mit Babel geliefert wird, oder eine Standalone Object.assign polyfill, um es zu verwenden, ohne einen Absturz des .__ zu riskieren. Webseite.

Eine andere Option, für die keine Polyfill erforderlich ist, ist die Verwendung des neuen Objektverteilungsoperator, der nicht Teil von ES6 ist. Wie auch immer es ist für ES7 vorgeschlagen. Es ist ziemlich beliebt und ist in Babel aktiviert, wenn Sie verwenden das Preset der zweiten Stufe.

2
Son Dang

Die Alternative zu dem von Ihnen geposteten Code ist die Objektverteilung:

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

Ich habe auch den Rumpf der Pfeilfunktion in Ihrem Code gekürzt, um das Objekt einfach zurückzugeben.

Sie können die Objektrestverbreitungssyntax verwenden, indem Sie das Babel-Plugin transform-object-rest-spread verwenden.

Installieren Sie es so:

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

Konfigurieren Sie die Verwendung in .babelrc folgendermaßen:

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

Objektverteilung ist ES7-Syntax, von Babel unterstütztes Rendering, Object.assign () ist ES6-Syntax, es wird in einigen Browsern nicht unterstützt. Deshalb sollten Sie Object Spread anstelle von Object.assign () verwenden.

0
Son Dang