Magasin ngRx dans angulaire

Avant de commencer, une petite histoire. Ainsi, il y a quelques semaines, il y avait une exigence dans un projet angulaire sur lequel je travaillais, dans laquelle je devais conserver une donnée intacte afin que plusieurs autres composants puissent l'utiliser. Mon instinct React m'a suggéré d'utiliser une version angulaire de l'API de contexte, ce qui m'a conduit à 3 façons angulaires de gérer les états et de conserver les données intactes.

1. État du composant : Pour les applications ou composants simples avec un minimum de données partagées, nous pouvons gérer l'état au sein des composants individuels à l'aide des propriétés des composants et de la liaison d'événements d'Angular. C'était clairement hors de propos car j'avais besoin de partager des données sur plusieurs composants.

2. Gestion de l'état basée sur les services : Les services peuvent être utilisés pour créer des solutions de gestion d'état centralisées. Mais les performances et l'évolutivité de l'application en prendront un coup suite à cette approche.

3. ngRx Store : ngRx Store offre des capacités de gestion centralisée de l'état. NGRX utilise les observables et les actions RxJS pour gérer l'état.

Sur les trois magasins ngRx, cela semblait être le plus approprié.

Implémentation du magasin ngRx :

Pour mieux comprendre la mise en œuvre de ngRx, nous devons d'abord comprendre comment fonctionne ngRx en premier lieu.

Le flux part du composant. L'avantage de ngRx est que notre composant n'a pas besoin de savoir comment gérer l'état. La seule chose qui l'intéresse est d'envoyer une action pour informer que quelque chose s'est produit (un événement), comme si l'utilisateur a cliqué sur le bouton Supprimer.

À ce stade, le réducteur entre en jeu. Le réducteur est chargé de déterminer comment une action particulière doit modifier l’état. Habituellement, nous avons un réducteur pour chaque entité pour laquelle nous voulons gérer l'état. Ainsi, Reducer détecte toutes les actions envoyées dans l'application et détermine comment l'état doit être modifié et, une fois modifié, stocke l'état mis à jour dans le magasin ngRx (qui est un magasin global pour tous les états de l'application).

Enfin, lorsqu'un composant souhaite accéder au magasin, le composant utilise un sélecteur pour extraire l'état dont il a besoin du magasin.

Maintenant, mettons nos (en fait mes) mains à la pâte et implémentons un magasin pour une application Todo.

Étape 1 : Créer une action

Dans la méthode createAction, nous transmettons deux paramètres : une chaîne unique qui sera utilisée pour distinguer une action, une autre est la charge utile que nous voulons envoyer (facultatif).

Étape 2 : Création de réducteurs
Dans le réducteur, on passe l'état initial et la tâche à effectuer lors de l'envoi d'une action particulière.

Étape 3 : Action de répartition
Nous expédions une action en appelant la méthode d'expédition du magasin en lui transmettant l'action.

Étape 4 : Création du sélecteur

AppState fait référence au magasin central de l'ensemble de l'application à partir duquel nous sélectionnons l'état de la tâche. Nous pouvons maintenant commencer à consommer les données du magasin comme je l'ai fait dans la ligne numéro 1 du code Dispatching Actions. 11.

Enfin, nous devons ajouter le todoReducer dans nos importations du module App afin qu'il soit disponible dans toute l'application.

Conclusion

Dans ce blog, j'ai résumé et expliqué le magasin ngRx en détail, comment il fonctionne et comment pouvons-nous l'implémenter dans notre application. Le magasin ngRx peut être très utile à mesure que l'application se développe, pour stocker des données et y accéder à travers différents composants. J'espère que ça a aidé ;)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!