Programmation réactive en TypeScript : la bibliothèque RxJS

Programmation réactive en TypeScript : guide complet de RxJS

La programmation réactive est un paradigme de développement axé sur les flux de données asynchrones et la propagation des changements. Dans l'écosystème TypeScript, l'outil le plus puissant pour implémenter ce paradigme est la bibliothèque RxJS (Reactive Extensions for JavaScript). RxJS permet de travailler avec des événements, des requêtes asynchrones et des états d'application comme des séquences de données que l'on peut transformer, combiner et filtrer à l'aide d'opérateurs déclaratifs.

Concepts fondamentaux de RxJS

À la base de RxJS se trouvent trois entités clés :

\n
• Observable — une source de données qui peut générer des valeurs au fil du temps. Analogue à un tableau, mais les éléments apparaissent de manière asynchrone.
\n
• Observer — un consommateur de données qui réagit à trois types d'événements : next (nouvelle valeur), error (erreur) et complete (fin du flux).
\n
• Subscription — un objet représentant l'exécution d'un Observable. Permet d'annuler l'abonnement et de libérer les ressources.
\n

import { Observable } from 'rxjs';\n\nconst observable = new Observable<number>(subscriber => {\n  subscriber.next(1);\n  subscriber.next(2);\n  subscriber.next(3);\n  setTimeout(() => {\n    subscriber.next(4);\n    subscriber.complete();\n  }, 1000);\n});\n\nconst subscription = observable.subscribe({\n  next: (value) => console.log(`Reçu : ${value}`),\n  error: (err) => console.error(`Erreur : ${err}`),\n  complete: () => console.log('Flux terminé')\n});\n\n// Annulation de l'abonnement après 500 ms\nsetTimeout(() => subscription.unsubscribe(), 500);

Opérateurs RxJS : la base des transformations réactives

Les opérateurs sont des fonctions pures qui prennent un Observable et retournent un nouvel Observable, sans modifier l'original. Ils se divisent en plusieurs catégories :

\n
• Création : of, from, interval, fromEvent
\n
• Transformation : map, pluck, scan, buffer
\n
• Filtrage : filter, take, skip, distinctUntilChanged
\n
• Combinaison : merge, concat, combineLatest, zip
\n
• Gestion des erreurs : catchError, retry, retryWhen
\n

import { fromEvent, interval } from 'rxjs';\nimport { map, filter, debounceTime, distinctUntilChanged } from 'rxjs/operators';\n\n// Exemple : recherche réactive avec debounce\nconst searchInput = document.getElementById('search') as HTMLInputElement;\nconst input$ = fromEvent(searchInput, 'input').pipe(\n  map(event => (event.target as HTMLInputElement).value),\n  filter(text => text.length >= 3),\n  debounceTime(300),\n  distinctUntilChanged()\n);\n\ninput$.subscribe(searchTerm => {\n  console.log(`Recherche : ${searchTerm}`);\n  // Effectuer une requête HTTP\n});

Subject : flux chauds et froids

Subject est un type spécial d'Observable qui est à la fois un observateur et un observable. Il permet de multicast (diffuser) une même valeur à plusieurs abonnés. Principales variétés :

\n
• Subject — basique, transmet uniquement les nouvelles valeurs
\n
• BehaviorSubject — stocke la dernière valeur et la fournit aux nouveaux abonnés
\n
• ReplaySubject — met en mémoire tampon les N dernières valeurs
\n
• AsyncSubject — émet uniquement la dernière valeur après la fin du flux
\n

import { BehaviorSubject } from 'rxjs';\n\n// Gestion de l'état de l'application