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.
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));
}
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 :
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])
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.