Operadores: map, reduce y filter

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

Contenido del curso

Fundamentos de programación reactiva

Introducción a la librería RxJS

Generación de Observables

Transformación con Operadores

Manejo de errores

29
Manejo de errores en RxJS
07:44 min

Peticiones HTTP con RxJS

Recomendaciones y conclusión

Bonus

35
Implementación de PlatziBoard en React
02:03 min

Despedida

36
Próximos pasos con RxJS
01:07 min

Tomar examen

Comentarios

Manuela Barba Guerra

student•

MIS NOTAS:

Operadores pipeables

pipe(): todos los operadores creacionales tienen este método, genera una cadena de operadores que se pueden enlazar uno tras otro.
map(): itera sobre los valores que obtenemos del observable transformándolos.
filter(): filtra los valores de un observable dada una condición.
reduce(): combina todos los valores emitidos por un observable a través de una función acumuladora.

Uriel Solis Salinas

student•

/* ==== OPERADORES ==== */
/* Todos los generadores de observables tienen un método llamado .pipe() que genera una especie de cadena de operadores que se pueden enlazar uno tras otro para hacer algo que queramos. */

// Operador map
const numbers1$ = from([1, 2, 3, 4, 5, 6, 7, 8]).pipe(
    map(number => number * 2),
    map(number => number ** 2)
);
numbers1$.subscribe(console.log);

// Operador reduce
const numbers2$ = from([1, 2, 3, 4, 5, 6, 7, 8]).pipe(
    reduce((acc, val) => acc + val, 0)
);
numbers2$.subscribe(console.log);

// Operador filter
const numbers3$ = from([1, 2, 3, 4, 5, 6, 7, 8]).pipe(
    filter(number => number > 6)
);
numbers3$.subscribe(console.log);

Alfonso Navarro

company_admin•

Es bueno comprender las cosas, y no solo utilizarlas de forma mecánica...

Ramiro De La Cruz Navarro

student•

pipe: permite generar una cadena de operadores que se pueden enlazar uno tras otro map: transforma un valor directo del observable filter: solo emite los valores si cumple una condición reduce: combina todos los valores emitidos por el observable, usando una función acumuladora

Andrés Villarraga

student•

No entendí la parte que decia "No modifica el Observer", osea, me imaginé que el uso del map sobre un Observer previamente definido, creaía un nuevo Observer al cual suscribirse, pero en este caso es el mismo Observer.

Me podrían explicar ?

Andrés Villarraga

student•

Ya encontré la respuesta, si se puede hacer y sería así:

import { from } from "rxjs";
import { map } from "rxjs/operators";

const numbers$ = from([1,2,3,4,5,6,7,8,9])

numbers$.subscribe(console.log)

numbers$.pipe(map(x => x * 2)).subscribe(
  number => console.log(`Number * 2: ${number}`)
);

El output sería así:

1
2
3
4
5
6
7
8
9
Number * 2: 2
Number * 2: 4
Number * 2: 6
Number * 2: 8
Number * 2: 10
Number * 2: 12
Number * 2: 14
Number * 2: 16
Number * 2: 18

Marcelo Arias

teacher•

¡Hola Andy!

Me refería a que: Internamente en RxJS, cada vez que usamos un operador (como map, reduce o filter) sobre un observable, este observable no es modificado, sino que se crea un nuevo observable, y en este nuevo observable se reflejan los cambios (producidos por el operador).

Platzi Team

student•

Map, Reduce y Filter:

Estos operadores te permiten manipular y transformar flujos de datos de manera divertida y creativa.

Map

Imagina que tienes una caja de crayones de colores y quieres pintar algunas imágenes. El operador map en RxJS es como una varita mágica que te permite transformar cada crayón en algo nuevo y emocionante.

Con el operador map, puedes tomar cada crayón y convertirlo en un color diferente o en algo completamente nuevo. Por ejemplo, puedes convertir un crayón rojo en un crayón azul, un crayón verde en un crayón amarillo, o incluso convertir un crayón en una varita mágica.
El operador map te permite transformar los elementos de un flujo de datos uno por uno. Puedes aplicar una función a cada elemento y obtener un nuevo elemento transformado.

Reduce

Ahora, supongamos que tienes una alcancía llena de monedas y quieres saber cuánto dinero tienes en total. El operador reduce en RxJS es como un contador mágico que te ayuda a agregar todos los valores de una colección y obtener un resultado final.

Con el operador reduce, puedes sumar todos los valores uno por uno para obtener un total. Por ejemplo, puedes sumar el valor de cada moneda para saber cuánto dinero tienes en total.
El operador reduce te permite combinar todos los elementos de un flujo de datos en un solo resultado. Puedes aplicar una función que acumula y combina los valores para obtener un valor final.

Filter

Ahora, imagina que tienes una bolsa llena de juguetes y quieres encontrar solo los juguetes más grandes y divertidos. El operador filter en RxJS es como un detector mágico que te ayuda a encontrar los juguetes especiales que cumplen ciertas condiciones.

Con el operador filter, puedes examinar cada juguete y decidir si cumple con ciertos criterios. Por ejemplo, puedes encontrar solo los juguetes de color rojo, los juguetes que hacen ruido o los juguetes que tienen forma de animal.
El operador filter te permite seleccionar solo los elementos de un flujo de datos que cumplen una determinada condición. Puedes aplicar una función que evalúa cada elemento y decides si debe ser incluido en el nuevo flujo de datos.

En resume:

El operador map transforma cada elemento en algo nuevo y emocionante.
El operador filter selecciona solo los elementos que cumplen ciertas condiciones.
El operador reduce combina todos los elementos en un solo resultado.

/* ==== OPERADORES ==== */
/* Todos los generadores de observables tienen un método llamado .pipe() que genera una especie de cadena de operadores que se pueden enlazar uno tras otro para hacer algo que queramos. */

// Operador map
const numbers1$ = from([1, 2, 3, 4, 5, 6, 7, 8]).pipe(
    map(number => number * 2),
    map(number => number ** 2)
);
numbers1$.subscribe(console.log);

// Operador reduce
const numbers2$ = from([1, 2, 3, 4, 5, 6, 7, 8]).pipe(
    reduce((acc, val) => acc + val, 0)
);
numbers2$.subscribe(console.log);

// Operador filter
const numbers3$ = from([1, 2, 3, 4, 5, 6, 7, 8]).pipe(
    filter(number => number > 6)
);
numbers3$.subscribe(console.log);

import { from } from "rxjs";
import { map } from "rxjs/operators";

const numbers$ = from([1,2,3,4,5,6,7,8,9])

numbers$.subscribe(console.log)

numbers$.pipe(map(x => x * 2)).subscribe(
  number => console.log(`Number * 2: ${number}`)
);

Operadores: map, reduce y filter

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