Angular 21 de Cero a Experto / RxJS y observables a gran escala
Combinar streams y multicast (share)
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:
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 ordencombineLatest 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
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.