📢 Je vous présente le livre Angular

  • 1) Il offre un contenu clair et concis, tout en couvrant une multitude de concepts d'Angular.
  • 2) Le livre est structuré en trois niveaux : débutant, intermédiaire et avancé
  • 3) traite des pratiques les plus récentes d'Angular, comme les signaux, les vues différées, la gestion des flux, entre autres
  • 4) De plus, vous y trouverez plusieurs liens vers des exemples de code source pour approfondir vos connaissances en pratique.
Consulter un extrait

Skip to content

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;
    }

    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
        }
    })
    • 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.
    }
  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

ts
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 {
    
}

Chaque mois, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !