Erste Schritte mit Redux: Warum Redux?

Wenn Sie reagieren, werden Sie fast immer hören, wie großartig Redux ist und dass Sie es versuchen sollten. Das React -Ökosystem wächst schnell, und es gibt so viele Bibliotheken, dass Sie sich mit React wie Flow, Redux, Middlewares, MOBX usw. treffen können.

Das Lernen von Reaktionen ist einfach, aber es ist Zeit, sich an das gesamte React -Ökosystem zu gewöhnen. Dieses Tutorial ist eine Einführung in eine der integralen Komponenten des React -Ökosystems - Redux.

Grundlegende Nicht-Redux-Terminologie

Hier sind einige der häufig verwendeten Terminologien, mit denen Sie möglicherweise nicht vertraut sind, aber sie sind nicht spezifisch für Redux an sich. Sie können diesen Abschnitt durchfliegen und hierher zurückkehren, wenn/wenn etwas keinen Sinn ergibt.

Reine Funktion

Eine reine Funktion ist nur eine normale Funktion mit zwei zusätzlichen Einschränkungen, die sie befriedigen muss:

1. Bei einer Reihe von Eingängen sollte die Funktion immer die gleiche Ausgabe zurückgeben.
2. Es erzeugt keine Nebenwirkungen.

Zum Beispiel finden Sie hier eine reine Funktion, die die Summe von zwei Zahlen zurückgibt.

 / * Reine Funktion add funktion */<br> const add = (x, y) => {<br> Rückkehr xy;<br> }<br><br> console.log (add (2,3)) // 5<br><br>

Reine Funktionen geben eine vorhersehbare Ausgabe und sind deterministisch. Eine Funktion wird unrein, wenn sie etwas anderes ausführt, als ihren Rückgabewert zu berechnen.

Beispielsweise verwendet die folgende Funktion hinzufügen einen globalen Zustand, um ihre Ausgabe zu berechnen. Darüber hinaus protokolliert die Funktion den Wert für die Konsole, die als Nebeneffekt angesehen wird.

 const y = 10;<br><br> const impuradd = (x) => {<br> console.log (`Die Eingaben sind $ {x} und $ {y}`);<br> Rückkehr xy;<br> }<br>

Beobachtbare Nebenwirkungen

"Beobachtbare Nebenwirkungen" ist ein ausgefallener Begriff für Interaktionen, die von einer Funktion mit der Außenwelt gemacht werden. Wenn eine Funktion versucht, einen Wert in eine Variable zu schreiben, die außerhalb der Funktion existiert oder versucht, eine externe Methode aufzurufen, können Sie diese Dinge sicher aufrufen.

Wenn eine reine Funktion jedoch eine andere reine Funktion aufruft, kann die Funktion als rein behandelt werden. Hier sind einige der gemeinsamen Nebenwirkungen:

• API -Anrufe machen
• Anmelden bei Konsolen- oder Druckendaten
• Daten mutieren
• DOM Manipulation
• die aktuelle Zeit abrufen

Container- und Präsentationskomponenten

Die Aufteilung der Komponentenarchitektur in zwei Teile ist nützlich, während sie mit React -Anwendungen arbeiten. Sie können sie im Großen und Ganzen in zwei Kategorien eintreffen: Containerkomponenten und Präsentationskomponenten. Sie sind im Volksmund auch als intelligente und dumme Komponenten bekannt.

Die Containerkomponente befasst sich mit der Funktionsweise der Dinge, während die Präsentationskomponenten mit dem Aussehen der Dinge befasst sind. Um die Konzepte besser zu verstehen, habe ich das in einem anderen Tutorial behandelt: Container vs. Präsentationskomponenten in React.

Veränderlich und unveränderliche Objekte

Ein veränderliches Objekt kann wie folgt definiert werden:

Ein veränderliches Objekt ist ein Objekt, dessen Zustand nach dem Erstellen geändert werden kann.

Unveränderlichkeit ist genau das Gegenteil - ein unveränderliches Objekt ist ein Objekt, dessen Zustand nach seiner Erstellung nicht geändert werden kann . In JavaScript sind Zeichenfolgen und Zahlen unveränderlich, Objekte und Arrays nicht. Das Beispiel zeigt den Unterschied besser.

 / *Saiten und Zahlen sind unveränderlich */<br><br> Sei a = 10;<br><br> sei b = a;<br><br> B = 3;<br><br> console.log (`a = $ {a} und b = $ {b}`); // a = 10 und b = 3<br><br> / * Aber Objekte und Arrays sind nicht */<br><br> / *Beginnen wir mit Objekten */<br><br> lass user = {<br> Name: "Bob",<br> Alter: 22,<br> Job: "Keine"<br> }<br><br> active_user = user;<br><br> active_user.name = "tim";<br><br> // beide Objekte haben den gleichen Wert<br> console.log (active_user); // {"Name": "Tim", "Alter": 22, "Job": "Keine"}<br><br> console.log (Benutzer); // {"Name": "Tim", "Alter": 22, "Job": "Keine"}<br><br> / * Jetzt für Arrays *///<br><br> lass UserSID = [1,2,3,4,5]<br><br> lass UserSIDDUP = usersid;<br><br> userIDDUp.pop ();<br><br> console.log (userIdDUp); // [1,2,3,4]<br> console.log (usersid); // [1,2,3,4]<br>

Um Objekte unveränderlich zu machen, verwenden Sie den Store.getState () -, um auf den aktuellen Zustandsbaum Ihrer Anwendung zuzugreifen.

Store.subscribe (Hörer) - Um sich jede Veränderung des Staates anzuhören. Es wird jedes Mal aufgerufen, wenn eine Aktion versandt wird.

Lassen Sie uns ein Geschäft erstellen. Redux verfügt über eine configureStore , um einen neuen Speicher zu erstellen. Sie müssen es als Reduzierer übergeben, obwohl wir nicht wissen, was das ist. Ich werde also nur eine Funktion namens Reduder erstellen. Sie können optional ein zweites Argument angeben, das den Anfangszustand des Geschäfts festlegt.

src/index.js

 importieren {configurEsTore} aus "Redux";<br> // Dies ist der Reduzierer<br> const reduzierer = () => {<br> / *Etwas geht hierher *////<br> }<br><br> // InitialState ist optional.<br> // Für diese Demo benutze ich einen Zähler, aber normalerweise ist der Zustand ein Objekt<br> const initialState = 0<br> const store = configureStore (Reduzierer, InitialState);<br>

Jetzt hören wir uns Änderungen im Geschäft an und dann console.log() den aktuellen Zustand des Geschäfts.

 store.subscribe (() => {<br> console.log ("State hat geändert" store.getState ());<br> })<br>

Wie aktualisieren wir den Laden? Redux hat so genannte Aktionen, die dies ermöglichen.

Aktions-/Aktionsschöpfer

Aktionen sind auch einfache JavaScript -Objekte, die Informationen von Ihrer Bewerbung an den Store senden. Wenn Sie einen sehr einfachen Zähler mit einer Inkrement -Taste haben, führt das Drücken von einer Aktion, die so aussieht, wie folgt:

 {<br> Typ: "Inkrement",<br> Nutzlast: 1<br> }<br>

Sie sind die einzige Informationsquelle für den Laden. Der Zustand des Geschäfts ändert sich nur als Reaktion auf eine Aktion. Jede Aktion sollte eine Typ -Eigenschaft haben, die beschreibt, was das Aktionsobjekt beabsichtigt. Abgesehen davon liegt die Struktur der Aktion vollständig bei Ihnen. Halten Sie Ihre Aktion jedoch gering, da eine Aktion die Mindestmenge an Informationen darstellt, die zur Transformation des Anwendungszustands erforderlich sind.

Zum Beispiel wird im obigen Beispiel die Typ -Eigenschaft auf "Inkrement" gesetzt, und eine zusätzliche Nutzlasteigenschaft ist enthalten. Sie könnten die Nutzlast -Eigenschaft in etwas Sinnvolleres umbenennen oder in unserem Fall vollständig weglassen. Sie können eine Aktion wie diesen in den Laden schicken.

 store.dispatch ({type: "Increment", Payload: 1});<br>

Während des Codierens von Redux werden normalerweise Aktionen nicht direkt verwendet. Stattdessen werden Sie Funktionen aufrufen, die Aktionen zurückgeben, und diese Funktionen werden im Volksmund als Action -Ersteller bezeichnet. Hier ist der Aktionsersteller für die zuvor besprochene Inkrementaktion.

 const IncrementCount = (count) => {<br> zurückkehren {<br> Typ: "Inkrement",<br> Nutzlast: Graf<br> }<br> }<br>

Um den Status des Zählers zu aktualisieren, müssen Sie die incrementCount -Aktion wie folgt entsenden:

 store.dispatch (IncrementCount (1));<br> store.dispatch (IncrementCount (1));<br> store.dispatch (IncrementCount (1));<br>

Wenn Sie zur Browserkonsole gehen, werden Sie feststellen, dass es teilweise funktioniert. Wir werden undefiniert, weil wir den Reduzierer noch nicht definiert haben.

Jetzt haben wir also Aktionen und den Laden behandelt. Wir brauchen jedoch einen Mechanismus, um die von der Aktion bereitgestellten Informationen umzuwandeln und den Zustand des Geschäfts zu verändern. Reduzierer dienen diesem Zweck.

Reduzierer

Eine Aktion beschreibt das Problem, und der Reduzierer ist für die Lösung des Problems verantwortlich. Im früheren Beispiel gab die incrementCount -Methode eine Aktion zurück, die Informationen über die Art der Änderung lieferte, die wir dem Staat vornehmen wollten. Der Reduzierer verwendet diese Informationen, um den Status tatsächlich zu aktualisieren. Es gibt einen großen Punkt in den Dokumenten, an die Sie sich bei der Verwendung von Redux immer erinnern sollten:

Bei den gleichen Argumenten sollte ein Reduzierer den nächsten Zustand berechnen und zurückgeben. Keine Überraschungen. Keine Nebenwirkungen. Keine API -Anrufe. Keine Mutationen. Nur eine Berechnung.

Dies bedeutet, dass ein Reduzierer eine reine Funktion sein sollte. Bei einer Reihe von Eingängen sollte es immer die gleiche Ausgabe zurückgeben. Darüber hinaus sollte es nichts mehr tun. Außerdem ist ein Reduzierer nicht der Ort für Nebenwirkungen, wie z.

Füllen wir den Reduzierer für unseren Zähler aus.

 // Dies ist der Reduzierer<br><br> const reduzierer = (state = initialState, action) => {<br> Switch (action.type) {<br> Fall "Inkrement":<br> Return States Action.Payload<br> Standard:<br> Rückkehrstatus<br> }<br> }<br>

Der Reduzierer akzeptiert zwei Argumente - fest und handelt - und gibt einen neuen Staat zurück.

 (Vorheriger State, Aktion) => NewState<br>

Der Staat akzeptiert einen Standardwert, den initialState , der nur verwendet wird, wenn der Wert des Staates undefiniert ist. Andernfalls wird der tatsächliche Wert des Staates beibehalten. Wir verwenden die Switch -Anweisung, um die richtige Aktion auszuwählen. Aktualisieren Sie den Browser und alles funktioniert wie erwartet.

Fügen wir einen Fall für DECREMENT hinzu, ohne die der Zähler unvollständig ist.

 // Dies ist der Reduzierer<br><br> const reduzierer = (state = initialState, action) => {<br> Switch (action.type) {<br> Fall "Inkrement":<br> Return States Action.Payload<br> Fall "Dekrement":<br> Rückgabestatus - action.payload<br> Standard:<br> Rückkehrstatus<br> }<br> }<br>

Hier ist der Action -Schöpfer.

 const decrementCount = (count) => {<br> zurückkehren {<br> Typ: "Dekrement",<br> Nutzlast: Graf<br> }<br> }<br>

Schließlich schicken Sie es in den Laden.

 store.dispatch (IncrementCount (4)); // 4<br> store.dispatch (delementCount (2)); // 2<br>

Das war's!

Zusammenfassung

Dieses Tutorial sollte ein Ausgangspunkt für die Verwaltung von Status mit Redux sein. Wir haben alles, was wichtig ist, um die grundlegenden Redux -Konzepte wie Geschäft, Aktionen und Reduzierer zu verstehen. Gegen Ende des Tutorials haben wir auch einen funktionierenden Redux -Demo -Zähler erstellt. Obwohl es nicht viel war, haben wir gelernt, wie alle Teile des Puzzles zusammenpassen.

In den letzten Jahren hat sich React immer beliebter geworden. Tatsächlich haben wir eine Reihe von Artikeln auf dem Markt, die zum Kauf, Überprüfungen, Implementierungen usw. verfügbar sind. Wenn Sie nach zusätzlichen Ressourcen um React suchen, zögern Sie nicht, sie zu überprüfen.

Im nächsten Tutorial werden wir die Dinge nutzen, die wir hier gelernt haben, um eine React -Anwendung mit Redux zu erstellen. Bleiben Sie bis dahin dran. Teilen Sie Ihre Gedanken in den Kommentaren.

Das obige ist der detaillierte Inhalt vonErste Schritte mit Redux: Warum Redux?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!