RxJS: Subject vs BehaviorSubject

RxJS è una libreria Javascript per creare codice asincrono ed event-driven.

E’ particolarmente nota perché utilizzata in Angular.

In questo articolo vedremo le differenze tra Subject e BehaviorSubject.

RxJS, la libreria per il reactive programming

Dal sito ufficiale di RxJS sono riassunte le principali caratteristiche della libreria, che sono:

• Observable: rappresenta l’idea di una collezione invocabile, che potrà contenere eventi o valori futuri
• Observer: è una collezione di callbacks che permette di gestire le informazioni emesse dagli Observable
• Subscription: rappresenta l’esecuzione di un Observable, usato principalmente per cancellarne l’esecuzione
• Operators: sono funzioni che permettono di gestire le collezioni con uno stile di programmazione funzionale
• Subject: servono per effettuare il multicasting di informazioni, ovvero trasmettere un’informazione a più Observers
• Schedulers: sono dispatchers centralizzati per controllare la concorrenza delle informazioni, permettendo di coordinare il flusso di informazioni.

Propagare informazioni: i Subjects

I Subjects permettono di inviare informazioni a più Observers. Ciascun Observer deve effettuare una Subscription per poter ricevere informazioni.
Ecco un esempio pratico:

const subject: Subject<number> = new Subject();
subject.next(1);
const primaSubscription = subject.subscribe((value) => {console.log('primaSubscription', value)});
subject.next(2);
const secondaSubscription = subject.subscribe((value) => {console.log('secondaSubscription', value)});
subject.next(3);

Il precedente codice, se eseguito, produrrà il seguente risultato:

primaSubscription 2
primaSubscription 3
secondaSubscription 3

Questo comportamento è dovuto al fatto che i Subject informano i Subscribers solo dei valori notificati dopo la Subscription di un determinato Subscriber.
Ecco perché, nel codice precedente, il valore 1 non viene ricevuto da nessun Subscriber, mentre il valore 2 viene ricevuto solo dalla prima Subscription, ma non dalla seconda.
Il codice mostrato in precedenza è visionabile su StackBlitz.

I Subjects, un esempio concreto

Nel riquadro sottostante potrai vedere un’applicazione dei Subject di RxJS. Tramite i pulsanti infatti potrai aggiungere o rimuovere Subscribers, e propagare il messaggio contenuto nell’input text field posto sotto i pulsanti.

Come puoi vedere, il messaggio viene propagato solo quando il pulsante “Propaga” viene cliccato.

I BehaviorSubjects

I BehaviorSubjects hanno un comportamento simile ai Subjects, con due differenze importanti:

• Per istanziare un BehaviorSubject, occorre fornire un valore iniziale
• Qualunque Subscriber riceve l’ultimo valore propagato dal BehaviorSubject non appena effettua la Subscription.

Ecco un esempio pratico:

const subject: BehaviorSubject<number> = new BehaviorSubject(0);
subject.next(1);
const primaSubscription = subject.subscribe((value) => {console.log('primaSubscription', value)});
subject.next(2);
const secondaSubscription = subject.subscribe((value) => {console.log('secondaSubscription', value)});
subject.next(3);

Il precedente codice, se eseguito, produrrà il seguente risultato:

primaSubscription 1
primaSubscription 2
secondaSubscription 2
primaSubscription 3
secondaSubscription 3

Il codice mostrato in precedenza è visionabile su StackBlitz.

I BehaviorSubjects, un esempio concreto

Nel riquadro sottostante potrai vedere un’applicazione dei BehaviorSubjects di RxJS. Tramite i pulsanti infatti potrai aggiungere o rimuovere Subscribers, e propagare il messaggio contenuto nell’input text field posto sotto i pulsanti.

Conclusioni

In questo articolo abbiamo analizzato le differenze tra i BehaviorSubjects e i Subjects in RxJS.

Se desiderassi apprendere di più riguardo a questa libreria, ti invito a leggere gli articoli nella sezione dedicata a RxJS.