Operadores: takeUntil

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

Marcelo Arias

teacher•

☑️ El operador takeUntil nos ayuda a completar un observable si otro observable ha emitido un valor.

Platzi Team

student•

Operador TakeUntil

el operador takeUntil en RxJS te permite controlar el flujo de eventos y detenerlo cuando se produce un evento en particular.

<aside> <img src="https://static.platzi.com/media/achievements/piezas-programacion-reactiva-rxjs_badge-92561658-fc14-4ef2-9372-13fc9ae9f8f3.png" alt="https://static.platzi.com/media/achievements/piezas-programacion-reactiva-rxjs_badge-92561658-fc14-4ef2-9372-13fc9ae9f8f3.png" width="40px" /> Es como si estuvieras jugando al fútbol y tuvieras que parar cuando escuchas el silbato del árbitro. </aside>

Imagínate que estás jugando con tus amigos en el parque y tienes una pelota de fútbol. El operador takeUntil es como si alguien te dijera: "Deja de jugar cuando llegue la señal". La señal puede ser cualquier cosa que te indique que debes parar de jugar, como el sonido de un silbato.

import { fromEvent } from "rxjs";
import { takeUntil } from "rxjs/operators";

const onMouseMove$ = fromEvent(document, "mousemove");
const onMouseDown$ = fromEvent(document, "mousedown");

// A través de takeUntil() definimos que cada vez que un evento es enviado por onMouseDown$
// el observable sourceCompleted$ será completado. Y por consiguiente no emitirá más valores (línea 15).
const sourceCompleted$ = onMouseMove$.pipe(takeUntil(onMouseDown$));
sourceCompleted$.subscribe(console.log);

Operadores: takeUntil

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