Un store sur NgRx, c'est quoi ?

Un store est un concept central dans NgRx et d'autres bibliothèques de gestion d'état réactif. Il s'agit d'une sorte de conteneur qui stocke l'état de l'application de manière centralisée. Le store est accessible à partir de n'importe quel endroit de l'application, ce qui permet à tous les composants d'avoir accès aux mêmes données et d'être mis à jour en conséquence lorsque l'état de l'application change.

Un store NgRx est généralement implémenté en utilisant un Observable RxJS, qui permet de souscrire à l'état de l'application et de recevoir des notifications lorsque l'état change. Les composants de l'application peuvent s'abonner à l'Observable du store pour être notifiés des changements d'état et mettre à jour leur propre état en conséquence.

Le store NgRx permet également aux développeurs de mettre à jour l'état de l'application de manière contrôlée en utilisant des actions et des reducers. Les actions sont des objets qui représentent des intentions de modification de l'état, tandis que les reducers sont des fonctions qui prennent en entrée l'état actuel et une action, et renvoient un nouvel état mis à jour en fonction de l'action. En utilisant ces outils, les développeurs peuvent mettre à jour l'état de l'application de manière déclarative et faciliter la maintenance et l'évolution de l'application.

Ecrire l'état initial

L'état initial représente la configuration par défaut de votre store au démarrage de l'application. Il est défini en créant un objet qui correspond à la structure de votre état.

Définir l'interface de l'état

Dans src/app/store/users/users.reducer.ts

Tout d'abord, nous devons définir l'interface UsersState qui décrit la forme de l'état des utilisateurs. Cela permet de garantir que l'état est toujours structuré de manière cohérente et prévisible.

typescript

import { User } from "../../core/interfaces/user.interface";

// Interface représentant l'état des utilisateurs
export interface UsersState {
    usersList: User[];  // Liste des utilisateurs
    loading: boolean;   // Indicateur de chargement
}

user.ts

export interface User {
    id: number;
    name: string;
    username?: string;
    email: string;
    address?: {
        street: string;
        suite: string;
        city: string;
        zipcode: string;
        geo: {
            lat: string;
            lng: string;
        }
    };
    phone?: string;
    website?: string;
    company?: {
        name: string;
        catchPhrase: string;
        bs: string;
    };
}

Initialiser l'état

Ensuite, dans le même fichier, nous créons une constante usersInitialState qui initialise l'état avec des valeurs par défaut. Cette constante est utilisée pour fournir une base cohérente pour l'état de l'application lors de son démarrage.

// État initial des utilisateurs
const usersInitialState: UsersState = {
    usersList: [],    // Liste initiale vide d'utilisateurs
    loading: true     // Indicateur de chargement initialisé à true
};

• usersList: [] - La liste des utilisateurs est initialisée à un tableau vide, car au démarrage de l'application, aucune donnée utilisateur n'est encore chargée.
• loading: true - L'indicateur de chargement est initialisé à true, signifiant que l'application est en cours de chargement des utilisateurs. Cela permet d'afficher une animation ou un message de chargement jusqu'à ce que les données soient récupérées.

---

Que faire ensuite ? Vous pouvez maintenant passer à la création des actions