Tipps und Tricks mit AngularJS, Teil 8: GUIs mit Angular 2 und @ngrx/store (II)

Inhaltsverzeichnis

Nachdem der erste Teil dieses Artikels den Redux-Ansatz motiviert und die Bibliothek @ngrx/store vorgestellt hat, veranschaulicht die vorliegende Fortsetzung dessen Nutzung anhand eines Fallbeispiels zum Verwalten von Flugbuchungen (siehe Abbildung). Pro Buchung herrscht einer von drei Zuständen vor: Gebucht, Checked in oder Boarded. Das Beispiel präsentiert den Zustand pro Buchung sowie im Rahmen einer Zusammenfassung am Beginn der Seite. Sie zeigt, wie viele Buchungen pro Zustand vorliegen. Der gesamte Quellcode steht auf GitHub zur Verfügung.

Single Immutable State Tree

Das Redux-Muster sieht eine zentrale Datenstruktur zum Verwalten des Gesamtzustands der Anwendung vor. Diesen sogenannten Single Immutable State Tree beschreibt das Fallbeispiel über das Interface AppState:

export interface AppState {
    boarding: BoardingState;
    
    // ... hier könnten weitere Eigenschaften ...
    // ... für weitere Teile der Anwendung ...
    // ... definiert sein ... 
}    

Für den betrachteten Anwendungsfall gibt das Interface die Eigenschaft boarding vor, die einen Ast des Baums repräsentiert. Für weitere Anwendungsfälle könnten Entwickler zusätzliche Eigenschaften einführen. Das Interface BoardingState beschreibt den Aufbau des betrachteten Asts. Es definiert, dass neben den abgerufenen Buchungen auch eine Statistik zu verwalten ist:

export interface BoardingState {
    buchungen: Array<any>,
    statistik: BoardingStatistic;
}

export interface BoardingStatistic {
    countBoarded: number;
    countCheckedIn: number;
    countBooked: number;
}

Administration über Reducer

Zum Verwalten des Zustands enthält die Demoanwendung einen Reducer. Er befindet sich im TypeScript-Modul boarding.reducer, das sich unter anderem auf Typen der Bibliothek @ngrx/store stützt. Wie im Angular-2-Umfeld üblich, ist sie auf npm zu finden:

npm install @ngrx/store --save
 

Das Modul definiert zunächst Konstanten zum Identifizieren einzelner Aktionen. Anschließend erzeugt es den initialen Zustand für den verwalteten Anwendungsbereich in Form eines Object, das sich am Interface BoardingState orientiert:

// boarding.reducer.ts (Teil 1)

import {Reducer, Action} from '@ngrx/store';
import {BoardingState} from './boarding.state';

export const BUCHUNGEN_LOADED = 'BUCHUNGEN_LOADED';
export const BUCHUNG_STATE_CHANGED = 'BUCHUNG_STATE_CHANGED';

export var initialBoardingState: BoardingState = {
    undoStack: [],
    redoStack: [],
    buchungen: [],
    message: "",
    statistik: {
        countBoarded: 0,
        countBooked: 0,
        countCheckedIn: 0
    }
};

Danach richtet das Modul boarding.reducer den Reducer ein. Er ist lediglich eine Funktion, deren Signatur das Interface Reducer<T> vorgibt. Der Typparameter T ist dabei durch den Typ zu ersetzen, der den betroffenen Teilbaum des Immutable State Trees repräsentiert. Im Folgenden kommt daher Reducer<BoardingState> zum Einsatz:

// boarding.reducer.ts (Teil 2)

export const boardingReducer: Reducer<BoardingState> = 
  (state: BoardingState, action:Action) => {
    switch (action.type) {
        case BUCHUNGEN_LOADED: return buchungenLoaded(state,
         action.payload);
        case BUCHUNG_STATE_CHANGED: return buchungStateChanged(state,
         action.payload);
        default: return state;
    }
}