1. Grundlagen

Zustandskategorien in Webapplikationen

  • Zustand des Servers / Backends
  • Persistent state : Subset des server states, gespeichert auf dem Client
  • Zustand der URL / des Routers:
  • Client state
  • Transient client state
  • Local UI state

2. NgRx: Ein Überblick

Bausteine

  • Store: Repräsentation des relevanten states zum Zeitpunkt x
  • Action: Beschreibt eine Teiländerung am state
  • Reducer: Vollzieht Änderung am state
  • Selector: Extrahiert Stück vom state

Vorteile von NgRx

  • Unveränderbarkeit des state reduziert Komplexität
  • Performanz
  • Solides debugging framework mit time-travel Kapazitäten
  • Zentrales logging möglich

Nachteile von NgRx

  • "Boilerplate code"
  • Komplexere Architektur v.a. bei kleineren Projekten
  • Längere Einarbeitungszeit

3. Setup

Benötigte Pakete


                    yarn add \
                    @ngrx/{store,effects,router-store,store-devtools,entity,schematics}
                

Bis auf @ngrx/store sind alle Pakete optional

Schemata

Initiales Setup

  • Schemata zu angular-cli hinzufügen
    ng set defaults.schematics.collection=@ngrx/schematics
  • Initiales state-Management
                            ng generate store State --root --module app.module.ts --collection @ngrx/schematics

Struktur root-Modul

  • app.module.ts: Ort, wo root reducers registriert werden
  • reducers/index.ts: root reducers

Struktur feature-Modul

  • actions: Actions-Verzeichnis
  • components: Verzeichnis für presentational components
  • containers: Verzeichnis für container components
  • effects: Effects-Verzeichnis
  • guards: Guards-Verzeichnis
  • models: Models-Verzeichnis
  • reducers: Reducers-Verzeichnis
  • services: Verzeichnis für services (mit Seiteneffekten)

Presentational vs. Container Components

Presentational Components
  • Fokus auf Layout
  • Unten im Komponentenbaum
  • Daten via @Input()
  • Keine Zustandsmodifikationen
  • Stellen i.d.R. anderen Komponeten keine Daten zur Verfügung
Container Components
  • Fokus auf Funktion
  • Oben im Komponentenbaum
  • Daten via Store.select()
  • Zustandsmodifikationen
  • Stellen anderen Komponenten Daten zur Verfügung

4. Store

Aufgaben des Store

  • Wrapper für den state der Applikation
  • dispatch()-Funktion zum Auslösen einer action
  • select()-Funktion zur Extraktion eines Teils des state

5. Effects

6. Weitere Extensions

7. Testing