72. Introduction à la gestion d'état

À mesure que les applications grandissent, la gestion des données partagées (l'état) devient complexe. Lorsque les données passent par de nombreux composants via @Input/@Output ou des services peu structurés, il devient difficile de tracer les changements.

Qu'est-ce que l'état de l'application ?

L'état représente les données qui persistent et changent au fil du temps, affectant l'interface utilisateur. Exemples :

Statut d'authentification de l'utilisateur.
Données récupérées du serveur (ex : liste de produits).
État de l'UI (ex : onglet sélectionné, visibilité d'une modale).

Besoin d'un Store centralisé

Les bibliothèques de gestion d'état centralisées (comme NgRx, NgXs, Akita) proposent un pattern prédictible (souvent inspiré de Redux) :

Source de vérité unique : Tout l'état réside dans un objet global unique (le Store).
L'état est en lecture seule : Il ne peut être modifié qu'en déclenchant des Actions explicites.
Changements prédictibles : Gérés par des Reducers (fonctions pures) qui prennent l'état actuel et une action pour renvoyer un nouvel état.

NgRx (Gestion d'état réactive)

NgRx est la bibliothèque standard d'Angular pour la gestion d'état style Redux, s'appuyant fortement sur RxJS.

Concepts clés de NgRx :

Store : Contient l'état sous forme d'objet immuable.
Actions : Événements déclenchés par les composants (ex : [Products Page] Load Products).
Reducers : Gèrent les actions et calculent le nouvel état.
Selectors : Fonctions pures pour requêter des morceaux de l'état.
Effects : Services gérant les effets secondaires (ex : appels API) déclenchés par les actions.

Comprendre cette architecture est essentiel pour maintenir des applications de grande envergure.