Cet article est une continuation de l'article «Angular: An Introductory Introduction to NGRX».Exemple NGRX
Dans notre exemple, il y aura une liste d'utilisateurs, une page de détails utilisateur et quelques informations de configuration initiale que vous devriez obtenir lorsque vous démarrez l'application. Nous allons implémenter quelques threads NGRX importants.Plan d'action:- Installation de la bibliothèque
- Création d'une structure de dossiers pour le stockage
- Création de stockage et de valeurs initiales
- Création d'actions
- Création de réducteurs (réducteurs)
- Création d'effets
- Création de sélecteurs
- Configuration finale
- Utilisation du stockage dans les composants
Alors faisons-le ...Installation de la bibliothèque
Nous allons utiliser Angle Cli pour créer le projet, puis nous ajouterons les bibliothèques ngrx.Créez un projet:ng new angular-ngrx --style=scss
Ajoutez les bibliothèques NGRX nécessaires:npm install @ngrx/core @ngrx/store @ngrx/effects @ngrx/store-devtools @ngrx/router-store --save
Nous installons presque toutes les bibliothèques de l'écosystème ngrx. La plupart d'entre eux décrivent leur objectif assez clairement: le noyau, le stockage, les effets, mais il y en a un couple pour lequel vous vous demandez peut-être pourquoi ils sont nécessaires?- store-devtools - Un puissant outil de débogage.
- router-store - Enregistre l'état du routeur angulaire dans le stockage.
Structure des dossiers pour le stockage
Commençons par discuter de la structure des fichiers du référentiel. Cette structure de fichiers et toute la configuration de stockage doivent exister dans le module principal de votre application, mais dans notre exemple, elle est absente, donc le stockage existera dans le module principal de notre application (les étapes sont presque les mêmes si vous le faites dans le module principal).
La structure des dossiers est une représentation de la composition de stockage réelle. Vous aurez un dossier principal avec le nom «magasin» et cinq sous-dossiers qui représentent chacun des acteurs clés du magasin: «Actions», «Effets», «Redurs», «Sélecteurs» et «État».Création de stockage et de valeurs initiales
Comme nous l'avons mentionné précédemment, nous aurons deux sections principales: notre application, les utilisateurs et la configuration. Pour les deux, nous devons créer un état et un état initial, et faire de même pour l'état de l'application.Nous avons créé deux interfaces pour la définition et la configuration des utilisateurs. Nous en avons également un pour la réponse HTTP de l'utilisateur, c'est juste un tableau IUser.
Commençons par l'état de l'utilisateur (store / state / user.state.ts):
Que faisons-nous ici:- Nous créons et exportons une interface avec une structure d'environnement utilisateur.
- Nous faisons de même avec l'état utilisateur initial, qui implémente l'interface nouvellement créée.
Pour l'état de configuration, nous faisons de même (store / states / config.state.ts):
Enfin, nous devons générer l'état de l'application (store / states / app.state.ts):
- L'état de l'application contient l'état et la configuration de l'utilisateur, ainsi que l'état du routeur.
- Ensuite, nous définissons l'état initial de l'application.
- Enfin, il exporte la fonction pour obtenir l'état initial (nous l'utiliserons plus tard).
Création d'actions
Assurez-vous de lire la définition de l'action dont nous avons discuté dans l' article précédent .
Nous devons créer des actions pour les utilisateurs et les paramètres. Commençons par les actions utilisateur (store / actions / user.actions.ts):
Parcourons un peu le code:- Enum, . , , , .
- . Action ngrx. , , , .
- , , . , , , .
Et c'est tout ... créer des actions est facile. Voyons à quoi ressemblent les actions de configuration (store / actions / config.actions.ts):
Rien de nouveau ici, vous vous sentez probablement maintenant à l'aise avec tout ce qui se passe dans ce fichier.Génial, nous avons déjà déterminé le statut et les actions ... créons des engrenages!Création de boîtes de vitesses
Assurez-vous de lire la définition des boîtes de vitesses dont nous avons discuté dans un article précédent .
Nous aurons des boîtes de vitesses qui répondent à certaines actions, car d'autres seront gérées par des effets que nous allons implémenter plus tard.Nous aurons besoin d'un réducteur pour les utilisateurs et d'un autre pour la configuration, mais nous aurons également besoin de générer des réducteurs d'application, commençons par regarder les réducteurs d'utilisateurs (store / redurs / user.reducers.ts):
discutons de l'implémentation:- Une déclaration de réduction reçoit un état et, dans ce cas, une action utilisateur et retourne un IUserState.
- À l'aide de l'instruction switch, nous générons des observations pour chaque type d'action possible.
- Chaque cas renvoie un nouvel objet, qui est le résultat de la fusion de l'ancien état et de la nouvelle valeur.
- Toutes les boîtes de vitesses ont un résultat par défaut, qui renvoie simplement l'état sans aucun changement.
Et c'est tout. Vous ne trouverez rien d'autre dans la boîte de vitesses. Jetons un coup d'œil aux réducteurs de configuration (state / redurs / config.reducers.ts):
Enfin, regardons les réducteurs d'application (store):
Ici, nous ajoutons tous les réducteurs à la carte des réducteurs de l'application. Nous utilisons une carte de réduction d'action pour une vérification de type supplémentaire. Plus tard, nous allons fournir cette application avec des réducteurs pour le module de magasin.Ajouter des effets
Assurez-vous de lire la définition des «effets», dont nous avons discuté dans un article précédent .
Vous avez probablement déjà remarqué que dans les boîtes de vitesses, nous ne traitons pas toutes les actions. C'est parce que nous allons gérer les actions manquées dans les effets, car ces actions ont des effets secondaires.Commençons par les effets personnalisés (store / effects / user.effects.ts):
Beaucoup de ce qui se passe dans ce fichier. Essayons de les expliquer:- Nous déclarons nos effets personnalisés à l'aide d'un décorateur injecté.
- Nous déclarons nos effets en utilisant le décorateur d'effets fourni par ngrx / Effects.
- En utilisant les actions fournies par ngrx / Effects, nous allons démarrer le pipeline de notre opérateur pour cet effet.
- L'étape suivante consiste à définir le type d'action d'effet à l'aide de l'opérateur ofType.
- Les parties suivantes sont les opérateurs rxjs que nous utilisons pour obtenir ce dont nous avons besoin (nous avons déjà un lien vers la documentation rxjs dans cet article).
- Enfin, dans la dernière instruction, Effect enverra une autre action.
- Dans le constructeur, nous implémentons les services que nous allons utiliser, les actions pour ngrx / Effects, et dans ce cas également le référentiel (notez qu'il s'agit d'une démo, et nous obtenons l'utilisateur sélectionné dans la liste des utilisateurs de notre référentiel).
C'est presque la même structure que vous verrez avec n'importe quel effet. Dans ce cas, nous envoyons uniquement une action réussie, mais nous pouvons envoyer des erreurs ou tout autre état que nous voulons traiter dans nos réducteurs d'application.Considérez les effets de configuration (store / effects / config.effects.ts):
Il est maintenant temps de parler des sélecteurs ..., .
Cela n'a aucun sens de répéter les tranches de notre état partout, alors créons des sélecteurs que nous pouvons réutiliser.Comme toujours, regardons d'abord les sélecteurs d'utilisateurs (store / selectors / user.selectors.ts):
Ceci est vraiment compréhensible car nous ne faisons aucune transformation de données dans nos sélecteurs, mais renvoyons simplement la tranche du magasin référencée par le sélecteur en utilisant la fonction createSelector de ngrx / store.Le premier paramètre est un fragment du stockage qui sera utilisé pour recevoir des données (il peut s'agir d'un tableau avec plusieurs parties de l'état), le deuxième paramètre est une fonction anonyme qui décidera ce que le sélecteur retournera.Regardons les sélecteurs de configuration (store / selectors / config.selectors.ts):
Configuration finale
Eh bien, nous avons créé tout ce dont notre stockage a besoin, mais il nous manque encore une chose: tout assembler. Je vais le faire dans le module d'application, mais vous pouvez appliquer la même chose dans le module principal de votre application.Ajoutons un module d'application:
qu'avons-nous fait ici:- Nous importons nos boîtes de vitesses et les fournissons dans le module de stockage forRoot.
- Nous importons nos effets et les fournissons à l'intérieur du tableau dans le module d'effets forRoot.
- Nous mettons en place la configuration du module d'état du routeur qui fournit le routeur stateKey.
- Et nous ajoutons des outils de développement de magasin si l'environnement n'est pas en production.
Les deux premières étapes sont nécessaires, tandis que les étapes 3 et 4 sont fortement recommandées, mais elles ne sont pas obligatoires.Maintenant, nous avons enfin terminé ... nous pouvons utiliser notre stockage en composants!Utilisation du stockage dans certains composants
Nous approchons de la fin! Voyons comment utiliser notre stockage ...D'abord, obtenons la configuration au démarrage de l'application:
- Nous ajoutons du stockage à notre composant app.com.
- Nous définissons la propriété du composant sur la valeur du sélecteur dans la configuration, car nous voulons afficher certaines de ces informations en HTML.
- Chez onInit, nous soumettons l'action pour obtenir la configuration.
C'est tout ... Nous codons déjà un effet qui contrôlera cette action, et un réducteur qui gérera cet effet. Dès que le magasin entre dans un nouvel état, le sélecteur changera la valeur de notre propriété.Comment associer cela à HTML:
Dès que config $ aura une valeur, nous la verrons en HTML.Voyons maintenant la liste des utilisateurs (conteneurs / utilisateurs / utilisateurs.component.ts):
- Tout comme nous gérons la configuration, nous allons obtenir une liste d'utilisateurs. Tout d'abord, nous injectons le référentiel dans le composant utilisateur.
- Sur onInit, nous publions une action pour obtenir des utilisateurs.
- Nous créons une propriété pour le composant et lui attribuons une liste d'utilisateurs à l'aide du sélecteur de liste d'utilisateurs.
Le HTML ressemble à ceci:
Nous affichons la liste des utilisateurs dans le composant de présentation, envoyant la liste et associant l'utilisateur sélectionné à la fonction de navigation, qui peut être vue dans le composant conteneur d'utilisateur ci-dessus.Regardons le composant conteneur personnalisé:
ce composant reçoit l'identifiant de paramètre de la route activée, et vous êtes probablement déjà familier avec le reste, envoie l'identifiant comme paramètre, sélectionne l'utilisateur sélectionné ...Si vous déboguez l'application, vous pouvez voir les outils de développement, qui sont assez simples à utiliser ... mais dans cet article, nous avons suffisamment étudié, et j'espère que vous pourrez facilement comprendre ces outils.Conclusion
Dans cet article, j'ai essayé de fournir une introduction claire et compréhensible à NGRX, vous donnant tout ce que vous devez savoir pour commencer le développement à l'aide de cet outil.J'espère vraiment que l'article vous aidera à comprendre le modèle d'action et vous recommande de le télécharger et de jouer un peu avec le code.