Funktionsweise einer Redux-Anwendung

Nun, mit dem Wissen über die Terminologie, können wir kurz die grundlegenden Schritte der Funktionsweise einer Redux-Anwendung betrachten, die Sie in Zukunft erstellen werden.

Die Anwendung funktioniert nach dem Prinzip der unidirektionalen Datenflüsse, wie wir bereits erwähnt haben.

Während der Initialisierungsphase (beim ersten Start der Anwendung) wird mit Hilfe des Root-Reducers der Store erstellt. Der Store ruft diesen Reducer nur einmal auf und speichert den von ihm zurückgegebenen Wert als Ausgangszustand. Beim initialen Rendering verwenden die Komponenten der Anwendung den aktuellen State, der im Store gespeichert ist. Außerdem abonnieren sie Store-Updates, um sofort über eine Statusänderung informiert zu werden.

Bei der weiteren Arbeit der Anwendung geschieht Folgendes. Nehmen wir an, der Benutzer hat einen Mausklick auf eine Schaltfläche gemacht. In diesem Fall wird mit Hilfe des Codes eine Action erstellt, die an den Store gesendet wird. Der Store startet erneut den Reducer mit dem in ihm gespeicherten Zustand und der erhaltenen Action. Als Ergebnis wird der geänderte State-Wert als neuer Wert gespeichert. Auch benachrichtigt der Store die Komponenten, die Änderungen abonniert haben, dass Änderungen stattgefunden haben. Die Komponenten prüfen ihrerseits, ob die für sie relevanten Teile des States geändert wurden. Schließlich, falls Änderungen stattgefunden haben, löst die Komponente ein Rendering aus, um die neuen Daten anzuzeigen.