RxJS #2 : opérateurs (map, filter, switchMap)

Un Observable brut, c'est rarement ce que tu veux afficher : il faut le transformer, filtrer, parfois enchaîner sur un autre flux (un appel API). Ça se fait avec des opérateurs, branchés dans un .pipe(...). Trois suffisent pour 80 % des cas : map, filter, switchMap.

1. Le problème concret : sauver la note côté serveur

En leçon 07, l'auto-save de la note écrivait dans localStorage à chaque frappe (un effect). Maintenant on veut sauver sur le serveur. Frapper l'API à chaque touche serait absurde : il faut attendre une pause, ignorer les saisies vides, et si l'utilisateur repart à taper pendant qu'une sauvegarde est en vol, annuler celle-ci. Voilà le pipeline complet :

import { debounceTime, map, filter, switchMap } from 'rxjs';

// saisie$ = le flux des textes saisis (1 valeur par frappe).
// Comment le fabriquer depuis le champ : leçon 10 (toObservable).
this.saisie$.pipe(
  debounceTime(400),                  // attendre 400 ms de pause de frappe
  map(texte => texte.trim()),         // transformer : nettoyer
  filter(texte => texte.length > 0),  // garder : pas de sauvegarde vide
  switchMap(texte => this.api.sauver(texte)) // sauver, en ANNULANT la précédente
).subscribe(() => this.etat.set('enregistré ✓'));

Le .pipe(...) compose les opérateurs : chaque valeur traverse la chaîne de haut en bas. pipe ne modifie pas le flux d'origine — il renvoie un nouvel Observable (comme une chaîne LINQ ne modifie pas la liste source). Et tout reste paresseux : rien ne tourne tant que personne ne subscribe.

2. map — transformer chaque valeur

Sens : « pour chaque valeur qui passe, remplace-la par autre chose ». Relation 1 pour 1. On transforme une mesure brute en objet d'affichage :

// mesures$ : Observable<number> (leçon 08) → Observable<{ valeur, alerte }>
this.mesures$.pipe(
  map(c => ({ valeur: Math.round(c), alerte: c > 80 }))
);

3. filter — ne garder que certaines valeurs

Sens : « laisse passer la valeur seulement si la condition est vraie, sinon jette-la ». On dérive un flux qui n'émet que les alertes :

// ne réagir QUE quand une mesure dépasse le seuil
const alertes$ = this.mesures$.pipe(
  filter(c => c > 80)   // les valeurs ≤ 80 ne passent pas
);

4. switchMap — enchaîner sur un autre flux (et annuler)

Les deux précédents restent dans le même flux. switchMap est différent : pour chaque valeur reçue, il démarre un nouvel Observable interne (typiquement un appel API) et renvoie ses valeurs. Le mot-clé, c'est « switch » : si une nouvelle valeur arrive alors que l'Observable interne précédent n'a pas fini, il l'annule et bascule sur le nouveau.

// à chaque texte stabilisé → on sauve ; une nouvelle frappe annule la sauvegarde en vol
switchMap(texte => this.api.sauver(texte))

C'est exactement ce qu'on veut pour une sauvegarde auto ou une recherche : seule la dernière saisie compte. Sans switchMap, deux sauvegardes peuvent revenir dans le désordre et tu écrases la récente par une ancienne (bug de course classique). switchMap garantit qu'une seule requête est vivante : la plus récente.

5. Vérifie ta compréhension