Observables: fromEvent

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:04

Observables: fromEvent

Curso de Programación Reactiva con RxJS

Clase 8 de 36

Clase 8 / 36

Platzi Team

Hace 3 años

FormEvent

Crea un observable que emite eventos de un determinado elemento.

Vamos al codigo:

import { fromEvent } from 'rxjs';

const onKeyDown$ = fromEvent(document, 'keydown');

En esta sección, se importa la función fromEvent de RxJS. Esta función permite crear un Observable a partir de un evento específico en un elemento del DOM.

Luego, se crea un Observable llamado onKeyDown$ utilizando fromEvent. Este Observable está configurado para escuchar el evento de tecla presionada (keydown) en todo el documento (document).

const observableKeyDown = {
  next: (event) => { console.log(event) },
};

Se define un objeto llamado observableKeyDown que tiene un método next. Este método se ejecutará cada vez que se emita un evento por parte del Observable. En este caso, el método simplemente imprime el evento en la consola

onKeyDown$.subscribe(observableKeyDown);

Finalmente, se suscribe el objeto observableKeyDown al Observable onKeyDown$ utilizando el método subscribe(). Esto significa que cada vez que se presione una tecla en el documento, el método next de observableKeyDown se ejecutará y el evento de tecla se imprimirá en la consola.

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

Observables: fromEvent