Seleccionar página

En la programación reactiva (con el uso de la librería RxJS) estamos muy acostumbrados a trabajar con los observables, pero los observables simples son unidifusión (cada observador suscrito posee una ejecución independiente del observable), en cambio los sujetos (Subjects) son multidifusión. ¿Qué quiere decir esto?

Por ejemplo, que cada vez que tengamos una suscripción a un observable no tendremos el mismo valor (nota: observables fríos que son los que utilizaremos más a menudo, hay observables calientes en RxJS que sí podrían emitir el mismo valor).

Por ejemplo:

Como podéis ver en la segunda suscripción nos devuelve un valor diferente que la primera.

Ahora bien,

¿Qué es un sujeto o Subject en RxJS?

Un sujeto RxJS es un tipo especial de observable que permite que los valores se multipliquen a muchos observadores. Mientras que los observables simples son unidifusión (cada observador suscrito posee una ejecución independiente del observable), los sujetos son multidifusión. Un sujeto es como un observable, pero puede hacer multidifusión para muchos observadores.

Al Subject le asignamos un nuevo valor a través de la función next(): subject.next(valor)

Ejemplo:

Este script en Angular nos mostraría los siguientes resultados en consola:

Pero aquí tenemos el problema de que en algunos casos necesitamos que el Subject ya tenga un valor por defecto o inicial para que no nos muestre un valor null o undefined de inicio, aquí entra el Behaviour Subject.

¿Qué es un Behaviour Subject?

Una de las variantes de los Subjects es el BehaviorSubject, que tiene una noción de «el valor actual», con lo que almacena el último valor emitido a sus consumidores, y cada vez que un nuevo observador se suscribe, recibirá inmediatamente el «valor actual» del BehaviorSubject. Pero también necesita un valor inicial al definirlo.

Ejemplo de uso:

Este script en Angular nos mostraría los siguientes resultados en consola:

Bueno, espero que os haya servido. Podéis encontrar más información en la documentación de RxJS:

https://rxjs-dev.firebaseapp.com/guide/subject

(Visitado 121 veces, 1 visitas hoy)