Redux mit Angular einsetzen (Folge 7)
Die Motivation ist, dass in eine JavaScript Single Page Applikation muss der Programmcode mehrere Zustände speichern:
-
Daten, die von einem Server geladen wurden
-
lokale Daten, die ggfs. auch nicht persistent gespeichert werden sollen
-
UI-State, wie beispielsweise die Aktive Route, der selektierte Tab oder den Zustand der Pagination Controls
Zustandsänderungen sind komplex: Wann muss eine Änderung durchgeführt werden? Warum muss eine Anpassung gemacht werden? Wie sollen die Daten modifiziert werden? Neue bzw. Zusätzliche Anforderungen erschweren saubere Zustandsänderungen – sind aber typisch und häufig. Redux sorgt eine Vorhersagbarkeit für die Zustandsveränderung.
Drei Prinzipen
-
Es gibt nur eine Wahrheit – Single Point Of Truth. Der Gesamte Zustand der Anwendung wird als Objektstruktur in einem Store gespeichert.
-
Auf den Anwendungszustand kann nur lesend zugegriffen werden.
-
Für Zustandsänderungen, die durch eine Aktion ausgelöst werden, werden mit Hilfe von Reduzern geschrieben. Ein Reduzer berechnet ohne andere Abhängigkeiten den neuen Zustand und folgt dem Muster „Alter Zustand + Aktion ergibt den neuen Zustand“.
Der Anwendungszustand wird in einem Store als Objekt gespeichert. Auf diesen können die Elemente lesend zugreifen. Für eine Veränderungen wird eine Aktion ausgelöst, die diese Anpassung mit Hilfe eines Reduzers umsetzt.
Sinnvoll ist der Einsatz von Redux, wenn du eine gewisse Anzahl an Datenänderungen über die Zeit hast, du eine Single Point Of Truth benötigst oder du eine Vorsagbarkeit brauchst, wie sich die Anwendung verhält.
Angular mit Redux verwenden
-
Angular Redux: https://github.com/angular-redux/ng-redux
-
NGXS: http://ngxs.io
