RxJS - Ultimi aggiornamenti

Stiamo usando RxJS versione 6 in questo tutorial. RxJS è comunemente usato per gestire la programmazione reattiva e usato più spesso con Angular, ReactJS. Angular 6 carica rxjs6 per impostazione predefinita.

La versione 5 di RxJS è stata gestita in modo diverso rispetto alla versione 6. Il codice si interromperà nel caso in cui aggiorni la tua RxJS 5 alla 6. In questo capitolo vedremo la differenza nei modi di gestire l'aggiornamento della versione.

Nel caso in cui stai aggiornando RxJS a 6 e non vuoi apportare le modifiche al codice, puoi farlo anche tu e dovrai installare il seguente pacchetto.

npm install --save-dev rxjs-compact

Questo pacchetto si occuperà di fornire la compatibilità con le versioni precedenti e il vecchio codice funzionerà bene con RxJS versione 6. Se vuoi apportare modifiche al codice che funzionano bene con RxJS 6, ecco le modifiche che devono essere fatte.

I pacchetti per gli operatori, gli osservabili, i soggetti sono stati ristrutturati e, di conseguenza, le principali modifiche riguardano le importazioni e sono spiegate di seguito.

Importazioni per operatori

Come per la versione 5, per gli operatori dovrebbero essere incluse le seguenti istruzioni di importazione:

import 'rxjs/add/operator/mapTo'
import 'rxjs/add/operator/take'
import 'rxjs/add/operator/tap'
import 'rxjs/add/operator/map'

Nella versione 6 di RxJS le importazioni saranno le seguenti:

import {mapTo, take, tap, map} from "rxjs/operators"

Importazione di metodi per creare osservabili

Come per la versione 5, mentre si lavora con Observables, dovrebbero essere inclusi i seguenti metodi di importazione:

import "rxjs/add/observable/from";
import "rxjs/add/observable/of";
import "rxjs/add/observable/fromEvent";
import "rxjs/add/observable/interval";

Nella versione 6 di RxJS le importazioni saranno le seguenti:

import {from, of, fromEvent, interval} from 'rxjs';

Importazione di osservabili

Nella versione 5 di RxJS, mentre si lavora con Observables, dovrebbero essere incluse le seguenti istruzioni di importazione:

import { Observable } from 'rxjs/Observable'

Nella versione 6 di RxJS, le importazioni saranno le seguenti:

import { Observable } from 'rxjs'

Importazione dell'oggetto

Nella versione 5 di RxJS, l'oggetto dovrebbe essere incluso come segue:

import { Subject} from 'rxjs/Subject'

Nella versione 6 di RxJS, le importazioni saranno le seguenti:

import { Subject } from 'rxjs'

Come utilizzare gli operatori in RxJS 6?

pipe() methodè disponibile sull'osservabile creato. Viene aggiunto a RxJS dalla versione 5.5. Usando pipe () ora puoi lavorare su più operatori insieme in ordine sequenziale. Ecco come venivano usati gli operatori nella versione 5 di RxJS.

Esempio

import "rxjs/add/observable/from";
import 'rxjs/add/operator/max'

let list1 = [1, 6, 15, 10, 58, 2, 40];
from(list1).max((a,b)=>a-b).subscribe(x => console.log("The Max value is "+x));

Dalla versione 5.5 di RxJS in poi, dobbiamo usare pipe () per eseguire l'operatore -

Esempio

import { from } from 'rxjs';
import { max } from 'rxjs/operators';

from(list1).pipe(max((a,b)=>a-b)).subscribe(x => console.log(
   "The Max value is "+x)
);

Operatori rinominati

Durante la ristrutturazione dei pacchetti alcuni operatori sono stati rinominati in quanto erano in conflitto o corrispondenti alle parole chiave javascript. L'elenco è come mostrato di seguito:

Operatore	Rinominato in
fare()	rubinetto()
catturare()	catchError ()
interruttore()	switchAll ()
finalmente()	finalizzare ()
gettare()	throwError ()