Selectors ed Effects in NgRx

Questa lezione tratta selectors ed effects, componenti fondamentali di NgRx per una gestione efficiente dello stato in Angular.

Che cosa sono i Selectors?

I selectors consentono di recuperare in modo efficiente porzioni specifiche dello stato dallo store, ottimizzando l'accesso ai dati.

Creazione dei Selectors

Creare i selectors utilizzando la funzione createSelector() per selezionare in modo efficiente i dati dallo stato:

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

Utilizzo dei Selectors nei componenti

I selectors facilitano l'accesso ai dati dello store all'interno dei componenti:

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

Che cosa sono gli Effects?

Gli effects gestiscono gli effetti collaterali in NgRx, come le richieste HTTP, ascoltando le actions ed eseguendo operazioni asincrone.

Installazione degli Effects

Installare NgRx Effects utilizzando:

npm install @ngrx/effects --save

Creazione degli Effects

Gli effects gestiscono effetti collaterali come le richieste HTTP attivate dalle actions:

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

Registrazione degli Effects

Registrare gli effects nel modulo per abilitarli nell'applicazione:

EffectsModule.forRoot([UserEffects])

Riepilogo

Ora conosce selectors ed effects in NgRx e può gestire stato ed effetti collaterali in modo efficiente. Ottimo lavoro!