Programación reactiva en TypeScript: la biblioteca RxJS

Programación reactiva en TypeScript: guía completa de RxJS

La programación reactiva es un paradigma de desarrollo orientado a flujos de datos asíncronos y la propagación de cambios. En el ecosistema de TypeScript, la herramienta más potente para implementar este paradigma es la biblioteca RxJS (Reactive Extensions for JavaScript). RxJS permite trabajar con eventos, solicitudes asíncronas y estados de la aplicación como secuencias de datos que se pueden transformar, combinar y filtrar mediante operadores declarativos.

Conceptos fundamentales de RxJS

En el núcleo de RxJS hay tres entidades clave:

• Observable — fuente de datos que puede generar valores a lo largo del tiempo. Análogo a un arreglo, pero los elementos aparecen de forma asíncrona.
• Observer — consumidor de datos que reacciona a tres tipos de eventos: next (nuevo valor), error (error) y complete (finalización del flujo).
• Subscription — objeto que representa la ejecución de un Observable. Permite cancelar la suscripción y liberar recursos.

import { Observable } from 'rxjs';

const observable = new Observable<number>(subscriber => {  subscriber.next(1);  subscriber.next(2);  subscriber.next(3);  setTimeout(() => {    subscriber.next(4);    subscriber.complete();  }, 1000);});

const subscription = observable.subscribe({  next: (value) => console.log(`Recibido: ${value}`),  error: (err) => console.error(`Error: ${err}`),  complete: () => console.log('Flujo completado')});

// Cancelar suscripción después de 500 mssetTimeout(() => subscription.unsubscribe(), 500);

Operadores de RxJS: base de las transformaciones reactivas

Los operadores son funciones puras que toman un Observable y devuelven un nuevo Observable, sin modificar el original. Se dividen en varias categorías:

• Creación: of, from, interval, fromEvent
• Transformación: map, pluck, scan, buffer
• Filtrado: filter, take, skip, distinctUntilChanged
• Combinación: merge, concat, combineLatest, zip
• Manejo de errores: catchError, retry, retryWhen

import { fromEvent, interval } from 'rxjs';import { map, filter, debounceTime, distinctUntilChanged } from 'rxjs/operators';

// Ejemplo: búsqueda reactiva con debounceconst searchInput = document.getElementById('search') as HTMLInputElement;const input$ = fromEvent(searchInput, 'input').pipe(  map(event => (event.target as HTMLInputElement).value),  filter(text => text.length >= 3),  debounceTime(300),  distinctUntilChanged());

input$.subscribe(searchTerm => {  console.log(`Búsqueda: ${searchTerm}`);  // Realizar solicitud HTTP});

Subject: flujos calientes y fríos

Subject es un tipo especial de Observable que es tanto observador como observable. Permite multidifundir (distribuir) el mismo valor a múltiples suscriptores. Principales variantes:

• Subject — básico, solo transmite nuevos valores
• BehaviorSubject — almacena el último valor y lo entrega a nuevos suscriptores
• ReplaySubject — almacena en búfer los últimos N valores
• AsyncSubject — solo emite el último valor después de que el flujo se completa

import { BehaviorSubject } from 'rxjs';

// Gestión del estado de la aplicación