CodeForge

Angular 21 de Cero a Experto / RxJS y observables a gran escala

Combinar streams y multicast (share)

Teoría22 min20 XP

Rara vez un stream vive solo. El resultado de una lista depende del término de búsqueda Y del filtro de categoría Y del orden: tres streams que se combinan en uno. Y cuando varios lugares de la app consumen el mismo Observable (una petición HTTP), no quieres ejecutarlo varias veces. Hoy dominas los operadores de COMBINACIÓN (combineLatest, merge, forkJoin) y el MULTICAST (share) —para orquestar y compartir streams sin desperdicio—.

Tres perillas que controlan un resultado

combineLatest: el último de cada uno

combineLatest emite un array (o un objeto) con el valor más reciente de cada Observable, cada vez que alguno emite:

combinelatest.ts
import { combineLatest, map } from 'rxjs';

// tres fuentes que juntas determinan qué gastos mostrar
const gastosFiltrados$ = combineLatest([
this.termino$,      // texto de búsqueda
this.categoria$,    // filtro de categoría
this.orden$,        // criterio de orden
]).pipe(
map(([termino, categoria, orden]) =>
  this.aplicarFiltros(termino, categoria, orden)),
);
// emite un resultado NUEVO cada vez que cambia el término, la categoría o el orden

combineLatest es el operador para "el resultado depende de varias entradas": filtros compuestos, formularios donde un cálculo depende de varios campos, dashboards con múltiples controles. (Nota: no emite hasta que TODOS los streams hayan emitido al menos una vez —dale valores iniciales—.)

merge y forkJoin: otras formas de combinar

Fríos y calientes: por qué a veces se ejecuta de más

share y shareReplay: una ejecución para todos

share.ts
import { shareReplay } from 'rxjs';

// UNA sola petición, compartida por todos los suscriptores
const gastos$ = this.http.get<Gasto[]>('/api/gastos').pipe(
shareReplay(1),   // 1 = recuerda el último valor para quien se suscriba tarde
);
gastos$.subscribe(...);   // dispara la petición
gastos$.subscribe(...);   // reutiliza el resultado (sin nueva petición)

Tres componentes se suscriben al mismo `this.http.get('/api/gastos')`. ¿Qué pasa y cómo se arregla?

Mini-reto

Diseña (en pseudocódigo RxJS) el stream de la lista de gastos de "Mi Bolsillo" que dependa de tres controles: termino$, categoria$ y orden$. Usa combineLatest para juntarlos y map para aplicar los filtros. Luego, para una petición http.get('/api/categorias') que consumen tres componentes, escribe cómo evitarías las peticiones duplicadas.

Qué sigue

Ya orquestas y compartes streams. Falta lo que ningún sistema asíncrono robusto puede ignorar: qué hacer cuando algo FALLA. La próxima lección cubre el manejo de errores y los reintentos en RxJS —catchError, retry— para que un fallo de red no tumbe tu stream ni tu app.