RxJS cosa è e dove viene utilizzata

In questo articolo parleremo di RxJS, una delle libreria più utilizzate nell’ambito dello sviluppo web.

Troverai esempi pratici per capire a cosa serve, come si utilizza e perché sia così utilizzata.

Indice

RxJS cosa è

RxJs è una libreria che implementa il concetto di reactive programming.

Facendo uso degli Observables, questa libreria permette di scrivere codice asincrono basato sul callback in maniera semplice ed ordinata.

Concettualmente, questa libreria ha molte analogie con le Promises, gli oggetti built-in di JavaScript per la gestione degli eventi asincroni.

Come vedrai nel seguito dell’articolo, il codice necessario per far uso della libreria risulterà essere espressione della Programmazione Funzionale.

RxJS dove viene utilizzata

RxJS è una libreria molto flessibile.

Infatti, consente di implementare logiche complesse scrivendo codice comprensibile.

Per questo motivo, è utilizzata in framework per le applicazioni web molto diffusi, come Angular.

Sul sito ufficiale del framework è presente un’intera sezione dedicata all’utilizzo della libreria, con esempi pratici di utilizzo.

Nell’esempio qui sopra puoi trovare un esempio di utilizzo dell’operatore combineLatest di RxJS, per combinare le emissioni due Observables.

Il primo viene creato opportunamente nel codice affinché emetta un numero generato in maniera casuale, il secondo è quello creato dal metodo get( ... ) di HttpClient.

Ecco il codice che implementa l’esempio:

export class AppComponent {
  output: string[];
  constructor(public httpClient: HttpClient) {
    this.output = [];
    const aNumber: number = Math.random();
    // we create an Observable
    let observable$ = new Observable((observer: Subscriber<number>) => {
      observer.next(aNumber);
    });
    this.output.push('observable will emit ' + aNumber);
    const targetUrl =
      'https://www.dariocapozzi.it/wp-json/wp/v2/posts?per_page=1&categories=43,6&exclude=1890&orderby=rand';
    this.output.push('going to perform http request to ' + targetUrl);
    let httpResponseObservable$ = this.httpClient.get(targetUrl);
    combineLatest([observable$, httpResponseObservable$]).subscribe(
      ([observableValue, httpResponseValue]) => {
        this.output.push(
          'combineLatest emitted value: ' +
            JSON.stringify([observableValue, httpResponseValue], null, 2)
        );
      }
    );
  }
}