Le guide pour bien démarrer avec ngrx — Partie 1

ngrx est l’une des librairies les plus populaires dans l’écosystème Angular. N’ayant jamais été confronté à un problème où je pourrai l’utiliser j’ai toujours eu l’impression que c’était juste une librairie de plus à apprendre. À chaque fois qu’un interlocuteur me parle du fonctionnement de RxJS, Redux ou ngrx, je le vois comme sur l’image ci-dessous.

https://twitter.com/iamdevloper/status/968792982064386048

Jusqu’au jour où, je rencontre un problème 😠. Et devinez quoi? Résoudre mon problème avec ngrx, est littéralement un jeu d’enfant.

C’est ainsi, que j’ai décidé d’écrire le présent article afin d’introduire les différentes notions pour comprendre à la fois la programmation réactive et la panoplie d’outils liés à cette architecture logicielle ( ngrx ). Ready? 🚀


Au commencement était la programmation réactive

La programmation réactive est un paradigme de programmation informatique qui permet de gérer des flux de données. Elle repose sur le design pattern, Observer. Ce dernier consiste en un objet appelé ‘Subject’ qui devra emmettre des événements et des ‘Observers’ qui seront déclenchées par ces événements. Ce paradigme dispose ainsi d’une implémentation dans plusieurs langages dont JavaScript: RxJS.

ReactJS est l’une des premières librairies JavaScript ayant implémentée ce paradigme à travers Redux. Très tôt, la communauté Angular trouva utile de créer également une librairie s’inspirant de Redux et permettant de tirer le meilleur de RxJS: ngrx.


Utilité de ngrx

S’il y a une question à se poser, c’est bien de connaître l’utilité d’introduire cette nouvelle librairie dans nos applications. Afin de trouver une réponse à cette question, je me suis référé à cette réponse sur StackOverflow. Jetez un coup d’oeil à l’image ci-dessous:

https://stackoverflow.com/questions/37540225/what-are-benefits-of-using-store-ngrx-in-angular-2

ngrx permet de gérer l’état de votre application en la stockant dans un objet JavaScript. Ainsi avec ngrx, tous les composants de votre application pourront partager aisément l’état de cette application. Si vous devez vous passer de ngrx, vous auriez tendance à utiliser les outils que Angular propose pour l’interaction entre composants à savoir Input ou Output. Rassurez-vous, en procédant ainsi, vous obtiendrez à coup sûr une application effectuant des requêtes assez complexes et dans des ‘directions’ assez amusantes.

http://onehungrymind.com/build-better-angular-2-application-redux-ngrx/

La théorie (simplifiée) autour de ngrx

S’il y a bien un thème qui revient à chaque fois qu’on évoque ngrx, c’est bien le ‘store’.

Store

Le ‘Store’ c’est comme je l’ai déjà dit, un simple objet JavaScript contenant l’état de votre application. La première étape pour définir le ‘store’, c’est de trouver les éléments constitutifs de ce dernier. Si vous concevez une boutique en ligne, le store pourra être le panier de l’utilisateur.

Component

Tout composant de votre application qui devra utiliser l’état de votre application devra souscrire au Store via des ‘selectors’.

Une fois que le composant souscrit au Store, il devra par exemple modifier l’état du ‘Store’ via une action.

Reducers

Les ‘reducers’ ne sont que des fonctions n‘ayant qu’un seul rôle. Grâce à une action qu’ils reçoivent, les ‘reducers’ retournent le nouvel état du ‘Store’.

Effects

Les effets permettent d’observer des actions particulières et grâce à l’injection de dépendance effectuer des actions au travers des services de votre application.

Construire une boutique en ligne avec Angular & ngrx

La seconde partie du présent article présentera un exemple concret d’utilisation de ngrx. Tout ce que vous avez à faire pour être informé de la sortie de la seconde partie de l’article c’est de vous abonner.

C’était intéressant ?

N’hésitez pas à le partager ou à laisser des commentaires. Et surtout applaudissez 👏 👏 👏, ça pourrait aider d’autres personnes à retrouver l’article.