Créer un état dans NgXS ​

L'un des concepts fondamentaux lorsqu'on travaille avec NgXS est l'état. Nous allons créer un état pour gérer une liste d'utilisateurs. Créez le fichier src/app/store/users/users.state.ts

1. Définir le modèle de l'état:

   Avant de définir l'état lui-même, nous devons déterminer la structure ou le modèle de cet état. Dans notre cas, nous avons décidé d'avoir deux propriétés: une liste d'utilisateurs (usersList) et un indicateur de chargement (loading).

   typescript

   export interface UserStateModel {
       usersList: User[];
       loading: boolean;
   }

   export interface UserStateModel {
       usersList: User[];
       loading: boolean;
   }

   Ici, User est probablement un objet qui contient des informations sur l'utilisateur, comme un nom, un identifiant, etc. (c'est défini ailleurs dans notre application).

2. Définir l'état:

   Pour définir l'état, nous utiliserons le décorateur @State de NgXS. Ce décorateur nous permet de donner un nom à notre état, et de définir ses valeurs par défaut.

   typescript

   @State({
       name: 'users',
       defaults: {
           usersList: [],
           loading: false
       }
   })

   @State({
       name: 'users',
       defaults: {
           usersList: [],
           loading: false
       }
   })

   • name: C'est le nom de notre état. Nous l'utiliserons pour accéder et manipuler cet état plus tard.
   • defaults: Ici, nous définissons les valeurs initiales de notre état. Comme nous commençons sans utilisateurs et que nous ne chargeons pas encore de données, la liste d'utilisateurs est vide et loading est false.

3. Rendre l'état injectable:

   NgXS utilise le système d'injection de dépendances d'Angular pour fonctionner. Cela signifie que nous devons rendre notre état injectable pour qu'il puisse être utilisé ailleurs dans notre application. Pour cela, nous ajoutons le décorateur @Injectable() à notre classe d'état.

   typescript

   @Injectable()
   export class UserState {
       // Plus tard, nous ajouterons ici des actions, des sélecteurs, etc.
   }

   @Injectable()
   export class UserState {
       // Plus tard, nous ajouterons ici des actions, des sélecteurs, etc.
   }

4. (Prochaines étapes):

   Maintenant que nous avons défini notre état, les prochaines étapes consisteraient généralement à ajouter des actions pour modifier cet état (par exemple, pour ajouter un utilisateur à la liste), des sélecteurs pour lire l'état et éventuellement des effets pour gérer des opérations asynchrones, comme charger les utilisateurs depuis une API.

Code en entier ​

import { Injectable } from "@angular/core";
import { State } from "@ngxs/store";
import { User } from "src/app/core/interfaces/user";

export interface UserStateModel {
    usersList: User[]
    loading: boolean
}

@State({
    name: 'users',
    defaults: {
        usersList: [],
    }
})
@Injectable()
export class UserState {
    
}

import { Injectable } from "@angular/core";
import { State } from "@ngxs/store";
import { User } from "src/app/core/interfaces/user";

export interface UserStateModel {
    usersList: User[]
    loading: boolean
}

@State({
    name: 'users',
    defaults: {
        usersList: [],
    }
})
@Injectable()
export class UserState {
    
}