combineLatest RxJS: come utilizzarlo

combineLatest è uno degli operatori RxJS più utilizzati, soprattutto nelle applicazioni web costruite utilizzando Angular.

In questo articolo vedrai quali siano le sue caratteristiche e come utilizzarlo in maniera efficace.

combineLatest RxJs: interfaccia

L’interfaccia di combineLatest è la seguente:

import { combineLatest } from 'rxjs';
combineLatest([obsOne$, obsTwo$, obsThree$]);

Nell’esempio proposto obsOne$, obsTwo$, obsThree$ sono observables.

RxJs combineLatest: il funzionamento

combineLatest è un operatore che emette gli ultimi valori emessi dagli observables che sono passati nella sua inizializzazione.

Affinché combineLatest inizi ad emettere valori, è necessario che ciascuno degli observables passati come parametro emettano almena una volta.

Nell’immagine animata posta qui sopra puoi vedere la rappresentazione del funzionamento di combineLatest: le prime due linee temporali rappresentano due observables utilizzati per inizializzare combineLatest, il cui comportamento è rappresentato nella terza linea.

Come puoi vedere, spostando nel tempo il momento della prima emissione del secondo observables, si ottiene lo spostamento della prima emissione di combineLatest.

combineLatest RxJs: un esempio pratico

Per aiutarti a comprendere meglio il funzionamento di questo operatore, ho preparato un esempio che fa uso di combineLatest.

Questo esempio è costituito da tre observables:

1. Un observable chiamato ‘Timer’ che emette continuamente valori numerici casuali
2. Uno che emette quando il pulsante viene cliccato
3. Un altro che emette ogni volta che un valore viene digitato nell’input field

Potrai verificare tu stesso che combineLatest non emetterà finché:

1. Il timer ha emesso almeno un valore
2. Il pulsante è stato cliccato almeno una volta
3. Almeno un valore è stato digitato nell’input field

Quando tutte le condizioni saranno soddisfatte, combineLatest emetterà.

Quindi, tale operatore emetterà ogni volta che ciascun observable emetterà un nuovo valore.

RxJs: approfondimenti

In questo blog sono presenti numeri articoli riguardanti RxJs, Angular e JavaScript.

Ecco alcuni articoli che ti possono interessare:

• RxJS: Subject vs BehaviorSubject
• Operatori RxJS: imparare il funzionamento dinamicamente
• Come fare una chiamata AJAX ( GET / POST )
• Angular: come utilizzare le variabili di ambiente
• RxJs: Hot Observables vs Cold Observables

Conclusioni

In questo articolo abbiamo analizzato l’interfaccia dell’operatore combineLatest ed il suo funzionamento.

Possiamo affermare che combineLatest sia uno degli operatori che esprimono al meglio il paradigma di “Reactive programming” utilizzato per l’implementazione di RxJs.