Erste Schritte mit Redux: Lernen Sie an Beispiel

In diesem zweiten Beitrag der Serie werden wir unser Verständnis von Redux stärken und über das aufbauen, was wir bereits wissen. Wir werden zunächst eine realistische Redux -Anwendung erstellen - eine Kontaktliste -, die komplexer ist als ein grundlegender Zähler. Dies wird Ihnen helfen, Ihr Verständnis des Ein- und Mehrfach -Reduktions -Konzepts zu stärken, das ich im vorherigen Tutorial eingeführt habe. Später werden wir über die Bindung Ihres Redux -Status mit einer Reaktionsanwendung und den Best Practices sprechen, die Sie bei der Erstellung eines Projekts von Grund auf neu erstellen sollten.

Es ist jedoch in Ordnung, wenn Sie den ersten Beitrag nicht gelesen haben - Sie sollten immer noch in der Lage sein, mitzumachen, wie Sie die Redux -Grundlagen kennen. Der Code für das Tutorial ist im Repo verfügbar und Sie können dies als Ausgangspunkt verwenden.

Erstellen einer Kontaktliste mit Redux

Wir erstellen eine grundlegende Kontaktliste mit den folgenden Funktionen:

• Zeigen Sie alle Kontakte an
• Suche nach Kontakten
• Abrufen Sie alle Kontakte vom Server ab
• Fügen Sie einen neuen Kontakt hinzu
• Drücken Sie die neuen Kontaktdaten auf den Server

So wird unsere Bewerbung aussehen:

Alles in einer Strecke zu bedecken ist schwer. In diesem Beitrag konzentrieren wir uns also nur auf den Redux -Teil des Hinzufügens eines neuen Kontakts und der Anzeige des neu hinzugefügten Kontakts. Aus Sicht der Redux -Sicht initialisieren wir den Zustand, erstellen das Geschäft, fügen Reduzierer und Aktionen hinzu.

Im nächsten Tutorial lernen wir, wie Sie reagieren und redux anschließen und Redux-Aktionen aus einem React Front-End entsenden. Im letzten Teil verschieben wir unseren Fokus auf API -Anrufe mit Redux. Dies beinhaltet das Abrufen der Kontakte vom Server und das Erstellen einer Serveranforderung beim Hinzufügen neuer Kontakte. Abgesehen davon werden wir auch eine Suchleistenfunktion erstellen, mit der Sie alle vorhandenen Kontakte durchsuchen können.

Erstellen Sie eine Skizze des Staatsbaums

Sie können die React-Redux-Demo-Anwendung aus meinem GitHub-Repository herunterladen. Klonen Sie das Repo und verwenden Sie den V1 -Zweig als Ausgangspunkt. Der V1- Zweig ähnelt der Schablone für Erstellen-React-App. Der einzige Unterschied besteht darin, dass ich ein paar leere Verzeichnisse hinzugefügt habe, um Redux zu organisieren. Hier ist die Verzeichnisstruktur.

 .<br> ├── package.json<br> ├── öffentlich<br> ├── Readme.md<br> ├── Src<br> │ ├── Aktionen<br> │ ├── app.js<br> │ ├── Komponenten<br> │ ├── Behälter<br> │ ├── Index.js<br> │ ├── Reduzierer<br> │ └── Laden<br> └── Garn.Lock<br>

Alternativ können Sie ein neues Projekt von Grund auf neu erstellen. In jedem Fall müssen Sie eine einfache React -Boilerplate und Redux installiert haben, bevor Sie loslegen können.

Es ist eine gute Idee, zuerst eine grobe Skizze des Staatsbaums zu haben. Meiner Meinung nach sparen Sie auf lange Sicht viel Zeit. Hier ist eine grobe Skizze des möglichen Staatsbaums.

 const initialState = {<br> Kontakte: {<br> Kontaktliste: [],<br> Neukontakt: {<br> Name: '',<br> Nachname: '',<br> E -Mail: '',<br> Adresse: '',<br> Telefon: ''<br> },<br> ui: {<br> // Alle UI -verwandten Status hier. EG: Modale ausblenden/zeigen,<br> // Kontrollkästchen usw. umschalten usw.<br> }<br> }<br> }<br><br>

Unser Geschäft muss zwei Eigenschaften haben - kombinierte Leitkörper, mit denen Sie mehrere Reduzierer erstellen und sie dann zu einer einzigen Reduktionsfunktion kombinieren können. Die Funktion der Kombinationsschützer verbessert die Lesbarkeit. Daher werde ich den Reduzierer in zwei Teile teilen-einen Usestate-Hook, um den Zustand auf Komponentenebene in Ihrer Reaktionsanwendung zu verwalten.

Im gleichen Sinne hat Redux einige verschiedene Hooks eingeführt, mit denen wir die üblichen Aufgaben (Versand einer Aktion, den Erhalt des Zustands usw.) in einer funktionalen Komponente beim Schreiben minimaler Code ermöglichen. Diese Haken wurden zuerst in React Redux 7.1 hinzugefügt. Zum Beispiel gibt Redux die folgenden Haken an:

• Verwendungselektor: Holen Sie sich den Staatsbaum oder sogar einen Zweig des Status

Jetzt können wir mit diesen Haken den obigen Code stattdessen auf diese Weise neu aufstellen:

 // andere Importe hier<br><br> // Importieren Sie die Redux -Haken<br> Importieren {useSpatch, useselektor} aus 'React-Redux' '<br><br> // Geben Sie die Versandfunktion vom Hook zurück<br> const Dispatch = usespatch ()<br><br> // rufen Sie GetStore () an, um ein Store -Objekt zu erstellen<br> const store = getStore ();<br><br> // State Tree mit dem Gebrauchsauswahl erhalten<br> const state = useLector (state => state)<br><br> // bekommt den UI -Zweig des Staates<br> const UI = useLector (state => state.ui)<br><br> / * Gibt isContactFormHidden zurück.<br> Versand (ToggleContactForm ());<br> / * Gibt isContactFormHidden zurück.<br> Versand (ToggleContactForm ());<br> / * Aktualisiert den Status der Kontakte.NewContact -Objekt */<br> Versand (HandleInputChange ('E -Mail', 'manjunath@example.com'))<br><br> abbestellen();<br>

Wenn alles richtig funktioniert, sollten Sie dies in der Entwicklerkonsole sehen.

Das war's! In der Entwicklerkonsole sehen Sie, wie der Redux -Store protokolliert wird, damit Sie sehen können, wie sich er nach jeder Aktion ändert.

Zusammenfassung

Wir haben eine Bare-Bones Redux-Anwendung für unsere fantastische Kontaktlistenanwendung erstellt. Wir haben über Reduzierer gelernt, Reduzierer aufgeteilt, um unsere App -Struktur sauberer zu machen, und Aktionen für die Mutation des Geschäfts zu schreiben.

Gegen Ende des Posts haben wir uns mit der store.subscribe() -Methode für den Laden abonniert. Technisch gesehen ist dies nicht der beste Weg, um Dinge zu erledigen, wenn Sie React mit Redux verwenden möchten. Es gibt mehr optimierte Möglichkeiten, das React Front-End mit Redux zu verbinden. Wir werden diese im nächsten Tutorial behandeln.

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