Les mots représentés comme ceci sont disponibles dans la page lexique.

NGRX est une librairie Angular. Basé sur Redux qui est une bibliothèque open source en JavaScript de gestion d’état pour le framework React, NGRX permet l’utilisation sur Angular. Il met en oeuvre un Store, qui va stocker les données le temps de la session utilisateur. Le processus se compose de quatre parties, Modèle, Action, Effect (optionnel) et Reducer.

Contexte d'utilisation

J’ai eu l’occasion d’utiliser NGRX avec la V2 du Meriscope. Une fois les données récupérés par API REST, elles sont stockées dans le Store de NGRX, accessible n’importe où dans l’application. Il est possible de faire des store par page uniquement.

NGRX va s’occuper de toute la logique algorithmique, qui de base est gérée dans les fichiers en TypeScript de sorte à épurer le code de l’application. NGRX permet également l’utilisation des API REST et notamment du CRUD: Create, Read, Update, Delete (en français: Création, Lecture, Modification, Suppression)

Concernant l’utilisation propre de NGRX, prenons un exemple avec une liste de favoris d’article. Pour la récupérer, je fais appelle à l’action associée (que j’ai défini dans un fichier spécifique). Une fois créée, un effect associée a l’action va être créé et va s’occuper de récupérer les données avec l’API. Si tout s’est bien déroulé, l’effect va appeler l’action de succès, sinon l’action d’erreur. Dans les deux cas, c’est au reducer d’entrer en jeu. Son rôle est de mettre en forme les données correctement selon le modèle de données voulu et de les intégrer dans le Store de l’application. Un état pour ma liste de favoris est alors créé et disponible. Cet état ne pourra qu’être consulté dans l’application, s’il doit être modifié, un nouvel état sera créé en reprenant le même processus qu’expliqué précédemment ce qui permet de garder une historique des états et de pouvoir revenir en arrière si besoin.

Mon autocritique

J’ai mis deux semaines a bien comprendre le fonctionnement de NGRX, qui est tout de même complexe. Quand je m’y suis intéressé, la librairie était en version 7. La version 8 est sorti quelques jours après, et coup de chance, elle simplifiait grandement l’utilisation de NGRX, ce qui m’a permis de comprendre beaucoup plus rapidement.

Avec l’expérience que j’ai aujourd’hui, je serai capable de l’intégrer dans n’importe quelle application Angular.

Il contribue grandement à l’optimisation d’une application puisqu’une donnée stockée est accessible n’importe où dans l’application et évite donc de faire de multiples appels à la base de données.

Je conseille fortement son utilisation à n’importe quel développeur Angular, et encourage l’utilisation de Redux pour les développeurs React.

Conclusion

NGRX révolutionne le développement sur une application Angular. Aujourd’hui NGRX en est à la version 10, et je n’ai pas suivi son évolution. Je prévois de me mettre à jour sur son utilisation dans les mois à venir.

Réalisation associée