RxJS - Latest Updates

We are using RxJS version 6 in this tutorial. RxJS is commonly used to deal with reactive programming and used more often with Angular, ReactJS. Angular 6 loads rxjs6 by default.

RxJS version 5 was handled differently in comparison to version 6. The code will break in case you update your RxJS 5 to 6. In this chapter, we are going to see the difference in ways of handpng the version update.

In case you are updating RxJS to 6 and don t want to make the code changes, you can do that too, and will have to install the following package.

npm install --save-dev rxjs-compact

This package will take care of providing backward compatibipty and old code will work fine with RxJS version 6. If you want to make the code changes that works fine with RxJS 6, here are the changes that needs to be done.

The packages for operators, observables, subject were restructured and hence, the major changes go in for imports and they are explained below.

Imports for operators

As per version 5, for operators the following import statements should be included −

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

In RxJS version 6 the imports will be as follows −

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

Import of Methods to create Observables

As per version 5, while working with Observables, the following import methods should be included −

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

In RxJS version 6 the imports will be as follows −

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

Import of Observables

In RxJS version 5, while working with Observables, the following import statements should be included −

import { Observable } from  rxjs/Observable 

In RxJS version 6, the imports will be as follows −

import { Observable } from  rxjs 

Import of Subject

In RxJS version 5, subject should be included as follows −

import { Subject} from  rxjs/Subject 

In RxJS version 6, the imports will be as follows −

import { Subject } from  rxjs 

How to use operators in RxJS 6?

pipe() method is available on the observable created. It is added to RxJS from version 5.5. Using pipe() now you can work on multiple operators together in sequential order. This is how the operators were used in RxJS version 5.

Example

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

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

From RxJS version 5.5 onwards, we have to use pipe() to execute the operator −

Example

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

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

Operators Renamed

During restructuring of the packages some of the operators were renamed as they were confpcting or matching with javascript keywords. The pst is as shown below −