Découvrons ngrx–Apprenons à lire dans notre State avec Angular–Etape 2

L’étape 1 pour préparer notre State, nos actions est prête, c’est bon ?
Alors, voyons ensemble les étapes pour sélectionner une liste de Wookies, depuis notre State ngrx.

Première étape : Mettre à jour nos actions, pour plus de clarté de code

Lorsqu’on génère les actions depuis le ng generate, il nous ajouter les actions avec une string, comme clef … pas commode ! Surtout quand on veut les réutiliser après dans notre code ….

Du coup, je vous invite à modifier vos actions ngrx, en ajoutant un enum :

export enum WookiesActionsType {
load = '[Wookie] Load Wookies',
loadSuccess = '[Wookie] Load Wookies Success',
loadFailure = '[Wookie] Load Wookies Failure'
}

Ce qui nous permet de mettr eà jour nos actions comme ceci :

export const loadWookies = createAction(
WookiesActionsType.load
);

export const loadWookiesSuccess = createAction(
WookiesActionsType.loadSuccess,
props<{ data: Wookie[] }>()
);

export const loadWookiesFailure = createAction(
WookiesActionsType.loadFailure,
props<{ error: any }>()
);

Seconde étape – Ajout d’un selector ngrx qui ramène les wookies

Dans notre index.ts, nous allons maintenant notre premier selector. Pour rappel, le selector est l’élément clef qui permet de récupérer les données du State.

Préparons la fonction qui va ramener l’état des Wookies depuis l’état parent State :

export const selectWookies = (state: State) => state.wookies;

Puis, nous construisons notre selector :

export const getWookies = createSelector(selectWookies, (state) => state.entities);

Ce selector ngrx permet de renvoyer la liste des Wookies, stockée dans la propriété entities de state.

> En fait, ici, ce qui est à noter c’est que le selector ngrx permet de passer du State global au State des Wookies, qui renvoie la vraie liste que l’on souhaite.

Troisième étape – Préparer notre composant pour s’inscrire au Selector

Le paramétrage se fait en trois étapes :

1. Injection de notre Store

import * as fromStore from ‘../store/reducers’;

Puis dans notre constructeur :

constructor(private store: Store<fromStore.State>) {}

2. Choix du selector pour récupérer les wookies

Création d’une propriété dédiée :

wookies$: Observable<Wookie[]>;

Et définition du selector dans le constructor :

constructor(private store: Store) {
this.wookies$ = this.store.pipe(select(fromStore.getWookies));
}

3. Dispatch pour déclencher le selector

En appeler le dispatch ça va déclencher la récupération, en lançant la bonne action.

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

Pour précision :

• Le Dispatch va déclencher la mise à jour, grâce à un effect (nous verrons ça dans le prochain article)
• Le select va appeler le bon selector pour récupérer les données mises à jour

La suite du programme : effect et ajout d’un wookie

Dans le prochain article, nous irons voir comment déclencher la mise à jour de notre Store et de notre état, depuis un service.

En attendant, vous pouvez voir l’avancée du code via github.