Apprenez à utiliser RxJS avec Angular

Pour être à l’aise en tant que développeur Angular il est important d’avoir au préalable compris les bases de la programmation réactive et de la programmation fonctionnelle. C’est en fait l’association de ces deux concepts qui devient légèrement plus compliqué à assimiler pour un nouveau développeur sans expérience. En effet le concept de programmation réactive fonctionnelle doit être compris et utilisé le plus possible afin de développer des applications de qualité, robuste, maintenable et testable. Voyons donc ce qu’est la programmation réactive fonctionnelle en reprenant les deux concepts l’un après l’autre :

• Réactive est le fait d’utiliser une librairie réactive (RxJS) pour traiter, combiner, transformer les données et événements via un flux et donc de manière asynchrone.
• Fonctionnelle est le fait de développer la logique en combinant des fonctions pures afin d’éviter d’avoir un état partagé, des objets mutés et des effets de bord.

RxJS: Définitions

• Observable: c'est le flux de données. Il représente l'idée d'une collection invocable de valeurs ou d'événements futurs.
• Observer: est un ensemble de jusqu'à 3 callbacks (next, error, complete) qui sait écouter les valeurs délivrées par l'Observable.
• Subscription: représente l'exécution d'un observable et est principalement utile pour annuler l'exécution.
• Opérateurs: sont des fonctions pures qui permettent un style de programmation fonctionnel de traiter des collections avec des opérations telles que map, filter, concat, mergeMap, etc.
• Subject: est l'équivalent d'un EventEmitter, et le seul moyen de multidiffuser une valeur ou un événement à plusieurs observateurs.
• Schedulers: sont des répartiteurs centralisés pour contrôler la concurrence, ce qui nous permet de coordonner le moment du calcul, par exemple via setTimeout, requestAnimationFrame ou autres.

RxJS et les signaux

Depuis Angular 16, les signaux sont la primitive réactive du framework : ils sont idéaux pour un état synchrone lu dans les templates. RxJS reste le meilleur outil pour les flux d'événements asynchrones tels que les requêtes http, les websockets ou les saisies utilisateur qui nécessitent debounceTime ou switchMap. Les deux fonctionnent ensemble grâce aux fonctions toSignal et toObservable de @angular/core/rxjs-interop, et takeUntilDestroyed se désabonne automatiquement lorsqu'un composant est détruit.