Actions und Reducers

Erfahren Sie, wie Sie den Zustand in NgRx-Anwendungen mithilfe von Actions und Reducers verwalten.

Was sind Actions?

Actions beschreiben eindeutige Ereignisse oder Vorgänge in Ihrer Anwendung, beispielsweise das Laden von Daten oder Benutzerinteraktionen.

Actions erstellen

Erstellen Sie Actions mit createAction():

export const login = createAction('[Login Page] Login');

Action-Payloads

Übergeben Sie Daten zusammen mit Actions über einen Payload:

export const loadUser = createAction('[User] Load', props<{ userId: number }>());

Reducers

Reducers verarbeiten Zustandsübergänge auf Grundlage von Actions. Sie geben neue Zustände zurück, ohne den bestehenden Zustand direkt zu verändern.

Reducers erstellen

Verwenden Sie createReducer, um zu definieren, wie sich der Zustand ändert:

export const userReducer = createReducer(
  initialState,
  on(loadUser, (state, action) => ({ ...state, user: action.userId }))

Zustand aktualisieren

Reducers müssen immer neue Zustandsobjekte zurückgeben. Verändern Sie den bestehenden Zustand niemals direkt.

on(loadUser, (state, action) => ({ ...state, user: action.userId }))

Reducers kombinieren

Kombinieren Sie mehrere Reducers zu einem Root-Reducer, um komplexe Zustände zu verwalten:

StoreModule.forRoot({ users: userReducer, posts: postReducer })

Zusammenfassung

Sie haben gelernt, wie Sie Actions und Reducers erstellen, um den Zustand in Angular mit NgRx effektiv zu verwalten!