Découvrons ngrx–Apprenons à mettre jour notre State avec les Effects, avec Angular–Etape 3 - Dev to be curious

Ca y est, vous avez tout paramétré pour faire fonctionner votre Etat ngrx avec Angular.
Reste plus qu’à sélectionner les données, du temps des observables, et le tour est joué, non ? Ah non .. oh ?!
Bon aller, on va voir comment y arriver … c’est un peu plus long qu’il n’y paraît.

Première étape – Ajout de notre service Angular des Wookies

Ici, de ce côté-ci, rien ne change à nos habitudes : on crée un service dédié, responsable des échanges avec notre API.

ng g s wookies  ou ng generate service wookies

Ajoutons-y une méthode pour récupérer toute la liste des wookies. Cette méthode va faire une requête (normalement) vers notre api web.
Ici, nous allons simuler l’utilisation de l’httpClient (qui renvoie normalement un observable), en utilisant la fonction of  et nous allons la pipe sur un delay. Cela simulera un temps d’attente avant l’émission dans l’observable.

getAll(): Observable {
return of([
{ id: 1, name: 'Chewie'}
]).pipe(delay(500));
}

Seconde étape – Création d’un effect ngrx pour modifier notre état

Vu que nous avions améliorer nos schematics, nous avons la possibilité de créer un effect grâce à la commande suivante :

ng generate effect Wookies –root -m app.module.ts

Puis ajoutons-y une méthode pour charger nos wookies :

@Effect()
loadWookies$ = createEffect(() => this.actions$.pipe(
ofType(WookiesActions.WookiesActionsType.load),
mergeMap( () => this.wookiesService.getAll()
.pipe(
map(data => ({ type: WookiesActions.WookiesActionsType.loadSuccess, wookies: data }))
))
));

Ce qui nous donne la classe effect suivante :


@Injectable()
export class WookiesEffects {

constructor(private actions$: Actions, private store: Store, private wookiesService: WookiesService) {}

@Effect()
loadWookies$ = createEffect(() => this.actions$.pipe(
ofType(WookiesActions.WookiesActionsType.load),
mergeMap( () => this.wookiesService.getAll()
.pipe(
map(data => ({ type: WookiesActions.WookiesActionsType.loadSuccess, wookies: data }))
))
));

Passons aux explications :

1. Nous récupérons dans le constructor les actions disponibles pour le store, et nous avons également besoin d’injection le store ngrx.
2. Nous créons un effect
   1. Parmi les actions, il va filtrer sur l’action de chargement que nous avions déjà créée auparavant, grâce au ofType
   2. Puis nous appelons notre service pour charger les Wookies.
   3. A l’inscription de l’observable de notre méthode getAll, nous créons une action de type loadSuccess, qui renvoie les wookies récupérés dans le tableau data.

Petite parenthèse

Allons voir dans le app.module, pour voir ce qu’il a fait dans notre app.module :

– Il a ajouté deux lignes :

EffectsModule.forRoot([]),

EffectsModule.forFeature([WookiesEffects])

Troisième étape – Déclencher l’appel depuis notre Component

Pour déclencher la mise à jour de notre observable et donc appeler notre effect, nous allons effecter un dispatch depuis notre store :

this.store.dispatch({type: WookiesActionsType.load});

Si vous avez bien récupéré l’Observable depuis le store :

this.wookies$ = this.store.pipe(select(fromStore.getWookies));

Tout doit fonctionner !

Et voilà, notre première étape est réussie !

La prochaine : ajouter dans notre store un wookie !

Pour suivre le code, vous pouvez le récupérer vie Github.