State Management mit @ngrx/store

In komplexen Angular-Anwendungen kann State Verwaltung zu einem Problem werden. Für die Lösung des Problems bietet sich dafür das Flux-Pattern an. Redux ist die bekannteste und beliebste Implementierung von diesem Pattern. @ngrx - ist die Standard-Implementierung von Redux in Angular. Damit kann der Zustand der kompletten Anwendung wartbar gemacht und nach einer klaren Struktur aufgebaut werden.

Transcript

1. State Management mit @ngrx/store Gregor Doroschenko @g_doroschenko ANGULAR MEETUP DRESDEN #3
2. Inhaltsverzeichnis • Einleitung: State Management • Erklärung von Redux • Vorstellung @ngrx/store • Demo • Container and Presentational Components • DevTools
3. Einleitung: State Management
4. Einleitung: State Management • Ausgangspunkt: Angular-Anwendung mit Komponenten und Services • geladene Daten, temporäre Nachrichten, Animationen usw. → Application State • Application State verteilt über verschiedene Komponenten und Services • die Anwendung wird komplexer → Schwierigkeiten ◦ den Zustand an der richtigen Stelle bereitzustellen ◦ unerwünschte Kopplungen zwischen Komponenten und Services ◦ Hilfsservices für fehlende Kommunikationswege ◦ Wartbarkeit und Übersicht verloren • “File → New Project”-Gefühl kommt
5. Einleitung: State Management • Application State zentral verwalten, eine Art Datenbank • Bestandteile der Anwendung → gleiche Statusinformationen ◦ ein Single Source of Truth • bessere Wartbarkeit und Übersicht durch Wegfall von: ◦ unerwünschten Kopplungen zwischen Komponenten und Services ◦ Hilfsservices für fehlende Kommunikationswege • Lösungsansatz: Architekturmuster Redux
6. Redux
7. Redux: Was ist das? • zentrale Verwaltung des Zustandes einer JavaScript-Anwendung • nur ein Store → alle getätigten Aktionen der Anwendung • aktueller Zustand der App → die Summe aller Aktionen • Aktionen in der UI z.B. durch Eingabe, einen Klick oder eine Geste • Dispatcher leitet Aktion in den Store • Verarbeitung der Aktion im Store → neuer Application State • Übermittlung des neuen Application States an die UI • Daten geändert? → Re-rendering der UI (Change Detection)
8. Redux: Was ist das? Unidirektionaler Datenfluss mit Redux Bildquelle: https://bit.ly/2INvKTu
9. Redux: Reducer • sog. Pure Functions • unverzichtbarer Bestandteil von Redux • alle Elemente einer Liste → ein einziger Ergebnis • keine Seiteneffekte (Zugriff auf externe Inhalte z.B. API-Calls) • Verwalten den Anwendungszustand • Abarbeiten einer Serie von Aktionen (Actions) • Die Summe aller Aktionen → der aktuelle Zustand • neue Aktion → neuer Zustand, d.h. Zustand wird nie verändert
10. Redux: Aufbau von Reducer
11. Redux: Actions und Action Creators • in der Regel einfache Objekte (JSON-Objekte) • beliebig oft abspielbar und serialisierbar • Für das Erstellen und Auslösen der Action → Action Creator • Action Creator: ◦ eine Funktion mit optionalen Parametern ◦ Erstellen von Action gemäß dem Interface ◦ Auslösen der erstellten Action ◦ Parameter: ▪ type - String, Action-Bezeichnung ▪ payload? - Daten, die der Reducer verarbeiten soll ▪ error? - Action durch ein Fehler hervorgerufen? ▪ metadata? - zusätzliche Informationen
12. Redux: Bsp. Action Creator
13. Redux in Angular • @angular-redux/store - Angular bindings für Redux • @ngrx/store - Standard-Implementierung von Redux
14. @ngrx/store
15. Vorstellung @ngrx/store • @ngrx/store • npm install @ngrx/store • Import StoreModule
16. Demo github: ngrx-simple-store
17. Container and Presentational Components
18. Container and Presentational Components • Klassifikation von Komponenten Container Components (Smart Components) Presentational Components (Dumb Components) Verwendung Einstiegskomponente Kind-Komponente Abhängigkeit zu Redux Ja Nein Datenzugriff Abonnieren von Eigenschaften des Redux Stores Lesen von Daten via @Input()-Decorator Datenänderung Auslösen von Redux Actions Ausführen von Callbacks via @Output()-Decorator Fokus Kommunikation mit Redux Store Anzeige von Daten
19. DevTools
20. DevTools • Redux DevTools • Extension für Firefox • Extension für Chrome • @ngrx/store-devtools • npm install @ngrx/store-devtools --save • Import StoreDevtoolsModule
21. Vielen Dank
22. Quellen • Buch: Angular - Grundlagen von Woiwode, Malcher, Koppenhagen, Hoppe • https://angularjs.de/artikel/angular-redux-einfuehrung/ • https://blog.angular-university.io/angular-2-redux-ngrx-rxjs/