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 ?

  1. Créer votre store
ng add @ngxs/schematics

Gé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