TypeScript / mergeMap

Bienvenidos sean a este post, hoy veremos un nuevo operador de observables.

Este operador es usado para devolver un solo valor desde un stream Observable, por lo cual no es necesario suscribirse a un Observable interno como vimos en el post anterior. Para entender como trabaja volveremos a trabajar con ese codigo pero lo modificaremos de la siguiente manera:

import {Observable, from, of} from 'rxjs';
import {mergeMap} from 'rxjs/operators';

interface IProductoId {
        id: number;
}
interface IProductoDesc {
        nombre: string;
        desc: string;
}

const listaProductos = <Observable<IProductoId>>from(
        [{ id: 1 }, { id: 2 }, { id: 3 }]);
function getNombre(id: number): Observable<IProductoDesc> {
        return of(
                {
                        id: id,
                        nombre: 'Producto_' + id,
                        desc: 'Descripcion_' + id
                }
        );
}

listaProductos.pipe(
        mergeMap((valor: IProductoId): Observable<IProductoDesc> => {
                console.log('Id Producto: ' + valor.id);
                return getNombre(valor.id);
        })
).subscribe((valor: IProductoDesc) => {
        console.log('nombre producto: ' + valor.nombre);
        console.log('descripcion producto: ' + valor.desc);
});

Si lo comparan con el codigo del post anterior las diferencias son minimas. Primero importaremos todo lo necesario como son el tipo y las funciones asi como luego el operador en cuestion. Las interfaces son para el id del producto y para la descripcion de este, respectivamente. Generamos una lista de id de productos que emitira con from y luego una funcion que emite mediante of los datos del producto en base al id recibido. Hasta aca es lo mismo con respecto a lo visto en el post anterior. A partir del siguiente bloque comienza el primer cambio.

En este caso a la constante con la lista de productos le aplicamos el pipe, como antes, pero ahora en lugar de usar a map le aplicamos a mergeMap, el argumento sigue siendo del mismo tipo pero ahora le indicamos que devolvera un Observable del tipo de descripcion. El bloque sigue siendo el mismo donde mostraremos el valor del id y devolveremos el resultado de la funcion getNombre. Luego tenemos nuevamente el subscribe para procesar lo emitido por la funcion anterior, en este caso recibe el tipo de dato de descripcion y directamente muestra estos valores, comparemos este bloque con el codigo anterior:

).subscribe((valor: Observable<IProductoDesc>) => {
        valor.subscribe((valor: IProductoDesc) => {
                console.log('nombre producto: ' + valor.nombre);
                console.log('descripcion producto: ' + valor.desc);
        });
});

Vean que ahora nuestro nuevo codigo recibe directamente del tipo de la segunda suscripcion y por ende no necesitamos de la anterior lo cual no solo nos ahorra un paso sino que cumple lo comentamos al momento de describir su conducta. Esto no solo facilita la aplicacion sino que lo hace mas leible y facil de comprender ante un eventual error. Compilemos y veamos como es su salida:

$ node mirar.js
Id Producto: 1
nombre producto: Producto_1
descripcion producto: Descripcion_1
Id Producto: 2
nombre producto: Producto_2
descripcion producto: Descripcion_2
Id Producto: 3
nombre producto: Producto_3
descripcion producto: Descripcion_3
$

Como pueden ver obtuvimos el mismo resultado donde cada stream fue procesado correctamente.

En resumen, hoy hemos visto a mergeMap, que es, para que srive, como se utiliza, su ventaja para trabajar con un codigo visto anteriormente, y aplicamos un ejemplo para visualizar mejor la diferencia. Espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.