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

Rxjs-latest-updates

RxJS-最新のアップデート

オペレーターへの輸入

オブザーバブルを作成するメソッドのインポート

オブザーバブルのインポート

主題のインポート

RxJS 6で演算子を使用する方法

例

例

名前が変更された演算子

目次