Selectors und Effects in NgRx

Diese Lektion behandelt Selectors und Effects – wichtige Bestandteile von NgRx für eine effiziente Zustandsverwaltung in Angular.

Was sind Selectors?

Selectors ermöglichen es Ihnen, bestimmte Teile des Zustands effizient aus dem Store abzurufen und so den Datenzugriff zu optimieren.

Selectors erstellen

Erstellen Sie Selectors mit der Funktion createSelector(), um Daten effizient aus dem Zustand auszuwählen:

export const selectUser = createSelector(
  (state: AppState) => state.user,
  (user) => user.details
);

Selectors in Komponenten verwenden

Selectors erleichtern Ihnen den Zugriff auf Store-Daten innerhalb von Komponenten:

this.store.select(selectUser).subscribe(user => console.log(user));

Was sind Effects?

Effects verarbeiten Seiteneffekte in NgRx, beispielsweise HTTP-Anfragen, indem sie auf Actions reagieren und asynchrone Vorgänge ausführen.

Effects installieren

Installieren Sie NgRx Effects mit:

npm install @ngrx/effects --save

Effects erstellen

Effects verarbeiten Seiteneffekte wie durch Actions ausgelöste HTTP-Anfragen:

loadUser$ = createEffect(() =>
  this.actions$.pipe(
    ofType(loadUser),
    mergeMap(() => this.userService.getUser().pipe(
      map(user => loadUserSuccess({ user }))
    ))
  )
);

Effects registrieren

Registrieren Sie Effects in Ihrem Modul, um sie in Ihrer Anwendung zu aktivieren:

EffectsModule.forRoot([UserEffects])

Zusammenfassung

Sie verstehen nun Selectors und Effects in NgRx und können damit Zustand und Seiteneffekte effizient verarbeiten. Hervorragende Arbeit!