Angular et RxJS : La réactivité oui … mais maitrisée !

5 juin 2025#  rex, tutorial, angular, rxjs

Quand j’ai découvert RxJS il y a quelques années avec Angular, je voyais juste des .subscribe() partout sur des trucs qu’on appelait des observables.

Mais ce que je ne voyais pas encore, c’étaient les fuites mémoire, les comportements bizarres, et les chaînes d’opérateurs bancales.

Avec le temps, j’ai compris que la programmation réactive, c’est bien plus qu’un outil pour gérer des appels API. C’est un changement de paradigme, qui implique aussi de bonnes pratiques et un modèle mental différent.

🔍 Mais avant tout, c’est quoi un Observable ?

Un observable est un flux de données asynchrone que l’on peut écouter dans le temps.

Il est au cœur de la programmation réactive avec RxJS.

🧠 L’idée de base : une source qui émet des valeurs

Imaginez un tuyau dans lequel des données arrivent au fil du temps :

const obs$ = new Observable(observer => {
  observer.next(1);
  observer.next(2);
  observer.next(3);
  observer.complete();
});

Ici, on crée un flux qui émet 1, 2, 3, puis s’arrête. Pour “écouter” ce flux, on utilise subscribe() :

obs$.subscribe(value => console.log(value));
// affiche : 1, 2, 3

🔁 Différence avec une Promise

FeaturePromiseObservable
ValeursUne seulePlusieurs dans le temps
Cancelable❌ non✅ oui
Lazy (sur demande)✅ oui✅ oui
Opérateurs.then(), .catch().pipe(), map(), filter()…
ExécutionDès créationAu moment du subscribe()

📦 Exemple concret : une recherche utilisateur

searchInput$.pipe(
  debounceTime(300),
  switchMap(query => this.api.search(query))
).subscribe(results => {
  this.results = results;
});

💡 Un observable peut :

RxJS fournit plus de 60 opérateurs pour composer des flux de manière expressive et lisible.

🌡️ Observable froid vs chaud : comprendre la différence

🔹 Observable froid

Un observable est dit “froid” quand la source est réévaluée à chaque abonnement. Cela signifie que chaque souscripteur a son propre cycle de vie.

const cold$ = new Observable(observer => {
  console.log('Nouvel abonné');
  observer.next(Math.random());
});

cold$.subscribe(val => console.log('Abonné 1 :', val));
cold$.subscribe(val => console.log('Abonné 2 :', val));

Nouvel abonné
Abonné 1 : 0.42
Nouvel abonné
Abonné 2 : 0.88

💡 Typiquement : http.get(), of(), from()…

🔸 Observable chaud

Un observable est dit “chaud” quand il partage sa source de données entre les abonnés.

const subject = new Subject();

subject.subscribe(val => console.log('Abonné 1 :', val));
subject.next(1);
subject.next(2);

subject.subscribe(val => console.log('Abonné 2 :', val));
subject.next(3);

Abonné 1 : 1
Abonné 1 : 2
Abonné 1 : 3
Abonné 2 : 3

💡 Typiquement : Subject, fromEvent, WebSocket, etc.

🔄 Froid + partage = chaud (avec shareReplay)

Il est possible de rendre un observable froid “chaud” en le partageant avec share() ou shareReplay() :

const api$ = this.http.get('/data').pipe(shareReplay(1));

Cela évite de déclencher plusieurs requêtes HTTP si plusieurs abonnés s’inscrivent.

✅ Les bonnes pratiques à adopter

Un grand pouvoir implique de grandes responsabilité, comme dirait l’oncle.

1. Toujours gérer la désinscription

Un subscribe() sans unsubscribe() = fuite mémoire assurée. Par défaut les souscriptions aux observables n’entraînent pas de désinscription automatique (comme les évènements JS en fait).

✅ À faire :

<div *ngIf="data$ | async as data">
  {{ data.title }}
</div>

2. Éviter les souscriptions imbriquées

Ne faites pas ça 👇

this.a$.subscribe(a => {
  this.b$.subscribe(b => {
    // 😬
  });
});

Utilisez switchMap, mergeMap, concatMap, selon le comportement voulu :

this.result$ = this.a$.pipe(
  switchMap(a => this.b$)
);

Pourquoi ?

3. Choisir le bon opérateur

Il en existe un bon gros paquet, alors n’hésitons pas à prendre le plus pertinent ! Quelques-uns que j’utilise le plus :

🔗 Pour aller plus loin : learnrxjs.io

⚠️ Attention à penser à long terme :

RxJS est un outil extrêmement puissant, mais sans bonnes pratiques, il peut rapidement devenir difficile à gérer.

Avant de plonger dans le code, prenez le temps de réfléchir à :

Enfin, testez vos flux RxJS indépendamment des composants pour garantir leur fiabilité et faciliter la maintenance.

En résumé

RxJS n’est pas juste un outil pour “faire des appels API” ou “écouter des événements”.

C’est une manière structurée et déclarative de penser la gestion des flux de données asynchrones.

Et comme tout outil puissant mal utilisé… ça peut devenir un cauchemar.

Et vous, quels sont vos opérateurs RxJS préférés ?

photoMickaël JACQUOT

Mickaël JACQUOT

Analyste Programmeur
# Angular,Typescript,Node,Java,Spring