👲🏽 🎤 🤴🏽 Angular: une introduction claire à NGRX 👨🏼‍🎤 ☔️ 🕦

Le but de cet article est de donner une vue claire et claire de ngrx . Pour ce faire, je vais vous expliquer ce que vous devez savoir et comprendre sur ngrx, puis nous le verrons en action avec des exemples de code simples et clairs.

Voici une liste de sujets que nous aborderons dans cet article:

Qu'est-ce que ngrx
Avantages de l'utilisation de ngrx
Inconvénients de l'utilisation de ngrx
Quand utiliser ngrx
Actions, boîtes de vitesses, sélecteurs, stockage et effets

Suite de l'article avec un exemple d'utilisation: "Angulaire: un exemple d'utilisation de NGRX . "

Qu'est-ce que NGRX

NGRX est un groupe de bibliothèques «inspirées» par le modèle Redux, qui, à son tour, est «inspiré» par le modèle Flux. Autrement dit, cela signifie que le modèle Redux est une version simplifiée du modèle Flux, et NGRX est la version angulaire / rxjs du modèle Redux.

Ce que je veux dire par la version "angulaire / rxjs" de redux ... la partie "angulaire" est que ngrx est une bibliothèque à utiliser dans les applications angulaires. Une partie des «rxjs» est que l'implémentation ngrx fonctionne autour du flux rxjs . Cela signifie qu'il fonctionne en utilisant des opérateurs observables et divers observables fournis par rxjs.

L'objectif principal de ce schéma est d'assurer l'état prévisible du conteneur sur la base de trois principes de base.

Examinons les trois principes du modèle Redux et soulignons les avantages les plus importants qu'ils offrent.

La seule source de vérité

Dans le cas de l'architecture redux / ngrx, cela signifie que l'état de l'ensemble de votre application est stocké dans l'arborescence d'objets dans le même référentiel.

Dans un magasin? Nous parlerons des référentiels plus tard, mais pour une compréhension générale, ils sont responsables du maintien de l'état et de l'application des modifications lorsqu'ils en sont informés (lorsque l'action est envoyée, nous en parlerons également plus tard).

Les avantages d'avoir une seule source de vérité sont nombreux, mais pour moi le plus intéressant (car c'est ce qui affectera toute application angulaire) est le suivant:

Lorsque vous créez une application angulaire, vous divisez généralement l'état et gérez plusieurs services. Au fur et à mesure que votre application se développe, le suivi des modifications de votre état devient de plus en plus difficile et, par conséquent, il devient désordonné, il est difficile de le déboguer et de le maintenir. Le fait d'avoir une seule source de vérité résout ce problème, car l'état n'est traité que dans un seul objet et dans un seul. l'emplacement, donc le débogage ou l'ajout de modifications devient beaucoup plus facile.

État en lecture seule

Vous ne modifierez jamais directement l'état, au lieu de cela, vous enverrez des actions qui décrivent les actions avec l'objet (il peut s'agir, par exemple, d'obtenir, d'ajouter, de supprimer ou de mettre à jour l'état).

Soumettre une action? .. Nous parlerons des actions plus tard, mais pour une compréhension générale, ce sont les identifiants de l'opération sur votre application, et ils peuvent être lancés (ou envoyés) pour dire à l'application d'exécuter l'opération que l'action représente.

En évitant de mettre à jour le statut à partir de différents endroits et en ayant un endroit centralisé pour apporter des modifications qui répond à des actions spécifiques, vous obtenez de nombreux avantages. Sans oublier le plus important:

Vous savez que tout changement d'état se produira en un seul endroit. Cela a un impact important sur le débogage et les tests.
Vous savez que si une certaine action est envoyée, alors l'opération dans l'état est toujours la même. Encore une fois, cela affecte directement le débogage et les tests.

Des modifications sont apportées avec des fonctionnalités simples.

Une opération initiée par l'envoi d'une action sera une simple fonction appelée réducteurs dans le cadre de l'architecture redux.

Ces réducteurs (rappelez-vous qu'il s'agit de fonctions simples) reçoivent une action et un état, selon l'action envoyée (généralement avec l'instruction switch), ils effectuent l'opération et renvoient un nouvel objet état.

L'état dans l'application redux est inchangé! Par conséquent, lorsqu'un réducteur modifie quelque chose dans un état, il renvoie un nouvel objet d'état.

Les avantages de l'utilisation de fonctions pures sont bien connus, tels que le fait qu'elles peuvent être testées immédiatement si vous passez les mêmes arguments que vous obtenez en conséquence.

Cette approche nous permet également de passer d'une instance à l'autre de notre état à l'aide des outils de développement Redux / ngrx et de voir ce qui a changé entre les instances et qui l'a changé, entre autres. Ainsi, l'utilisation de fonctions pures et le renvoi de nouvelles instances d'état ont également un impact important sur le débogage.

Mais le principal avantage, à mon avis, est qu'en liant toutes les données d'entrée de nos composants aux propriétés d'état, nous pouvons changer la stratégie de détection des changements à pousser, ce qui augmentera les performances de l'application.

Génial ... Alors, quels sont les avantages d'utiliser NGRX?

Nous avons déjà mentionné la plupart d'entre eux lorsque nous avons parlé des principes du modèle redux. Mais notons les avantages les plus importants de l'utilisation du modèle redux dans l'application (à mon avis):

, , .
redux , .
, , , , ngrx rxjs, .
ngrx, .

…

NGRX, , . , , , . , .
. , - , , , , , , . () rxjs .
NGRX Google, , , Angular ngrx. - , , .

NGRX

Ainsi, il est généralement admis que ngrx devrait être utilisé dans des projets de moyenne / grande envergure lorsque la gestion de l'État devient difficile à maintenir. Des gens plus fanatiques diront quelque chose comme "si vous avez une fortune, alors vous avez NGRX."

Je suis d'accord qu'il devrait être utilisé dans des projets moyens ou grands lorsque vous avez un état significatif et de nombreux composants qui utilisent cet état, mais vous devez considérer que Angular lui-même fournit de nombreuses solutions de gestion d'état, et si vous avez une forte Équipe de développement angulaire, alors vous n'avez peut-être pas à vous soucier de ngrx.

Dans le même temps, je crois qu'une équipe de développement Angular solide peut également décider d'inclure ngrx dans la solution, car ils connaissent la pleine puissance du modèle redux, ainsi que la force ajoutée par les opérateurs rxjs, et ils se sentent à l'aise de travailler avec les deux ...

Si vous attendiez une réponse simple, pour décider quand utiliser ngrx, vous ne l’obtiendrez pas et ne faites confiance à personne qui vous fournira cette réponse en dehors de votre organisation ou groupe. La décision dépend de l'étude des avantages et des inconvénients, de la compréhension de votre équipe et de la prise en compte de leurs opinions.

Actions NGRX, boîtes de vitesses, sélecteurs, stockage et effets

Ce sont les éléments de base du flux ngrx. Chacun d'eux prend une partie du processus de démarrage d'une opération pour changer notre état et obtenir des données.

Dans l'image, nous voyons le flux ngrx. Expliquons-le ...

. , , , .
…

«» () . — , NGRX Action. Action' ( GetUserName):

type (): , , . : '[User] Get User Login''.

payload ( ): , . , . .
, ( switch) , , .
...

— , : . ngrx , , , , , .
, - , . , - HTTP .
...

ngrx , ngrx.

Effects , - , , , , , .

, API.

, , (success, error ..), , ngrx.
, ( ), «-» ( , ).
. , ngrx , , .
...

, , , .

NGRX «» . , , .

. . «store» , .

...

Un magasin est un objet (une instance de la classe Store ngrx) qui combine les choses que nous avons mentionnées précédemment (actions, réducteurs, sélecteurs). Par exemple, lorsqu'une action est envoyée (en utilisant la fonction d'envoi de l'objet de stockage), le stockage est celui qui trouve et exécute le réducteur correspondant.

Il est également titulaire de l'état de demande.

Suite de l'article avec des exemples d'utilisation: "Angular: an example of using NGRX . "

Angular: une introduction claire à NGRX