Selectors et effects dans NgRx

Cette leçon présente les selectors et les effects, des éléments essentiels de NgRx pour gérer efficacement l’état dans Angular.

Que sont les selectors ?

Les selectors vous permettent de récupérer efficacement des parties précises de l’état depuis le Store et d’optimiser l’accès aux données.

Créer des selectors

Créez des selectors avec la fonction createSelector() afin de sélectionner efficacement des données dans l’état :

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

Utiliser les selectors dans les composants

Les selectors vous aident à accéder facilement aux données du Store depuis les composants :

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

Que sont les effects ?

Les effects gèrent les effets secondaires dans NgRx, comme les requêtes HTTP, en écoutant les actions et en exécutant des opérations asynchrones.

Installer les effects

Installez NgRx Effects avec :

npm install @ngrx/effects --save

Créer des effects

Les effects gèrent les effets secondaires, comme les requêtes HTTP déclenchées par des actions :

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

Enregistrer les effects

Enregistrez les effects dans votre module pour les activer dans votre application :

EffectsModule.forRoot([UserEffects])

Résumé

Vous comprenez désormais les selectors et les effects dans NgRx, ce qui vous permet de gérer efficacement l’état et les effets secondaires. Excellent travail !