๐บ๐ฒ๐ฟ๐ด๐ฒ๐ ๐ฎ๐ฝ, ๐ฐโ๐ฒ๐๐ ๐ฐ๐ผ๐บ๐บ๐ฒ ๐ฒ๐ป๐๐ผ๐๐ฒ๐ฟ ๐๐ป๐ฒ ๐ฎ๐ฟ๐บ๐ฒฬ๐ฒ ๐ฑ๐ฒ ๐ฑ๐ฟ๐ผ๐ป๐ฒ๐โฆ ๐๐ฎ๐ป๐ ๐ฝ๐ฒ๐ฟ๐ฑ๐ฟ๐ฒ ๐น๐ฒ ๐ฐ๐ผ๐ป๐๐ฟ๐ผฬ๐น๐ฒ ๐ป๐ถ ๐น๐ฒ๐ ๐ฑ๐ผ๐ป๐ป๐ฒฬ๐ฒ๐.
Pas de coordination = carnage aรฉrien.
Je voulais bien faire.
Afficher des fiches utilisateur enrichies, easy.
Je reรงois une liste, je boucle, je subscribe(), je croise les doigts.
Rรฉsultat ?
โ 15 requรชtes qui partent en parallรจle sans casque ni ceinture
โ Le serveur hurle
โ Et moi, jโessaie de debugger avec console.log('???') (4)
Puis je dรฉcouvre mergeMap().
Un opรฉrateur RxJS qui fait ๐๐ผ๐๐ ๐ฐ๐ฒ ๐พ๐๐ฒ ๐ท๐ฒ ๐๐ฒ๐ป๐๐ฎ๐ถ๐โฆ ๐ฝ๐ฟ๐ผ๐ฝ๐ฟ๐ฒ๐บ๐ฒ๐ป๐.
Il transforme chaque valeur en un flux autonome.
Et il les fusionne. En silence. Sans annuler. Sans paniquer.
users$.pipe(
mergeMap(user => this.http.get(`/profil/${user.id}`))
)
.subscribe(...)
โ Plus besoin de pyramides de subscribe()
โ 5x plus rapide sur notre use case (mesurรฉ avec Chrome DevTools) (3)
โ Flux stable, traรงable, sans perte
๐๐น๐ฒ๐ฟ๐๐ฒ ๐ฝ๐ผ๐๐ฟ ๐น๐ฒ๐ ๐๐ฒฬ๐บ๐ฒฬ๐ฟ๐ฎ๐ถ๐ฟ๐ฒ๐ :
mergeMap ne ๐ฐ๐ฎ๐ป๐ฐ๐ฒ๐น rien.
Si tu traites des donnรฉes massivesโฆ tu peux noyer ton app.
โ Utilise lโoption mergeMap(fn, 5) pour fixer un quota. (bonus de pro)
๐ฃ๐ฎ๐ฟ๐ฒ๐ป๐๐ฒฬ๐ :
โ switchMap : nโaime pas les doublons, il ๐ฎ๐ป๐ป๐๐น๐ฒ le flux prรฉcรฉdent
โ concatMap : poli, mais attend la fin dโun pour lancer le suivant
โ mergeMap : le bourrin organisรฉ. Il ๐ฝ๐ฟ๐ฒ๐ป๐ฑ ๐๐ผ๐๐ en parallรจle.
๐๐ฒ๐ ๐ฏ ๐ฒ๐ป๐๐ฒ๐ถ๐ด๐ป๐ฒ๐บ๐ฒ๐ป๐๐ :
โ Tu veux de la parallรฉlisation contrรดlรฉe ? Prends mergeMap
โ Tu veux garder toutes tes donnรฉes ? Idem
โ Mais sans garde-fou, tu vas ๐ฑ๐ฒฬ๐ฏ๐ผ๐ฟ๐ฑ๐ฒ๐ฟ ton front.
Dans le carrousel :
โ Schรฉma ultra clair du fonctionnement
โ Comparatif visuel avec les autres opรฉrateurs
โ Guide express pour bien le doser
๐ฌ Tu veux ๐ฑ๐ผ๐บ๐ฝ๐๐ฒ๐ฟ ๐ฅ๐ ๐๐ฆ comme un chef ?
Ou tu veux que je dรฉcortique un cas concret de ton projet ?
๐ฬ๐ฐ๐ฟ๐ถ๐ ๐๐ผ๐ป ๐ฝ๐ฟ๐ผ๐ฏ๐น๐ฒฬ๐บ๐ฒ ๐ฒ๐ป ๐ฐ๐ผ๐บ๐บ๐ฒ๐ป๐๐ฎ๐ถ๐ฟ๐ฒ, ๐ท๐ฒ ๐๐ฟ๐ฎ๐ถ๐๐ฒ๐ฟ๐ฎ๐ถ ๐ฑ๐ฎ๐ป๐ ๐น๐ฒ๐ ๐ฝ๐ฟ๐ผ๐ฐ๐ต๐ฎ๐ถ๐ป๐ ๐ฒฬ๐ฝ๐ถ๐๐ผ๐ฑ๐ฒ๐.
๐ Et si tu as loupรฉ les รฉpisodes sur filter, map ou debounceTime, pas de soucis, je les remets en commentaire.
Sympa tes posts :)
Ce quโon oublie souvent, cโest que mergeMap/switchMap/concatMap (comme flatMap (bind) en Scala ou autre) est monadique : il enchaรฎne des effets en propageant leur contexte.
Idรฉal quand chaque รฉtape dรฉpend de la prรฉcรฉdente.
Une sรฉquentialitรฉ dans le dรฉclenchement des sous-observables.
Mais dans d'autres cas, on veut juste exรฉcuter N traitements indรฉpendants en parallรจle.
Lร , ce nโest plus une monade quโil faut, mais un applicative functor (ex : forkJoin, combineLatest, etc.).
Comprendre cette nuance pour les devs est crucial โ et รฉvite bien des bugs ou lenteurs inutiles ;)
Accรฉlรฉrez vos projets tech avec lโIA | Structuration, delivery, automatisation | Fondatrice de Wasteland Studio
3 months ago
Lien vers l'รฉpisode 1 sur map
๐ https://urlr.me/WUpC9P
Lien vers l'รฉpisode 2 sur filter
๐ https://urlr.me/wTUpuG
Lien vers l'รฉpisode 3 sur debounceTime
๐ https://urlr.me/2p8HVj