une manière idéale de gérer son état avec Angular



































Zaccharie Meddah
Talip CESUR






























C'est quoi NGXS ?
Une librairie de gestion d'état (state) pour Angular






























Pourquoi utiliser NGXS ?
UNE ALTERNATIVE à NGrx ou AKITA































































Présentation du modèle
LE STORE, C'est là qu'on stocke TOUT !































Comment UTILISER NGXS ?
- Créer votre store
ng add @ngxs/schematicsGénérer 2 fichiers : .actions.ts & .state.ts
ng generate @ngxs/schematics:store --name app






























Créer une action (.ACTIONS)
LE STORE, C'est là qu'on stocke TOUT !
export class GetAllTeams {
static type = 'Get all teams';
constructor() {}
}





























implémenter l'action (.STATE)
LE STORE, C'est là qu'on stocke TOUT !
@Action(GetAllTeams)
getAllTeams(ctx: StateContext<FutStateModel>) {
return this.service.getAllTeams().subscribe((data: Team) => {
if (data) {
ctx.patchState({
teams: Object.assign([], data)
});
}
});
}





























DISPATCHER UNE ACTION
LE STORE, C'est là qu'on stocke TOUT !
ctx.dispatch(new GetAllTeams());





























Créer un SELECTOR
LE STORE, C'est là qu'on stocke TOUT !
@Selector()
static getTeam(state: FutStateModel) {
return state.teams;
}





























UTILISER UN SELECTOR
LE STORE, C'est là qu'on stocke TOUT !
@Select(FutState.getTeam)
teams$: Observable<Team>;this.teams$.subscribe((data: Team) => {
if (data) {
this.team = data;
}
});





























ACTION HANDLER
LE STORE, C'est là qu'on stocke TOUT !
this.action.pipe(ofActionSuccessful(UpdateUser)).subscribe(() => {
this.store.dispatch(new Signin(this.userUpdate.login, this.userUpdate.password))
this.profileUpdate = true;
this.initForm();
this.toastr.success(this.translator.instant('UPDATE.SUCCESS'));
})
//ofActionDispatched: triggers when an action has been dispatched
//ofActionSuccessful: triggers when an action has been completed successfully
//ofActionCanceled: triggers when an action has been canceled
//ofActionErrored: triggers when an action has caused an error to be thrown
//ofActionCompleted: triggers when an action has been completed whether it was successful or not 





























Pourquoi utiliser NGXS ?
Réduire les appelles au SERVICE































Pourquoi utiliser NGXS ?
COMMUNICATION INTER-COMPOSANT + SIMPLE































POURQUOI UTILISER NGXS ?
SIMPLE ET EFFICACE



































Zaccharie Meddah
Talip CESUR
that's all folks






























DEMO
Générateur de cartes FUT

Talk : NGXS
By Talip CESUR
Talk : NGXS
- 80