Dieses Tutorial von Dan Abramov legt den Vorteil nahe, Selektoren zu verwenden, die darauf reagieren Der globale Zustand (und nicht ein Teil des Zustands) erlaubt es, Container von der Kenntnis der Staatsstruktur zu entkoppeln.
Wenn das der Fall ist, sollten wir es auch vermeiden, State-Werte direkt auf Requisiten abzubilden und stattdessen Selektoren zu verwenden? Andernfalls müssen unsere Container noch wissen, wo diese Werte im Statusbaum vorhanden sind.
Zur Veranschaulichung anhand eines Beispiels ...
Ordnet einen verschachtelten Statuswert direkt einer Prop:
zu %Vor%VS
Hat keine Kenntnis der Staatsstruktur. Ruft den Wert mithilfe von isModalVisible() selector ab:
Das Problem mit dem letzteren Ansatz besteht jedoch darin, dass wir für jeden Wert im Zustandsbaum einen Selektor schreiben müssen. Dies scheint eine Menge Standardcode zu sein, nur um einen einfachen Wert zu wählen. Ist dies eine bewährte Methode?
Die Antwort auf Ihre Frage lautet: "Es kommt darauf an"
Haben Sie eine kleine App?
Vermeide es vielleicht, Redox zu verwenden und bleibe bei der Reaktion der Komponenten.
Sie brauchen möglicherweise kein Redux
Haben Sie eine kleine App?
Schreiben Sie eine Reihe von Selektoren ist eine Menge Standard, genau wie du gesagt hast. Vermeiden Sie es, sie zu schreiben, und halten Sie einfach das Mapping mit mapStateToProps fest.
Mittlere bis große Apps?
Hier zahlen sich Selektoren und memoisierte Selektoren aus. Sie werden feststellen, ob Modale in vielen Komponenten sichtbar sind. Derzeit befindet sich Modal in Ihrem Status unter state.modal.visible . Aber morgen kann ein Modal Teil eines übergeordneten Modals sein, Sie müssen alle Zuordnungen in allen Ihren Komponenten in state.parentModal.modal.visible ändern. Sie können sehen, wie sich das schlecht machen kann?
Die Vorteile von Selektoren:
mapPropsToState -Funktion. Vorteile von Notiz-Selektoren:
Nachteile
Ich hoffe, es beantwortet Ihre Frage.
Wenn Sie auf Ihren letzten Kommentar antworten, wird empfohlen, Selektoren für alle Werte in der Baumstruktur zu schreiben, selbst für einfache, nicht abgeleitete Werte.
Mehrere Gründe, dies zu tun:
Wie ich bereits in den Kommentaren erwähnt habe, können Sie, sobald Sie Selektoren für alle Werte verwenden, die Baumstruktur ändern, und dann müssen Sie Selektoren nur noch entsprechend ändern. Andernfalls müssen Sie und Ihr Mitentwickler jedes direkte Mapping manuell ändern, auch wenn es sich um nicht abgeleitete Daten handelt.
Entkopplung von Werten zwischen verschiedenen Ebenen im Baum. Wie Sie gesagt haben, wenn Sie einen Selektor auf globaler Ebene haben, hängt dies von einem Slice-Level-Selektor ab, z. price in% product . Wenn Sie ein Produkt an einer anderen Stelle in der Struktur platzieren, ändern Sie einfach den product Selektor, und alle Selektoren price auf globaler Ebene sind immer noch in Ordnung. Ich bin mir nicht sicher, ob Dan in seinem Tutorial erwähnt, überprüfen Sie diese Bibliothek erneut auswählen . Es zeigt die Idee zwischen den Ebenen.
Effizienz beim Abrufen berechneter Daten.
Ofc Wenn Sie ein kleines Projekt ausführen oder einfache nicht abgeleitete Werte aus der Baumstruktur abrufen, können Sie das direkte Mapping verwenden. Bedenken Sie jedoch, dass die Verwendung von Selektoren Ihren Code weitgehend skalierbar macht.
mapStateToProps ist der Selektor. Sie müssen nicht unbedingt eine separate Funktion für isModalVisible schreiben. Die Idee ist mapStateToProps ist die einzige Funktion, die die Struktur des globalen Zustands kennen muss. Sie können diese Funktion aufgliedern, wenn Sie möchten, insbesondere wenn die Unterselektoren komplexer werden, aber wenn Sie nur einen einfachen Wert auswählen, müssen Sie dies nicht tun.
Daher kennt die Containerkomponente die Zustandsstruktur nicht . Es kennt nur die Struktur des von mapStateToProps zurückgegebenen Wertes. Ihre zwei Beispiele sind funktional äquivalent, da sie sich auf die Frage beziehen: "Sollten Container die Zustandsstruktur kennen?". Denn in beiden Fällen lautet die Antwort "Sie tun es nicht."
Mischen Sie den lokalen Status nicht mit dem globalen Status (Redux-Speicher). Sie können beide für eine Komponente haben, aber der lokale Status sollte nicht vom globalen Status abhängen.
Dies hat folgende Gründe:
Tags und Links javascript reactjs redux