Angular

Appearance

Qu'est ce que NgRx ? ​

NgRx est une bibliothèque d'outils pour la gestion d'état réactive en Angular. Il s'agit d'une implémentation de la bibliothèque ReactiveX (RxJS) pour Angular, qui permet de gérer de manière efficace l'état de l'application en utilisant des Observables et des opérateurs RxJS. NgRx fournit également des outils pour faciliter la manipulation de l'état de l'application, tels que des actions, des reducers et des selectors. En utilisant NgRx, les développeurs peuvent construire des applications Angular plus fiables et plus performantes en gérant l'état de manière déclarative et en utilisant des concepts de programmation réactive.

Installer ​

bash
npm install @ngrx/store
npm install @ngrx/store

Le cas d'usage ​

Le cas d'usage principal de NgRx dans une application web est de gérer l'état de l'application de manière centralisée et de manière déclarative. NgRx permet de stocker l'état de l'application dans un store unique, qui peut être accessible à tous les composants de l'application. Cela permet de s'assurer que tous les composants ont accès aux mêmes données et que l'état de l'application est mis à jour de manière cohérente.

En utilisant NgRx, les développeurs peuvent également faciliter la gestion des données asynchrones dans l'application en utilisant des Observables et des opérateurs RxJS. Cela peut être utile pour gérer des données qui proviennent d'API externes, ou pour gérer les événements asynchrones tels que les clics sur des boutons ou les changements dans les formulaires.

Enfin, NgRx offre également des outils pour faciliter la mise en œuvre de la logique métier de l'application, tels que des actions, des reducers et des selectors. Ces outils permettent aux développeurs de déclarer explicitement les différentes parties de l'application et de les relier de manière cohérente, ce qui peut faciliter la maintenance et l'évolution de l'application.

Exemple: Créer un utilisateur ​

Voici un exemple de schéma d'un store user avec NgRx pour le cas où l'action consiste à créer un utilisateur dans l'application :

mermaid
graph TD;
  User[User] --> |dispatch createUser action| Action[Action]
  Action --> |dispatch| Reducer[Reducer]
  Reducer --> |return new state with new user| State[State]
  State --> |select| View[View]
  View --> |dispatch action| Action
graph TD;
  User[User] --> |dispatch createUser action| Action[Action]
  Action --> |dispatch| Reducer[Reducer]
  Reducer --> |return new state with new user| State[State]
  State --> |select| View[View]
  View --> |dispatch action| Action

Dans ce cas, l'utilisateur déclenche une action de création d'utilisateur en utilisant une fonction d'action (par exemple, en remplissant et en soumettant un formulaire de création de compte).

  1. L'action est dispatchée au store, où elle est traitée par le reducer correspondant.
  2. Le reducer met à jour l'état de l'application en ajoutant le nouvel utilisateur à la liste des utilisateurs existants, et retourne un nouvel état.
  3. La vue sélectionne les données nécessaires de l'état et les utilise pour mettre à jour l'interface utilisateur (par exemple, en affichant une notification de succès ou en redirigeant vers une autre page). Si nécessaire, la vue peut également déclencher de nouvelles actions en utilisant des fonctions d'action.