Documentación de RxJS

Clase 32 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

Wilmer David Cedeño Mendoza

student•

Funcionamiento de concatMap concatMap tiene un funcionamiento similar a mergeMap, excepto que concatMap, espera que el observable interno envie un mensaje de complete, para recibir el siguiente valor de entrada.

import { fromEvent, concatMap, mergeMap, interval, take } from "rxjs";

const clicks = fromEvent(document, "click");
const result = clicks.pipe(mergeMap((ev) => interval(500).pipe(take(3))));
result.subscribe((x) => console.log(x));

Output si dieramos 2 clicks de forma consecutiva:

Output si remplazamos concatMap con mergeMap, dando 2 clicks de forma consecutiva:

Reinaldo Mendoza

student•

No había visto esa forma de navegar en la documentación, muy interesante ese asistente que tiene

Jorge Luis Silva Medina

student•

forkJoin es un operador en RxJS que combina múltiples observables en un solo observable y emite un único valor que contiene los valores finales de todos los observables combinados cuando todos los observables han emitido su último valor y han completado.

En otras palabras, forkJoin espera a que todos los observables se completen y luego emite un único valor que contiene un arreglo con los últimos valores emitidos por cada observable combinado.

import { forkJoin, of, timer } from 'rxjs';
import { delay } from 'rxjs/operators';

const observable1 = of('Valor 1').pipe(delay(1000)); // Emite 'Valor 1' después de 1 segundo
const observable2 = of('Valor 2').pipe(delay(2000)); // Emite 'Valor 2' después de 2 segundos
const observable3 = of('Valor 3').pipe(delay(3000)); // Emite 'Valor 3' después de 3 segundos

forkJoin({
  observable1,
  observable2,
  observable3
}).subscribe({
  next: (result) => console.log('Resultado:', result),
  error: (error) => console.error('Error:', error),
  complete: () => console.log('Completado')
});

Zaidibeth Ramos

student•

ame el operator decision tree, me dijo lo que queria y tenia que hacer.

Jefferson Ramos

student•

Muy buena documentacion.

import { fromEvent, concatMap, mergeMap, interval, take } from "rxjs";

const clicks = fromEvent(document, "click");
const result = clicks.pipe(mergeMap((ev) => interval(500).pipe(take(3))));
result.subscribe((x) => console.log(x));

import { forkJoin, of, timer } from 'rxjs';
import { delay } from 'rxjs/operators';

const observable1 = of('Valor 1').pipe(delay(1000)); // Emite 'Valor 1' después de 1 segundo
const observable2 = of('Valor 2').pipe(delay(2000)); // Emite 'Valor 2' después de 2 segundos
const observable3 = of('Valor 3').pipe(delay(3000)); // Emite 'Valor 3' después de 3 segundos

forkJoin({
  observable1,
  observable2,
  observable3
}).subscribe({
  next: (result) => console.log('Resultado:', result),
  error: (error) => console.error('Error:', error),
  complete: () => console.log('Completado')
});

Documentación de RxJS

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