Please find the English Version of this article here.
Das Muster hinter Redux hilft bei der Strukturierung komplexer GUIs, indem es den gesamten Anwendungszustand in einem zentralen Zustandsbaum (Single Immutable State Tree). Aufgrund seiner funktionalen Natur wirkt es für Entwickler aus der objektorientierten Welt häufig ein wenig mystisch. Allerdings lässt sich Redux unter Nutzung bekannter Muster eigentlich sehr einfach erklären. Nachfolgend unternehme ich mal einen Versuch dazu. Ergänzend dazu findet man ein vollständiges Beispiel für Redux, das Angular 2 und @ngrx/store nutzt, hier. Eine etwas ausführlichere Beschreibung von Redux und @ngrx/store für Angular 2 findet man hingegen in meinem Artikel bei Heise Online.
- Eine Action entspricht auf dem ersten Blick einem Command. Im Gegensatz zum Command-Muster findet sich jedoch die eigentliche Ausführungslogik in den einzelnen Reducern, welche jeweils für einen Hauptzweig des State Trees eingerichtet wird. Auf diese Weise können mehrere Reducer ein und die selbe Action behandeln.
- Die Vorteile des Command-Patterns bleiben jedoch erhalten: Einfache Implementierung von Undo/Redo via Stacks, Protokollierung, Batch-Commands etc.
- Die Kommunikation zwischen Store und Anwendung erfolgt via CQRS. Commands werden durch Actions beschrieben.
- Zum lesenden Zugriff auf den State Tree kommt i. d. R. das Observer-Muster zum Einsatz. Auf diese Weise kann sich die Anwendung über Änderungen bestimmter Teile des State Trees informieren lassen. Für jeden zu überwachenden Ast richtet die Anwendung einen Observer ein.
- Um das Erkennen von Änderungen nach dem Ausführen der Reducer zu vereinfachen, kommt ein Immutable State Tree zum Einsatz. Somit muss der Store pro Observer nur eine Prüfung durchführen anstatt den gesamten Teilbaum zu untersuchen.
