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

• @ngrx/schematics: Blueprints zur Generierung von NgRx-Bausteinen mit angular-cli
• Blueprints für:
  • Actions
  • Containers
  • Effects
  • Entities
  • Features
  • Reducers
  • Stores

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

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