RxJS-最新のアップデート

このチュートリアルでは、RxJSバージョン6を使用しています。RxJSは、リアクティブプログラミングを処理するために一般的に使用され、Angular、ReactJSでより頻繁に使用されます。Angular6はデフォルトでrxjs6をロードします。

RxJSバージョン5は、バージョン6とは異なる方法で処理されました。RxJS5を6に更新すると、コードが壊れます。この章では、バージョン更新の処理方法の違いについて説明します。

RxJSを6に更新していて、コードを変更したくない場合は、それも可能であり、次のパッケージをインストールする必要があります。

npm install --save-dev rxjs-compact

このパッケージは下位互換性を提供し、古いコードはRxJSバージョン6で正常に機能します。RxJS6で正常に機能するコード変更を行う場合は、以下の変更を行う必要があります。

オペレーター、オブザーバブル、サブジェクトのパッケージが再構築されたため、インポートに大きな変更が加えられました。以下で説明します。

オペレーター向けの輸入

バージョン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() method作成されたオブザーバブルで利用できます。バージョン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キーワードと競合または一致していたため、名前が変更されました。リストは以下のとおりです-

オペレーター	名前が変更されました
行う（）	tap（）
キャッチ（）	catchError（）
スイッチ（）	switchAll（）
最終的に（）	finalize（）
スロー（）	throwError（）