ReactiveX

Para secuencias de datos, combina las ventajas de los iteradores con la flexibilidad de la programación asíncrona basada en eventos. Además, funciona como una promesa simple, eliminando la compleja estructura que resulta de múltiples capas de funciones de devolución de llamada.

ReactiveX es una combinación de ideas de los patrones observador e iterador y de la programación funcional . ^{[ 2 ]}

Un observador se suscribe a una secuencia observable. La secuencia envía los elementos al observador uno a uno, generalmente mediante la llamada a la función de devolución de llamada proporcionada. El observador procesa cada elemento antes de procesar el siguiente. Si llegan muchos eventos de forma asíncrona, deben almacenarse en una cola o descartarse. En ReactiveX, un observador nunca recibirá una llamada con un elemento fuera de orden ni (en un contexto multihilo) antes de que la función de devolución de llamada haya finalizado para el elemento anterior. Las llamadas asíncronas siguen siendo asíncronas y pueden gestionarse devolviendo un observable.

Es similar al patrón de iteradores, ya que si ocurre un error fatal, notifica al observador por separado (llamando a una segunda función). Cuando se han enviado todos los elementos, finaliza (y notifica al observador llamando a una tercera función). La API de Reactive Extensions también toma prestados muchos de sus operadores de los operadores de iteradores de otros lenguajes de programación.

Reactive Extensions es diferente de la programación reactiva funcional , como se explica en la Introducción a Reactive Extensions:

A veces se le llama "programación reactiva funcional", pero este término es inapropiado. ReactiveX puede ser funcional y reactivo, pero la "programación reactiva funcional" es algo distinto. Una diferencia fundamental radica en que la programación reactiva funcional opera sobre valores que cambian continuamente con el tiempo, mientras que ReactiveX opera sobre valores discretos que se emiten a lo largo del tiempo. (Para obtener información más precisa sobre la programación reactiva funcional, consulte el trabajo de Conal Elliott). ^{[ 2 ]}

Un operador es una función que toma un observable (el origen) como primer argumento y devuelve otro observable (el destino u observable externo). Luego, por cada elemento que emite el observable de origen, aplica una función a dicho elemento y lo emite en el observable de destino. Incluso puede emitir otro observable en el observable de destino. Esto se denomina observable interno.

Un operador que emite observables internos puede ser seguido por otro operador que de alguna manera combina los elementos emitidos por todos los observables internos y emite el elemento en su observable externo. Algunos ejemplos son:

• switchAll– se suscribe a cada nuevo observable interno tan pronto como se emite y se da de baja del anterior.
• mergeAll– Se suscribe a todas las observables internas a medida que se emiten y produce sus valores en el orden en que los recibe.
• concatAll– Se suscribe a cada observable interno en orden y espera a que se complete antes de suscribirse al siguiente observable.

Los operadores se pueden encadenar para crear flujos de datos complejos que filtran eventos según ciertos criterios. Se pueden aplicar varios operadores al mismo observable.

Algunos de los operadores que se pueden usar en Reactive Extensions pueden resultar familiares para los programadores que usan lenguajes de programación funcional, como map, reduce, group y zip. ^{[ 3 ]} Hay muchos otros operadores disponibles en Reactive Extensions, aunque los operadores disponibles en una implementación particular para un lenguaje de programación pueden variar.

import { of , Observable , map , reduce } from 'rxjs' ;const source : Observable <number> = of ( 1 , 2 , 3 , 4 , 5 ) ; source.pipe ( map ( ( value ) => value * 2 ) , reduce (( sum , value ) = > sum + value , 0 ) ) . subscribe ({ next : ( value ) => { console.log ( value ) ; }, error : ( error ) => { console.error ( error ) ; }, complete : () => { console.log ( ' done ' ) ; } , } );

import { BehaviorSubject , scan } from 'rxjs' ; import { rml } from 'rimmel' ;const count = new BehaviorSubject ( 0 ). pipe ( scan ( x => x + 1 ) );document.body.innerHTML = rml ` <button onclick  =" ${ counter } " >click</button> <p> El recuento  es: <span> ${ counter } </span></p> ` ;