Cómo utilizar sujetos RxJS, sujetos de comportamiento y sujetos de reproducción

Introducción

Un sujeto en RxJS es un híbrido especial que puede actuar como observable y observador al mismo tiempo. De esta manera, se pueden introducir datos en un sujeto y los suscriptores del sujeto, a su vez, recibirán esos datos introducidos.

Los sujetos son útiles para la multidifusión o cuando una fuente de datos no se transforma fácilmente en un observable. Es fácil abusar de los sujetos y, a menudo, como se ilustra en esta excelente publicación , se pueden evitar cuando se puede crear una fuente observable de otra manera.

En esta publicación, aprenderá sobre sujetos, sujetos de comportamiento y sujetos de repetición.

Prerrequisitos

Si deseas seguir este artículo, necesitarás:

• Cierta familiaridad con los observadores y observables de RxJS .

Este tutorial fue verificado con rxjsv7.3.0.

Uso de sujetos

La creación de un tema comienza con una nueva instancia de RxJS Subject:

const mySubject = new Rx.Subject();

Se pueden crear múltiples suscripciones e internamente el sujeto mantendrá una lista de suscripciones:

const subscription1 = mySubject.subscribe(x = console.log(`${x} ${x}`));const subscription2 = mySubject.subscribe(x = console.log(x.toUpperCase()));

Los datos se pueden introducir en el sujeto mediante su nextmétodo:

mySubject.next('Hello!');

Al ejecutar este script se obtendrá el siguiente resultado:

OutputHello! Hello!HELLO!

Para subscription1, este código tomará la entrada y la mostrará dos veces. Para subscription2, este código tomará la entrada y aplicará toUpperCase().

Cuando se ingresan datos en un tema, estos pasarán por su lista interna de suscripciones y nextlos datos en cada una de ellas.

Envío de datos a suscripciones

A continuación se muestra un ejemplo que demuestra cómo se envían los datos a las suscripciones:

const mySubject = new Rx.Subject();mySubject.next(1);const subscription1 = mySubject.subscribe(x = {  console.log('From subscription 1:', x);});mySubject.next(2);const subscription2 = mySubject.subscribe(x = {  console.log('From subscription 2:', x);});mySubject.next(3);subscription1.unsubscribe();mySubject.next(4);

Con este ejemplo, aquí está el resultado que se imprimirá en la consola:

OutputFrom subscription 1: 2From subscription 1: 3From subscription 2: 3From subscription 2: 4

Observe cómo las suscripciones que llegan tarde pierden algunos de los datos que se han introducido en el tema. Veremos cómo solucionar esto más adelante con temas de comportamiento o temas de reproducción .

Transmisión múltiple de datos a todas las suscripciones

El verdadero poder de los sujetos entra en juego con la multidifusión , donde un sujeto se pasa como observador a un observable, lo que significa que, cuando el observable emite, los datos se transmiten en multidifusión a todas las suscripciones del sujeto:

He aquí un ejemplo en el que un trickleWordsobservable emite una palabra cada 750 ms.

const mySubject = new Rx.Subject();const words = ['Hot Dog', 'Pizza', 'Hamburger'];const trickleWords = Rx.Observable.zip(  Rx.Observable.from(words),  Rx.Observable.interval(750),  word = word);const subscription1 = mySubject.subscribe(x = {  console.log(x.toUpperCase());});const subscription2 = mySubject.subscribe(x = {  console.log(    x      .toLowerCase()      .split('')      .reverse()      .join('')  );});trickleWords.subscribe(mySubject);

Esto producirá el siguiente resultado después de que se hayan emitido todos los valores:

OutputHOT DOGgod tohPIZZAazzipHAMBURGERregrubmah

Para subscription1, la matriz de wordsse ha modificado con toUpperCase(). Para subscription2, la matriz de wordsse ha modificado con toLowerCase()y “reverse()`.

UsandoasObservable

El asObservableoperador se puede utilizar para transformar un sujeto en un observable. Esto puede resultar útil cuando se desea exponer los datos del sujeto, pero al mismo tiempo evitar que se introduzcan datos en el sujeto de forma inadvertida:

const mySubject = new Rx.Subject();const myObservable = mySubject.asObservable();mySubject.next('Hello');myObservable.next('World!');

Esto producirá el siguiente resultado:

OutputTypeError: myObservable.next is not a function

myObservableno posee next, error, o complete.

Manejo de errores

Cuando un tema se completa o se produce un error, todas las suscripciones internas también se completan o se produce un error:

const mySubject = new Rx.Subject();const subscription1 = mySubject.subscribe(null, error =  console.log('From subscription 1:', error.message));const subscription2 = mySubject.subscribe(null, error =  console.log('From subscription 2:', error.message));mySubject.error(new Error('Error!'));

Esto producirá el siguiente resultado:

OutputFrom subscription 1: Error!From subscription 2: Error!

Se han generado mensajes de error.

Uso de temas de reproducción

Como se mencionó anteriormente, las suscripciones tardías a temas no incluirán los datos que se emitieron anteriormente. Los temas de reproducción pueden ayudar con eso al mantener un búfer de valores anteriores que se emitirán a nuevas suscripciones.

A continuación se muestra un ejemplo de uso para temas de reproducción donde se conserva un búfer de 2 valores anteriores y se emite en nuevas suscripciones:

const mySubject = new Rx.ReplaySubject(2);mySubject.next(1);mySubject.next(2);mySubject.next(3);mySubject.next(4);mySubject.subscribe(x = {  console.log('From subscription 1:', x);});mySubject.next(5);mySubject.subscribe(x = {  console.log('From subscription 2:', x);});

Esto producirá el siguiente resultado:

OutputFrom subscription 1: 3From subscription 1: 4From subscription 1: 5From subscription 2: 4From subscription 2: 5

Se ha almacenado un buffer de 2 valores.

Uso de sujetos de comportamiento

Los temas de comportamiento son similares a los temas de reproducción pero volverán a emitir solo el último valor emitido o un valor predeterminado si no se ha emitido ningún valor previamente:

const mySubject = new Rx.BehaviorSubject('Hello!');mySubject.subscribe(x = {  console.log('From subscription 1:', x);});mySubject.next(5);mySubject.subscribe(x = {  console.log('From subscription 2:', x);});

Esto producirá el siguiente resultado:

OutputFrom subscription 1: Hello!From subscription 1: 5From subscription 2: 5

Hello!Se emitió el valor predeterminado .

Conclusión

En esta publicación, aprendiste sobre sujetos, sujetos de comportamiento y sujetos de repetición.

Continúe su aprendizaje con Introducción a los operadores de almacenamiento en búfer de RxJS , RxJS: el operador From y Cómo usar el operador takeUntil de RxJS para administrar suscripciones de forma declarativa .