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.