En RxJS, los Subjects y BehaviorSubjects son dos tipos de emisores de eventos que permiten la comunicación entre diferentes partes de una aplicación, especialmente en escenarios de programación reactiva.
Subjects
Los Subjects en RxJS son una especie de puente entre observables y observadores. Son emisores que permiten que múltiples observadores se suscriban y reciban actualizaciones. A diferencia de los observables tradicionales, que solo emiten datos cuando se suscriben, los Subjects permiten la emisión de eventos o datos de manera manual, es decir, cualquier suscriptor recibirá las emisiones después de que el Subject emita valores.
Casos de uso de Subjects:
- Comunicación entre componentes: Se utilizan comúnmente para permitir la comunicación entre componentes en Angular, especialmente cuando esos componentes no están directamente relacionados en la jerarquía (padre-hijo).
- Streams compartidos: Un Subject puede ser utilizado para compartir un mismo flujo de datos entre varios observadores, algo útil cuando quieres que varias partes de la aplicación respondan a los mismos cambios de estado o eventos.
- Emitir eventos manualmente: Se puede usar un Subject cuando se quiere tener control manual sobre la emisión de eventos, ya que se pueden emitir valores cuando sea necesario utilizando el método
next().
import { Subject } from 'rxjs';
// Creamos un Subject
const subject = new Subject<number>();
// Suscriptor 1
subject.subscribe({
next: (v) => console.log(`Suscriptor 1: Valor recibido ${v}`)
});
// Emitimos un valor
subject.next(1); // Suscriptor 1: Valor recibido 1
// Suscriptor 2
subject.subscribe({
next: (v) => console.log(`Suscriptor 2: Valor recibido ${v}`)
});
// Emitimos más valores
subject.next(2); // Suscriptor 1: Valor recibido 2
// Suscriptor 2: Valor recibido 2
subject.next(3); // Suscriptor 1: Valor recibido 3
// Suscriptor 2: Valor recibido 3
BehaviorSubjects
Un BehaviorSubject es una extensión de los Subjects, pero con una diferencia clave: siempre almacena y emite el último valor emitido a cualquier nuevo suscriptor. Esto significa que, si un componente se suscribe a un BehaviorSubject en un momento posterior, recibirá automáticamente el valor más reciente emitido por el BehaviorSubject, incluso si no estuvo suscrito cuando ese valor fue emitido inicialmente.
Casos de uso de BehaviorSubjects:
- Estado compartido: Un uso común de los BehaviorSubjects es gestionar y compartir estados dentro de una aplicación. Como siempre almacena el último valor, cualquier componente que se suscriba obtendrá el estado actual sin esperar a una nueva emisión.
- Formularios reactivos: En aplicaciones donde se maneja el estado de formularios, los BehaviorSubjects pueden ser útiles para reflejar y compartir el estado actual de los campos de un formulario en diferentes partes de la aplicación.
- Inicialización de componentes: Cuando un componente necesita acceder a un valor inicial o al último valor emitido inmediatamente después de suscribirse, el BehaviorSubject garantiza que el componente reciba la información adecuada en el momento de la suscripción.
import { BehaviorSubject } from 'rxjs';
// Creamos un BehaviorSubject con un valor inicial de 0
const behaviorSubject = new BehaviorSubject<number>(0);
// Suscriptor 1
behaviorSubject.subscribe({
next: (v) => console.log(`Suscriptor 1: Valor recibido ${v}`)
});
// Emitimos un valor
behaviorSubject.next(1); // Suscriptor 1: Valor recibido 1
// Suscriptor 2 se suscribe después de que ya se emitió el valor 1
behaviorSubject.subscribe({
next: (v) => console.log(`Suscriptor 2: Valor recibido ${v}`)
});
// Emitimos más valores
behaviorSubject.next(2); // Suscriptor 1: Valor recibido 2
// Suscriptor 2: Valor recibido 2
behaviorSubject.next(3); // Suscriptor 1: Valor recibido 3
// Suscriptor 2: Valor recibido 3
Diferencia clave entre Subject y BehaviorSubject:
- Un Subject no retiene el último valor emitido. Los suscriptores solo recibirán los eventos emitidos después de su suscripción.
- Un BehaviorSubject siempre proporciona el último valor emitido a los nuevos suscriptores en el momento de su suscripción, lo que lo hace ideal para manejar estados.
En resumen, los Subjects son útiles cuando se necesita transmitir eventos entre componentes, mientras que los BehaviorSubjects son más adecuados para manejar y compartir estados que pueden ser accedidos en cualquier momento.