Une gestion détaillée de l’état d’introduction avec NGXS

Online Coding Courses for Kids

Boutique

constructor(private store: Store) { }

Cette référence de magasin peut ensuite être utilisée pour deux opérations principales:

  • Pour envoyer des actions au magasin via le store.dispatch(…) qui déclenchera à son tour les fonctions de modification d’état.
  • Pour récupérer l’état de l’application via Selects.

Etat

Dans NGXS, les classes d’état sont généralement définies comme suit.

Actions

Ce qui suit est une action simple sans aucune métadonnée. Il aura le type , qui décrit essentiellement le but de l’action. La classe State aura une méthode qui écoute cette action et, à son tour, récupérera les utilisateurs via l’API backend et mettra à jour l’état de l’application.

Ce qui suit est une définition d’action avec des métadonnées. Encore une fois, la classe State aura une méthode qui écoute cette action et invoquera l’API backend pour créer un utilisateur. La fonction de classe d’état obtiendra user objet incorporé dans l’action et le transmet à l’appel d’API.

Sélectionner

Sélectionnez les décorateurs: Vous pouvez sélectionner des tranches de données du magasin à l’aide de la @select décorateur. L’extrait de code suivant illustre cette technique.

@Select(AppState.users) user$: Observable;

Fonction de sélection de magasin: Store la classe a également un select fonction que vous pouvez utiliser pour lire des parties de l’état de l’application.

constructor(private store: Store) {   this.users$ = this.store.select(state => state.users);}

Close Menu