58. Programación reactiva con RxJS

La programación reactiva es un paradigma de programación centrado en los flujos de datos y la propagación de cambios. Esto significa que, en lugar de tratar con valores que cambian con el tiempo, como es común en la programación imperativa, en la programación reactiva tratamos con secuencias de eventos a lo largo del tiempo. En este capítulo, analizaremos la programación reactiva con RxJS en el desarrollo front-end.

RxJS es una biblioteca para componer programas asincrónicos y basados ​​en eventos utilizando secuencias observables. Es perfecto para gestionar eventos, especialmente cuando necesita gestionar una gran cantidad de eventos que llegan con el tiempo. RxJS le permite crear un flujo de eventos y reaccionar ante ellos de forma declarativa, sin preocuparse por detalles de bajo nivel.

Para comenzar con RxJS, primero debemos comprender el concepto de Observables. Un Observable es una representación de cualquier conjunto de valores durante cualquier período de tiempo. Puede ser un valor único, una secuencia de valores o un flujo continuo de valores. Los observables son la base de la programación reactiva con RxJS.

Un Observable por sí solo no hace nada. Necesita un Observador para reaccionar ante los valores que emite. Un observador es solo un objeto con tres métodos: siguiente, error y completo. Se llama al método next para recibir el siguiente valor del Observable, se llama al método error si hay un error durante la generación del valor y se llama al método completo cuando no hay más valores para generar.

Para crear un Observable, puede utilizar la función de creación de RxJS. Por ejemplo, para crear un Observable que genere números del 1 al 5, puedes hacer lo siguiente:

fuente constante$ = Rx.Observable.create(observador => {
  para (sea i = 1; i <= 5; i++) {
    observador.siguiente(i);
  }
  observador.completo();
});

Para suscribirse a un Observable y comenzar a recibir valores, utiliza el método de suscripción del Observable. Por ejemplo, para imprimir los valores del Observable que acabamos de crear, harías lo siguiente:

fuente$.suscribir(
  valor => console.log(valor),
  error => consola.error(error),
  () => console.log('Completo')
);

Además de crear Observables desde cero, también puedes convertir otras cosas en Observables, como eventos, promesas, matrices, etc. RxJS proporciona muchas funciones de utilidad para esto, llamadas operadores.

Los operadores son funciones que le permiten manipular Observables de varias maneras. Por ejemplo, puede filtrar valores, asignar valores a otros valores, combinar varios Observables en uno, etc. Los operadores son la herramienta principal que utiliza para componer lógica en RxJS.

Para usar un operador, llama al método pipe del Observable y le pasa el operador. Por ejemplo, para filtrar los valores pares de nuestro Observable, podrías hacer lo siguiente:

constante par$ = fuente$.pipe(
  Rx.operators.filter(valor => valor % 2 === 0)
);

incluso$.subscribe(valor => console.log(valor)); // registros 2, 4

En resumen, la programación reactiva con RxJS es una forma poderosa de manejar eventos y flujos de datos en aplicaciones front-end. Con observables y operadores, puede expresar lógica compleja de forma declarativa y manejable.