Diskussion der Funktionsweise einer Redux-Anwendung

In den vorherigen Lektionen haben wir alle Komponenten implementiert, die für den Betrieb einer Redux-Anwendung notwendig sind. Lassen Sie uns zusammenfassen und kurz die Hauptetappen der Funktionsweise unserer Anwendung mit Produkten durchgehen.

Beim ersten Start ruft unsere Anwendung aus dem Store eine Liste von zwei Produkten mit Hilfe von useSelector ab und zeigt sie auf dem Bildschirm an. Auf dem Bildschirm wird auch ein Formular angezeigt, in das wir die Daten eines neuen Produkts eintragen können. Wenn der Benutzer die Speichern-Schaltfläche drückt, sendet der Button-Handler die Action productAdded, die die Daten des neuen Produkts enthält, die der Benutzer in das Formular eingetragen hat. Die Reducer-Funktion, die wir für den Produkt-Slice geschrieben haben, erhält diese Action und fügt dem Produkt-Array das Objekt mit dem neuen Produkt hinzu. Der Store teilt den Komponenten mit, dass die gespeicherten State-Daten geändert wurden. Unsere Komponente ProductsList liest das geänderte Array, ruft das Rendering auf, wodurch wir das hinzugefügte Produkt in der Produktliste sehen.

Lassen Sie uns nun die Redux DevTools im Browser öffnen und in der Anwendung noch ein Produkt hinzufügen, dann schauen wir uns den Log monitor Tab an. Hier können wir sehen, wie unser State beim Start der Anwendung war und wie dann, nach dem Drücken der Speichern-Schaltfläche, die Action erschien. Wir können ihre Eigenschaft payload und die Änderungen im globalen State sehen.

Im nächsten Kapitel werden wir uns grundlegender mit Daten in unserer Redux-Anwendung befassen.