La programmation réactive est un paradigme de programmation axé sur les flux de données et la propagation des changements. Cela signifie qu'au lieu de traiter des valeurs qui changent dans le temps, comme cela est courant dans la programmation impérative, dans la programmation réactive, nous traitons de séquences d'événements dans le temps. Dans ce chapitre, nous discuterons de la programmation réactive avec RxJS dans le développement front-end.
RxJS est une bibliothèque permettant de composer des programmes asynchrones et basés sur des événements à l'aide de séquences observables. Il est parfait pour gérer des événements, en particulier lorsque vous devez gérer un grand nombre d'événements arrivant au fil du temps. RxJS vous permet de créer un flux d'événements et d'y réagir de manière déclarative, sans vous soucier des détails de bas niveau.
Pour démarrer avec RxJS, nous devons d'abord comprendre le concept d'Observables. Un observable est une représentation de n'importe quel ensemble de valeurs sur n'importe quelle durée. Il peut s'agir d'une valeur unique, d'une séquence de valeurs ou d'un flux continu de valeurs. Les observables sont la base de la programmation réactive avec RxJS.
Un observable en lui-même ne fait rien. Il a besoin d’un Observateur pour réagir aux valeurs qu’il émet. Un observateur n'est qu'un objet avec trois méthodes : next, error et complete. La méthode suivante est appelée pour recevoir la valeur suivante de l'Observable, la méthode d'erreur est appelée s'il y a une erreur lors de la génération de valeur et la méthode complète est appelée lorsqu'il n'y a plus de valeurs à générer.
Pour créer un observable, vous pouvez utiliser la fonction de création RxJS. Par exemple, pour créer un observable qui génère des nombres de 1 à 5, vous pouvez procéder comme suit :
const source$ = Rx.Observable.create(observer => {
pour (soit i = 1; i <= 5; i++) {
observateur.next(i);
}
observateur.complete();
});
Pour vous abonner à un Observable et commencer à recevoir des valeurs, vous utilisez la méthode d'abonnement de l'Observable. Par exemple, pour imprimer les valeurs de l'Observable que nous venons de créer, vous procéderiez comme suit :
source$.subscribe(
valeur => console.log(valeur),
erreur => console.erreur(erreur),
() => console.log('Complet')
);
En plus de créer des observables à partir de zéro, vous pouvez également transformer d'autres éléments en observables, tels que des événements, des promesses, des tableaux, etc. RxJS fournit de nombreuses fonctions utilitaires à cet effet, appelées opérateurs.
Les opérateurs sont des fonctions qui vous permettent de manipuler les observables de différentes manières. Par exemple, vous pouvez filtrer des valeurs, mapper des valeurs à d'autres valeurs, combiner plusieurs observables en un seul, etc. Les opérateurs sont le principal outil que vous utilisez pour composer la logique dans RxJS.
Pour utiliser un opérateur, vous appelez la méthode pipe de l'Observable et lui transmettez l'opérateur. Par exemple, pour filtrer les valeurs paires de notre Observable, vous pouvez procéder comme suit :
const pair$ = source$.pipe(
Rx.operators.filter(valeur => valeur % 2 === 0)
);
even$.subscribe(value => console.log(value)); // journaux 2, 4
En résumé, la programmation réactive avec RxJS est un moyen puissant de gérer les événements et les flux de données dans les applications frontales. Avec les observables et les opérateurs, vous pouvez exprimer une logique complexe de manière déclarative et gérable.
