Rxjs-latest-updates
RxJS-最新のアップデート
このチュートリアルでは、RxJSバージョン6を使用しています。 RxJSは通常、リアクティブプログラミングを処理するために使用され、Angular、ReactJSでより頻繁に使用されます。 Angular 6はデフォルトでrxjs6をロードします。
RxJSバージョン5は、バージョン6と比較して扱いが異なりました。 RxJS 5を6に更新すると、コードが壊れます。 この章では、バージョン更新の処理方法の違いについて説明します。
RxJSを6に更新していて、コードを変更したくない場合は、それも行うことができ、次のパッケージをインストールする必要があります。
npm install --save-dev rxjs-compact
このパッケージは下位互換性を提供し、古いコードはRxJSバージョン6で正常に動作します。 RxJS 6で正常に機能するようにコードを変更したい場合は、以下の変更が必要です。
オペレーター、オブザーバブル、サブジェクトのパッケージが再構成されたため、インポートに大きな変更が加えられました。これらについて以下で説明します。
オペレーターへの輸入
バージョン5のように、演算子の場合、次のインポートステートメントを含める必要があります-
import 'rxjs/add/operator/mapTo'
import 'rxjs/add/operator/take'
import 'rxjs/add/operator/tap'
import 'rxjs/add/operator/map'
RxJSバージョン6では、インポートは次のようになります-
import {mapTo, take, tap, map} from "rxjs/operators"
オブザーバブルを作成するメソッドのインポート
バージョン5に従って、Observablesでの作業中、次のインポート方法を含める必要があります-
import "rxjs/add/observable/from";
import "rxjs/add/observable/of";
import "rxjs/add/observable/fromEvent";
import "rxjs/add/observable/interval";
RxJSバージョン6では、インポートは次のようになります-
import {from, of, fromEvent, interval} from 'rxjs';
オブザーバブルのインポート
RxJSバージョン5では、Observablesでの作業中に、次のインポートステートメントを含める必要があります-
import { Observable } from 'rxjs/Observable'
RxJSバージョン6では、インポートは次のようになります-
import { Observable } from 'rxjs'
主題のインポート
RxJSバージョン5では、件名は次のように含める必要があります-
import { Subject} from 'rxjs/Subject'
RxJSバージョン6では、インポートは次のようになります-
import { Subject } from 'rxjs'
RxJS 6で演算子を使用する方法
- pipe()メソッド*は、作成されたオブザーバブルで使用できます。 バージョン5.5からRxJSに追加されました。 pipe()を使用すると、複数の演算子を順番に一緒に操作できます。 これは、RxJSバージョン5での演算子の使用方法です。
例
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));
RxJSバージョン5.5以降では、演算子を実行するためにpipe()を使用する必要があります-
例
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)
);
名前が変更された演算子
パッケージの再構築中に、javascriptキーワードと競合または一致していたため、一部のオペレーターの名前が変更されました。 リストは以下のとおりです-
Operator | Renamed to |
---|---|
do() | tap() |
catch() | catchError() |
switch() | switchAll() |
finally() | finalize() |
throw() | throwError() |