Operadores: map, reduce y filter

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

Cursos Empresas Blog Live Conf Eventos Precios

0:007:40

Operadores: map, reduce y filter

Curso de Programación Reactiva con RxJS

Clase 17 de 36

Clase 17 / 36

Platzi Team

Hace 3 años

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.

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

Operadores: map, reduce y filter