RxJS es una librería para implementar programas basados en eventos y asíncronos utilizando secuencias observables.
En la actualidad, las aplicaciones deben gestionar grandes cantidades de información en tiempo real y responder de manera eficiente a interacciones del usuario, actualizaciones de datos y eventos del sistema.
La programación reactiva es un paradigma de programación diseñado para gestionar estos escenarios. A diferencia de la programación tradicional, donde el código sigue un modelo secuencial y los cambios suelen ser explícitamente gestionados por el programador, la programación reactiva estructura las aplicaciones en torno a flujos de datos y propagación de eventos. Las aplicaciones reaccionan automáticamente a los eventos a medida que ocurren. Los datos fluyen a través de flujos reactivos (streams), y cualquier cambio en las fuentes de datos se propaga automáticamente a las partes o componentes interesados del sistema. Esto permite que el código sea más declarativo y menos imperativo, lo que resulta en aplicaciones más predecibles, modulares y fáciles de escalar.
En un contexto de JavaScript, la programación reactiva suele implementarse mediante bibliotecas como RxJS (Reactive Extensions for JavaScript).
Los conceptos esenciales en RxJS que resuelven la gestión de eventos asíncronos son:
map
, filter
, concat
, reduce
, entre otras.setTimeout
, requestAnimationFrame
u otros mecanismos.Para poder importar la librería en nuestros proyectos JS podemos usar el siguiente comando desde la terminal del sistema:
npm install rxjs
Crear un Observable que emite valores del 1 al 3 y luego se completa. Luego nos subscribimos para que cada vez que se emita un dato se ejecute la función next
y finalmente complete
:
import { Observable } from 'rxjs';
const observable = new Observable(subscriber => { subscriber.next(1); subscriber.next(2); subscriber.next(3); subscriber.complete();});
// Suscribirse al Observableobservable.subscribe({ next: value => console.log(`Valor emitido: ${value}`), complete: () => console.log('Observable completado'),});
Resultado:
Valor emitido: 1Valor emitido: 2Valor emitido: 3Observable completado
Un Subject
permite emitir valores a múltiples Observers.
import { Subject } from 'rxjs';
// Crear un Subjectconst subject = new Subject();
// Suscribir dos Observers al Subjectsubject.subscribe(value => console.log(`Observer 1: ${value}`));subject.subscribe(value => console.log(`Observer 2: ${value}`));
// Emitir valores a través del Subjectsubject.next(1);subject.next(2);subject.next(3);
Resultado:
Observer 1: 1Observer 2: 1Observer 1: 2Observer 2: 2Observer 1: 3Observer 2: 3
map
y filter
import { fromEvent } from 'rxjs';import { map, filter } from 'rxjs/operators';
// Detectar clics en un botón y filtrar los que tienen un texto específicoconst button = document.getElementById('myButton');const clicks$ = fromEvent(button, 'click'); // Crear un flujo de datos para clics
clicks$ .pipe( map(event => event.target.innerText), // Extraer el texto del botón filter(text => text === 'Aceptar') // Solo continuar si el texto es "Aceptar" ) .subscribe(text => console.log(`Botón clicado con texto: ${text}`));
En este ejemplo, cada vez que el usuario hace clic en el botón, el evento se transforma y filtra los que tienen un texto específico.
La programación reactiva permite construir aplicaciones modernas, eficientes y escalables al adoptar un enfoque basado en flujos de datos y eventos de una forma estructurada y clara, con funciones y métodos eficaces y probados que nos facilita la librería RxJS.