RxJS - najnowsze aktualizacje

W tym samouczku używamy RxJS w wersji 6. RxJS jest powszechnie używany do radzenia sobie z programowaniem reaktywnym i częściej używany z Angular, ReactJS. Angular 6 domyślnie ładuje rxjs6.

Wersja 5 RxJS była obsługiwana inaczej niż wersja 6. Kod ulegnie awarii w przypadku aktualizacji RxJS 5 do 6. W tym rozdziale zobaczymy różnicę w sposobach obsługi aktualizacji wersji.

Jeśli aktualizujesz RxJS do 6 i nie chcesz wprowadzać zmian w kodzie, możesz to zrobić również i będziesz musiał zainstalować następujący pakiet.

npm install --save-dev rxjs-compact

Ten pakiet zadba o zapewnienie kompatybilności wstecznej, a stary kod będzie działał dobrze z RxJS w wersji 6. Jeśli chcesz wprowadzić zmiany w kodzie, które działają dobrze z RxJS 6, oto zmiany, które należy wprowadzić.

Pakiety dla operatorów, obserwabli, temat zostały zrestrukturyzowane, w związku z czym główne zmiany dotyczą importu i zostały wyjaśnione poniżej.

Import dla operatorów

Zgodnie z wersją 5 dla operatorów należy dołączyć następujące zestawienia importu -

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

W wersji 6 RxJS import będzie wyglądał następująco -

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

Import metod do tworzenia Observables

Zgodnie z wersją 5, podczas pracy z Observables, należy uwzględnić następujące metody importu -

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

W wersji 6 RxJS import będzie wyglądał następująco -

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

Import observables

W RxJS w wersji 5, podczas pracy z Observables, należy dołączyć następujące instrukcje importu -

import { Observable } from 'rxjs/Observable'

W RxJS w wersji 6 import będzie wyglądał następująco -

import { Observable } from 'rxjs'

Import przedmiotu

W RxJS w wersji 5 temat należy umieścić w następujący sposób -

import { Subject} from 'rxjs/Subject'

W RxJS w wersji 6 import będzie wyglądał następująco -

import { Subject } from 'rxjs'

Jak używać operatorów w RxJS 6?

pipe() methodjest dostępny na utworzonej obserwowalnej. Jest dodawany do RxJS od wersji 5.5. Używając pipe (), możesz teraz pracować z wieloma operatorami razem w kolejności sekwencyjnej. W ten sposób operatory zostały użyte w RxJS w wersji 5.

Przykład

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));

Od wersji RxJS 5.5 i nowszych musimy użyć pipe () do wykonania operatora -

Przykład

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)
);

Zmieniono nazwy operatorów

Podczas restrukturyzacji pakietów zmieniono nazwy niektórych operatorów, ponieważ były w konflikcie lub pasowały do słów kluczowych javascript. Lista jest taka, jak pokazano poniżej -

Operator	Zmieniono nazwę na
zrobić()	kran()
łapać()	catchError ()
przełącznik()	switchAll ()
Wreszcie()	sfinalizować()
rzucać()	throwError ()