Grundlagen des NgRx Store

In dieser Lektion lernen Sie NgRx kennen, eine leistungsstarke Lösung zur Zustandsverwaltung für Angular-Anwendungen.

Was ist NgRx?

NgRx ist von Redux inspiriert und unterstützt Sie dabei, den Zustand in Angular-Anwendungen zentral zu verwalten. Dadurch wird die Datenverarbeitung über mehrere Komponenten hinweg vereinfacht.

Warum NgRx verwenden?

• Zentralisierte Zustandsverwaltung
• Klarer und vorhersehbarer Datenfluss
• Einfacheres Debugging und Testen

Grundlegende Konzepte

NgRx umfasst wichtige Konzepte:

• Store: Enthält den Anwendungszustand
• Actions: Beschreiben Ereignisse
• Reducers: Verarbeiten Zustandsübergänge
• Selectors: Rufen Zustandsdaten ab

NgRx Store installieren

Installieren Sie NgRx mit npm:

npm install @ngrx/store --save

Einen Store erstellen

Definieren Sie den Store in Ihrem Anwendungsmodul:

StoreModule.forRoot({ appState: appReducer })

Actions erstellen

Actions definieren Ereignisse in Ihrer Anwendung:

export const loadData = createAction('[App] Load Data');

Reducers

Reducers verarbeiten Zustandsänderungen, indem sie auf Actions reagieren und einen neuen Zustand erzeugen:

export const appReducer = createReducer(
  initialState,
  on(loadData, state => ({ ...state, loading: true }))
);

Zusammenfassung

Sie haben die Grundlagen der Verwendung des NgRx Store zur effektiven Verwaltung des Anwendungszustands gelernt. Gut gemacht!