RxJS: Reactividad en Javascript

RxJS es una librería para implementar programas basados en eventos y asíncronos utilizando secuencias observables.

rxjs-reactividad-javascript

¿Qué es la programación reactiva?

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).

Conceptos esenciales de RxJS

Los conceptos esenciales en RxJS que resuelven la gestión de eventos asíncronos son:

  • Observable: representa la idea de una colección invocable de valores futuros o eventos.
  • Observer: es una colección de callbacks que sabe cómo escuchar los valores entregados por el Observable.
  • Subscription: representa la ejecución de un Observable; su principal utilidad es permitir cancelar dicha ejecución.
  • Operators: son funciones puras que habilitan un estilo de programación funcional para tratar colecciones mediante operaciones como map, filter, concat, reduce, entre otras.
  • Subject: es equivalente a un EventEmitter y constituye la única manera de realizar una transmisión múltiple (multicasting) de un valor o evento a múltiples Observadores.
  • Schedulers: son despachadores centralizados para controlar la concurrencia, lo que nos permite coordinar cuándo ocurre una operación de cálculo, por ejemplo, utilizando setTimeout, requestAnimationFrame u otros mecanismos.

Instalar RxJS

Para poder importar la librería en nuestros proyectos JS podemos usar el siguiente comando desde la terminal del sistema:

Terminal
npm install rxjs

Ejemplos de uso de la librería RxJS

Observable y Subscribe

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 Observable
observable.subscribe({
next: value => console.log(`Valor emitido: ${value}`),
complete: () => console.log('Observable completado'),
});

Resultado:

Valor emitido: 1
Valor emitido: 2
Valor emitido: 3
Observable completado

Ejemplo con Subject

Un Subject permite emitir valores a múltiples Observers.

import { Subject } from 'rxjs';
// Crear un Subject
const subject = new Subject();
// Suscribir dos Observers al Subject
subject.subscribe(value => console.log(`Observer 1: ${value}`));
subject.subscribe(value => console.log(`Observer 2: ${value}`));
// Emitir valores a través del Subject
subject.next(1);
subject.next(2);
subject.next(3);

Resultado:

Observer 1: 1
Observer 2: 1
Observer 1: 2
Observer 2: 2
Observer 1: 3
Observer 2: 3

Ejemplo con Pipe y operator 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ífico
const 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.

Conclusión

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.