Operadores: mergeAll, mergeMap

Clase 21 de 36 • Curso de Programación Reactiva con RxJS

Uriel Solis Salinas

student•

Son operadores para fucionar a partir de uno o más observables. . merge → Combina los valores de múltiples observables con un solo resultado observable. Será removido en RxJS v8 por mergeWith.

const onClick1$ = fromEvent(document, "click").pipe(
    map(event => event.type) // "click"
);
const onMouseMove$ = fromEvent(document, "mousemove").pipe(
    map(event => event.type) // "mousemove"
);

const eventMergeWith$ = onMouseMove$.pipe(
    mergeWith(onClick1$)
);

eventMergeWith$.subscribe((value) => {
    console.log("obs: ", value)
});

mergeAll → Convierte un observable de orden superior en un observable de primer orden que entrega simultáneamente todos los valores que se emiten en los observables internos. . Observable de orden superior: Observable que emite otros observables.

const onClick2$ = fromEvent(document, "click");
const ordenSuperior$ = onClick2$.pipe(
    map(() => interval(1000))
);

const primerOrden$ = ordenSuperior$.pipe(
    mergeAll()
);

primerOrden$.subscribe(console.log);

mergeMap → Proyecta cada valor de fuente a un observable que se fusiona en la salida del observable. Es una mezcla entre mapear un observador y luego mezclar todos los valores que han sido emitidos.

const letters$ = from(["A", "B", "C"]);
const result$ = letters$.pipe(
    // Anidando el observable letters$ con el observable interval.
    mergeMap(letter => interval(1000).pipe(
        // Anida una letra por cada segundo
        map(
            second => letter + second
        )
    ))
);

result$.subscribe(console.log);

Jorge Saul Gerardo Rojo

student•

Un buen ejemplo es el de un Observable creado a través del operador creacional «of» y ese Observable se mapea a la creación de Observables «Interval» y dichos Observables imprimen el valor que los creo (qué lo pueden ver como un índice) y el nuevo valor emitido por él.

Después se crea otro Observable que unificará las emisiones de todos los Observables internos del Observable de orden superior (Observable que emite Observables) y se suscribe para imprimir los valores.

Nota: «randomMs» envía un número variable para establecerlo como el espacio de tiempo entre los valores emitidos por cada Observable contenido en el Observable de orden superior (higherOrder$).

Opte por prescindir de los imports.

const source$ = of(1, 2, 3);

// Función para generar un tiempo aleatorio:
const randomMs = () => Math.round(Math.random() * 2000);

const higherOrder$ = source$.pipe(
    map((n) =>
        // Se generan los nuevos Observables:
        interval(randomMs()).pipe(map((value) => `${n}.- ${value}`))
    )
);

const lowerOrder$ = higherOrder$.pipe(mergeAll());
lowerOrder$.subscribe(console.log);

Zaidibeth Ramos

student•

mergeWith

Zaidibeth Ramos

student•

mergeAll

const onClick1$ = fromEvent(document, "click").pipe(
    map(event => event.type) // "click"
);
const onMouseMove$ = fromEvent(document, "mousemove").pipe(
    map(event => event.type) // "mousemove"
);

const eventMergeWith$ = onMouseMove$.pipe(
    mergeWith(onClick1$)
);

eventMergeWith$.subscribe((value) => {
    console.log("obs: ", value)
});

const onClick2$ = fromEvent(document, "click");
const ordenSuperior$ = onClick2$.pipe(
    map(() => interval(1000))
);

const primerOrden$ = ordenSuperior$.pipe(
    mergeAll()
);

primerOrden$.subscribe(console.log);

const letters$ = from(["A", "B", "C"]);
const result$ = letters$.pipe(
    // Anidando el observable letters$ con el observable interval.
    mergeMap(letter => interval(1000).pipe(
        // Anida una letra por cada segundo
        map(
            second => letter + second
        )
    ))
);

result$.subscribe(console.log);

const source$ = of(1, 2, 3);

// Función para generar un tiempo aleatorio:
const randomMs = () => Math.round(Math.random() * 2000);

const higherOrder$ = source$.pipe(
    map((n) =>
        // Se generan los nuevos Observables:
        interval(randomMs()).pipe(map((value) => `${n}.- ${value}`))
    )
);

const lowerOrder$ = higherOrder$.pipe(mergeAll());
lowerOrder$.subscribe(console.log);

Operadores: mergeAll, mergeMap

Fundamentos de programación reactiva

¿Por qué deberías aprender programación reactiva con RxJS?

La teoría de la programación reactiva

Introducción a la librería RxJS

Extensiones Reactivas

La idea de la reactividad

Diagrama de canicas

Generación de Observables

Creación de un Observable

Introducción al Proyecto PlatziWordle

Observables: fromEvent

Aplicación de fromEvent en PlatziWordle

Observables: Subject

Aplicación de Subject en PlatziWordle

Observables: from y of

Observables: interval y time

Finalización del Proyecto PlatziWordle

Transformación con Operadores

Introducción al Proyecto PlatziBoard

La idea de un Operador

Operadores: map, reduce y filter

Aplicación de map en PlatziBoard

Operadores de distinción

Operadores de tiempo

Operadores: mergeAll, mergeMap

Aplicación de mergeAll en PlatziBoard

Operadores: takeUntil

Aplicación de TakeUntil en PlatziBoard.

Operadores: pluck

Operadores: startWith, endWith

Finalización del Proyecto PlatziBoard

PlatziWordle con opción de reinicio

Manejo de errores

Manejo de errores en RxJS

Peticiones HTTP con RxJS

ajax

fromFetch

Recomendaciones y conclusión

Documentación de RxJS

Programación Reactiva con RxJS: Fundamentos y Operadores

Recomendaciones y futuro de RxJS

Bonus

Implementación de PlatziBoard en React

Despedida

Próximos pasos con RxJS