Ich versuche, die Verbindungsmethode von React-Redux und die Funktionen, die sie als Parameter verwendet, zu verstehen. Insbesondere mapStateToProps()
.
So wie ich es verstehe, ist der Rückgabewert von mapStateToProps
ein Objekt, das vom Status abgeleitet ist (wie es sich im Geschäft befindet), dessen Schlüssel als Requisiten an Ihre Zielkomponente übergeben werden (auf die die Komponentenverbindung angewendet wird).
Dies bedeutet, dass der Status, der von Ihrer Zielkomponente verwendet wird, eine völlig andere Struktur haben kann als der Status, der in Ihrem Geschäft gespeichert ist.
F: Ist das in Ordnung?
F: Wird das erwartet?
F: Ist das ein Anti-Muster?
javascript
reactjs
redux
react-redux
Pablo Barría Urenda
quelle
quelle
this.props.someData
im Gegensatz zuthis.props.someKey[someOtherKey].someData
... Sinn machen?Antworten:
F:
Is this ok?
A: Ja
F:
Is this expected?
Ja, dies wird erwartet (wenn Sie React-Redux verwenden).
F:
Is this an anti-pattern?
A: Nein, dies ist kein Anti-Muster.
Es heißt "Verbinden" Ihrer Komponente oder "Smart machen". Es ist beabsichtigt.
Sie können Ihre Komponente eine zusätzliche Zeit von Ihrem Status entkoppeln, wodurch die Modularität Ihres Codes erhöht wird. Außerdem können Sie Ihren Komponentenstatus als Teilmenge Ihres Anwendungsstatus vereinfachen, wodurch Sie das Redux-Muster einhalten können.
Stellen Sie sich das so vor: Ein Geschäft soll den gesamten Status Ihrer Anwendung enthalten.
Für große Anwendungen kann dies Dutzende von Eigenschaften enthalten, die viele Schichten tief verschachtelt sind.
Sie möchten nicht alles bei jedem Anruf herumschleppen (teuer).
Ohne
mapStateToProps
oder ein Analogon davon wären Sie versucht, Ihren Zustand auf eine andere Weise zu zerlegen, um die Leistung zu verbessern / zu vereinfachen.quelle
(1) -
Einfacherer tiefer Zugriff(2) -
Vermeiden Sie Fehler, bei denen eine Komponente den Status, der nicht zu ihr gehört,Ja, das ist richtig. Es ist nur eine Hilfsfunktion, um einfacher auf Ihre Statuseigenschaften zugreifen zu können
Stellen Sie sich vor, Sie haben einen
posts
Schlüssel in Ihrer Appstate.posts
Und Komponente
Posts
Standardmäßig
connect()(Posts)
werden alle Statusrequisiten für die verbundene Komponente verfügbar gemachtWenn Sie das jetzt
state.posts
Ihrer Komponente zuordnen, wird es ein bisschen schönermapDispatchToProps
normalerweise muss man schreiben
dispatch(anActionCreator())
mit
bindActionCreators
dir kannst du es auch leichter machen wieJetzt können Sie es in Ihrer Komponente verwenden
Update auf actionCreators ..
Ein Beispiel für einen actionCreator:
deletePost
So
bindActionCreators
wird nur Ihre Aktionen, wickeln sie indispatch
Call. (Ich habe den Quellcode von Redux nicht gelesen, aber die Implementierung könnte ungefähr so aussehen:quelle
dispatch => bindActionCreators({fetchPosts, deletePost}, dispatch)
diefetchPosts
unddeletePost
Aktionen?state => state.posts
(diemapStateToProps
Funktion) React mitteilt, welche Zustände bei der Aktualisierung ein erneutes Rendern der Komponente auslösen.Du hast den ersten Teil richtig verstanden:
Ja
mapStateToProps
hat den Speicherstatus als Argument / Parameter (bereitgestellt vonreact-redux::connect
) und wird verwendet, um die Komponente mit einem bestimmten Teil des Speicherstatus zu verknüpfen.Mit Verknüpfung meine ich, dass das von zurückgegebene Objekt zum
mapStateToProps
Zeitpunkt der Erstellung als Requisiten bereitgestellt wird und jede nachfolgende Änderung über verfügbar istcomponentWillReceiveProps
.Wenn Sie das Observer-Entwurfsmuster kennen, ist es genau das oder eine kleine Variation davon.
Ein Beispiel würde helfen, die Dinge klarer zu machen:
Es kann eine andere Reaktionskomponente namens genannt werden
itemsFilters
, die die Anzeige verwaltet und den Filterstatus im Redux Store-Status beibehält. Die Demo-Komponente "hört" oder "abonniert" Redux Store-Statusfilter, sodass immer dann, wenn Filter den Status ändern (mit Hilfe vonfiltersComponent
) reagieren -redux erkennt, dass eine Änderung aufgetreten ist, und benachrichtigt oder "veröffentlicht" alle abhörenden / abonnierten Komponenten, indem die Änderungen ancomponentWillReceiveProps
diese gesendet werden. In diesem Beispiel wird ein Refilter der Elemente ausgelöst und die Anzeige aktualisiert, da sich der Reaktionsstatus geändert hat .Lassen Sie mich wissen, ob das Beispiel verwirrend oder nicht klar genug ist, um eine bessere Erklärung zu liefern.
Wie für: Dies bedeutet, dass der Status, wie er von Ihrer Zielkomponente verwendet wird, eine völlig andere Struktur haben kann als der Status, wie er in Ihrem Geschäft gespeichert ist.
Ich habe die Frage nicht verstanden, weiß aber nur, dass sich der Reaktionsstatus (
this.setState
) völlig vom Redux Store-Status unterscheidet!Der Reaktionszustand wird verwendet, um das Neuzeichnen und Verhalten der Reaktionskomponente zu handhaben. Der Reaktionszustand ist ausschließlich in der Komponente enthalten.
Der Redux Store-Status ist eine Kombination aus Redux Reducer-Status, die jeweils für die Verwaltung einer App-Logik für kleine Teile verantwortlich sind. Auf diese Reduzierungsattribute kann mit Hilfe
react-redux::connect@mapStateToProps
jeder Komponente zugegriffen werden! Dadurch ist der Redux-Speicherstatus für die gesamte App zugänglich, während der Komponentenstatus ausschließlich für sich selbst gilt.quelle
Diese reagieren & redux Beispiel basiert off Mohamed Mellouki Vorbild. Aber mit validates verschönern und Fusseln Regeln . Beachten Sie, dass wir unsere Requisiten und Versandmethoden mithilfe von PropTypes definieren, damit unser Compiler uns nicht anschreit. Dieses Beispiel enthielt auch einige Codezeilen, die in Mohammeds Beispiel fehlten. Um connect verwenden zu können, müssen Sie es aus react-redux importieren . Dieses Beispiel auch bindet die Methode filterItems dies verhindert Umfang Probleme in der Komponente . Dieser Quellcode wurde automatisch mit JavaScript Prettify formatiert .
Dieser Beispielcode ist eine gute Vorlage für einen Startplatz für Ihre Komponente.
quelle
React-Redux
connect
wird verwendet, um den Speicher für jede Aktion zu aktualisieren.Es ist sehr einfach und klar in diesem Blog erklärt .
Sie können das Github-Projekt klonen oder den Code aus diesem Blog kopieren und einfügen, um die Redux-Verbindung zu verstehen.
quelle
Hier ist eine Übersicht / Boilerplate zur Beschreibung des Verhaltens von
mapStateToProps
:(Dies ist eine stark vereinfachte Implementierung dessen, was ein Redux-Container tut.)
und als nächstes
quelle
}}
}}
quelle