Selectory i efekty w NgRx

W tej lekcji omówiono selectory i efekty — kluczowe elementy NgRx, które umożliwiają wydajne zarządzanie stanem w Angularze.

Czym są selectory?

Selectory umożliwiają wydajne pobieranie określonych fragmentów stanu z Store, optymalizując dostęp do danych.

Tworzenie selectorów

Twórz selectory za pomocą funkcji createSelector(), aby wydajnie wybierać dane ze stanu:

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

Używanie selectorów w komponentach

Selectory ułatwiają dostęp do danych Store wewnątrz komponentów:

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

Czym są efekty?

Efekty obsługują skutki uboczne w NgRx, takie jak żądania HTTP, nasłuchując akcji i wykonując operacje asynchroniczne.

Instalowanie efektów

Zainstaluj NgRx Effects za pomocą:

npm install @ngrx/effects --save

Tworzenie efektów

Efekty obsługują skutki uboczne, takie jak żądania HTTP wywoływane przez akcje:

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

Rejestrowanie efektów

Zarejestruj efekty w module, aby włączyć je w aplikacji:

EffectsModule.forRoot([UserEffects])

Podsumowanie

Rozumieją już Państwo działanie selectorów i efektów w NgRx, dzięki czemu mogą skutecznie obsługiwać stan i skutki uboczne. Doskonała praca!