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
.
Indice
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.
Subscribers
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.
Subscribers
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.