Comment rendre réactive une application Angular avec BehaviorSubject de RxJS ?

Hello les développeurs et lovers de Angular, réjouissez-vous car aujourd’hui, nous parlerons d’une astuce pour rendre davantage réactive votre SPA ! Comme indiqué dans le titre, nous utiliserons les méthodes qu’offre la classe BehaviorSubject de la bibliothèque RxJS qui est déjà présente lors de la création de votre projet Angular.

En effet, le problème que l’on rencontre souvent au niveau des SPAs est la mise à jour des variables vu que les pages web ne se rechargent pas comme à l’ancienne après une action ou une redirection. En Angular, cela peut s’avérer un vrai casse-tête lorsqu’il s’agit de faire des appels d’APIs pour mettre à jour des informations de l’utilisateur qui ont une répercussion au niveau d’autres components par exemple.

RxJS (Reactive Extensions Library for JavaScript), c’est quoi ?

C’est une bibliothèque permettant de composer des programmes asynchrones et événementiels en utilisant des séquences observables. Ces séquences observables se déclenchent au travers des méthodes qu’offrent les classes de cette bibliothèque. Ainsi, elle apporte une réactivité considérable aux SPAs. Vous pouvez en lire davantage sur le site officiel de la documentation https://rxjs.dev

La classe BehaviorSubject, on en parle ?

La classe BehaviorSubject est une variante qui requiert une valeur initiale et émet sa valeur actuelle chaque fois qu’elle est souscrite. Autrement dit, contrairement à la classe Subject, lorsqu’on décide de créer une instance de BehaviorSubject, il faut obligatoirement l’initialiser avec une valeur de départ. Elle nous offre deux méthodes mais pour ce cas pratique, nous nous focaliserons sur la seule méthode essentielle qui est la méthode next.

La méthode next permet juste d’attribuer une valeur à notre objet qui sera lue lorsque nous essaierons de la récupérer à travers une souscription à notre observable. Pour en savoir plus, viistez ce lien https://rxjs.dev/api/index/class/BehaviorSubject#behaviorsubject

Etude de cas : mettre à jour les informations de profil d’un utilisateur dans une SPA

a- Créer un service pour implémenter la REST API liée au profil

b- Mettre en place la méthode pour récupérer le profil

c- Mettre en place la méthode pour mettre à jour le profil

d- Mettre en place la méthode qui gère le state lié à la mise à jour du profil

e- Implémenter le service dans votre component

• Dans la méthode ngOnInit, nous faisons appel à notre méthode getCurrentProfile une première fois pour récupérer les informations du profil au chargement de notre page 

• Ensuite dans cette même méthode nous mettons en place la souscription à notre observable afin d’écouter s’il nous retourne un booléen ayant pour valeur true (si et seulement si le profil est mis à jour dans la méthode updateProfile) et nous mettons sa valeur à false après :

• Enfin, dans la méthode updateProfile, nous faisons appel à la méthode updateCurrentProfile de notre service. À la fin de la requête, nous mettons à jour le state de notre observable à true (ce qui signifie que le profil a été mis à jour).

Le code complet de l’implémentation au niveau du component :

En somme, grâce à cette technique, l’utilisateur a l’impression que votre application est en temps réel. À chaque fois que votre observable change d’état, la souscription se déclenche ce qui vous évite les problèmes de mise à jour de vos variables. Vous pouvez l’appliquer à d’autres cas d’utilisation.

Enjoy coding and stayed tuned !!!