Aktualisierung redux Speicher nach Komponente Requisiten ändern

Question

Ich frage mich, was der beste Ansatz dieses Szenario in redux zu handhaben und ob noch irgendwelche Muster zu bevorzugen oder zu vermeiden:

Ich habe eine ‚Einkaufsliste‘ Komponente, die zusammengesetzt ist von mehreren Unterpunkten, von denen jeder auf eine Vielzahl von Arten modifiziert werden kann. Ich behalte auch den Gesamtpreis der Einkaufsliste im Auge, der sich jedes Mal ändert, wenn ein Unterpunkt hinzugefügt, entfernt oder geändert wird, sowie andere Faktoren.

Zur Zeit habe ich eine Komponente ‚Total‘, die in den Laden abonniert ist und berechnet die Gesamtsumme, wenn alle Einkaufslistenpositionen ändern (um es als Requisiten bestanden). Dies speichert dann die neu berechnete Summe im Geschäft. Während dies funktioniert und ist scheinbar robuster als zu versuchen, jede Aktion zu antizipieren, die eine Auswirkung auf die Gesamt hat, bedeutet es, dass die App wieder macht zweimal: Zum einen, wenn ein Element geändert wird, dann zweitens, wenn die Gesamt neu berechnet wird.

Ich nehme an, dass dies wahrscheinlich nicht die beste Herangehensweise an die Situation ist, und ich frage mich, ob ich etwas besser direkt in der Einkaufsliste Reducer oder mit einer Art Middleware tun kann. Jeder Rat würde geschätzt werden.

-

Der aktuelle Prozess zusammengefasst werden können als:

• Benutzer ändert Einkaufsliste Artikel
• Aktion ausgelöst wird, den Laden mit dem modifizierten Einkaufsliste aktualisieren
• New Zustand breitet sich durch App
• Preis Gesamt Komponente erhält neue Requisiten, berechnet insgesamt und Versendungen aktualisiert insgesamt in den Laden
• New Zustand breitet sich durch App

Answer 1

Die Tatsache, dass Sie die Gesamt-Komponente verwenden, um die Summe zu berechnen und dann eine Aktion zur Aktualisierung der Gesamtsumme im Geschäft zu versenden, ist komplizierend, Ihre Summe ist eigentlich nur eine Ableitung anderer Teile Ihres Bundesstaates und muss nicht im Status selbst gespeichert werden.

Angenommen, Sie verwenden react-redux, um Ihre Total-Komponente mit Ihrem Status zu verbinden, können Sie einfach die Summe im mapStateToProps-Teil von connect() berechnen. Zum Beispiel:

const mapStateToProps = (state, props) => { 
    return { 
    total: state.shoppingList.reduce((total, item) => total + item.price, 0) 
    } 
} 
export default connect(mapStateToProps)(Total) 

(Dieses Beispiel nimmt state.shoppingList ein Array von Elementen ist, die jeweils mit einer price Eigenschaft Ihrer Situation wahrscheinlich ein wenig komplexer ist, aber die Idee ist das gleiche..)

Dies würde Erlauben Sie Ihrer Total-Komponente den Zugriff auf/Anzeige der Gesamtsumme, aber ohne die zusätzliche Schwierigkeit, den Status neu zu aktualisieren.

Weitere Informationen zu diesen Statusableitungen finden Sie unter reselect. Sie können "Memo-Selektoren" erstellen, die ihre Neuberechnungen nur durchführen, wenn sich die relevanten Teile des Zustands geändert haben, andernfalls werden sie den abgeleiteten Wert aus dem Speicher zurückgeben. Diese Selektoren können überall importiert werden, so dass es leicht ist, die Summe auch an anderen Orten anzuzeigen, wenn Sie es jemals benötigen.

Answer 2

Wenn ich richtig denken, ich verstehe Sie die Komponente Update-Funktion verwendet werden soll:

void componentWillReceiveProps(
    object nextProps 
) 

Zitat aus dem offiziellen doc:

„aufgerufen, wenn Eine Komponente erhält neue Requisiten. Diese Methode wird nicht für das anfängliche Rendern aufgerufen.

Verwenden Sie dies als eine Gelegenheit, auf einen Requisitenübergang zu reagieren, bevor render() aufgerufen wird, indem der Status mithilfe von this.setState() aktualisiert wird. Die alten Requisiten können über this.props erreicht werden. Der Aufruf this.setState() innerhalb dieser Funktion wird ein zusätzliches macht nicht auslösen.“

Dies bedeutet, dass, wenn eine Änderung an Ihre Merkliste gemacht wird, können Sie die Summe in der componentWillReceiveProps Funktion berechnen, ohne ein zweiten Trigger