At Agira, Technology Simplified, Innovation Delivered, and Empowering Business is what we are passionate about. We always strive to build solutions that boost your productivity.

, ,

What’s New In RxJS v6.5 And Check What Has Changed?

  • By Vignesh M
  • June 27, 2019
  • 1549 Views

 
If you’re one among the keen & thriving front-end developer, you must be already using or heard about rxjs unless you’re living under the rock. It is a reactive programming library which is designed mainly for functional programming paradigm. Recently, Rxjs 6.5 got released and it has few new things and deprecated in a lot of ways you can use some operators. Don’t worry its all fun, let’s dive right into it.
 

Deprecations

Before we hook up with the new additions of the library, we should go through what’s going to break your application sooner or later.
 

1. ForkJoin method signature has changed

Previously you were able to pass multiple arguments to forkjoin to add multiple observables to forkJoin. This is now deprecated and you must pass an array of observables to forkJoin operator. There is one more addition to forkJoin which we will see further down.
 

import { of, forkJoin } from 'rxjs';
import { delay } from 'rxjs/operators';
// deprecated
forkJoin(delay(100), delay(200));
// Correct way
forkJoin([delay(100), delay(200)]);

 


2) Partition Operator Deprecated

The partition operator is an interesting operator which is kind of similar to if else statement. What it does is, if you give it a source observable and a predicate, it’ll give you back two observables, one which satisfies the predicate condition and the other one which doesn’t. This operator is now deprecated and. But there is a new addition which does the exact thing in a different way. The below is the deprecated usage,
 

import { of, pipe } from 'rxjs';
import { delay, partition, map } from 'rxjs/operators';
// deprecated
const source = of([true, false, true, true, false]).pipe(
map(res => {
  return {result: res};
})
);
const [success, problem] = source.pipe(partition(res => res.result));
success.subscribe(res => {
// handle success
});
problem.subscribe(res => {
// handle error
});

 


3) combineLatest Method Deprecated Signature Changes

The combineLatest operator’s method signature was quite verbose and it took me a while to figure out what’s actually deprecated from there. TLDR, from now on you can only pass an array of observables to combineLatest and other methods such as passing observables as separate parameters or passing a scheduler function is now deprecated.
 

import { combineLatest, timer } from 'rxjs';
const firstTimer = timer(0, 1000);
const secondTimer = timer(500, 1000);
// deprecated
combineLatest(firstTimer, secondTimer).subscribe();
// deprecated
combineLatest(firstTimer, secondTimer, (a,b)=>a+b).subscribe();
// Correct
combineLatest([firstTimer, secondTimer]);

 
 

4) Scheduler Deprecations

Scheduler functions are a way of controlling the timing of execution of tasks, don’t worry if this sounds alien because it is. The rxjs authors actually hidden the scheduler behind there default concurrency and in most cases, the concurrent execution is what we require. But there are multiple ways you can control the schedule for any observable and they are deprecated.
Likewise the scheduler version for of, range, from are also deprecated and a new scheduler creation function is added which we will see later.

import {of, asapScheduler} from 'rxjs';
// Deprecated
of(100, asapScheduler).subscribe(res => {})

 
 

Best To Read: 4 Must Known Operators In RxJS


Some Of The New Additions

We’ve been through a lot of deprecations and its time to know what cool things are added to the library.
 

Fetch Observable

The JS fetch API is what we can tell as the next version of AJAX and rxjs 6.5 added built-in support for it. Refer more about it here
 

import { fromFetch } from 'rxjs/fetch';
const users$ = fromFetch('https://localhost/api/users').subscribe(res => {
})

 
Using this you can also cancel in-flight requests using AbortController.
 

ForkJoin Improvements

We discussed that forkJoin method signature has been changed and it’s for good, previously you were only able to send an array of observables and access them using their index in forkJoin. Now you can send an object of observables and access the values based on the object keys in the subscribe like below,
 

import {forkJoin, timer} from 'rxjs';
import {mapTo} from 'rxjs/operators';
const source = forkJoin({
name: timer(500).pipe(mapTo([{ title: 'Agiratech'}])),
id: timer(500).pipe(mapTo({ id: 1 }))
});
source.subscribe({
next({name, id}) {}
})

 


Partition Observable

We’ve seen that the partition operator has been deprecated and it is in favor of the new partition observable. This works as same as the partition operator which is if you give it an observable and a predicate it’ll give back two observables one satisfying the predicate and the other one doesn’t. You can use the partition observable as below.
 

import { of, pipe, partition } from 'rxjs';
import { delay, map } from 'rxjs/operators';
// deprecated
const source = of([true, false, true, true, false]).pipe(
map(res => {
  return {result: res};
})
);
const [success, problem] = partition(source, res => res.result);
success.subscribe(res => {
// handle success
});
problem.subscribe(res => {
// handle error
});

 
 
Also use this link to refer more about partition observable


Scheduled Creation Function

We’ve seen the scheduler variants of all the creation function were deprecated that’s in favor of the scheduled creation function. You can wrap any observable with a scheduler using the scheduled function like below,
 

import {of, scheduled, asapScheduler} from 'rxjs';
scheduled(of(100), asapScheduler).subscribe(res => {
next(res) {
  console.log(res);
}
});

 
 
Read more about scheduled creation here
 
We have seen the new additions to rxjs 6.5 and deprecations. Probably rxjs team might give us a migration tool before removing these deprecated values. But we don’t have to wait until that point and can start upgrading your code based on the new changes. If you use a smart editor like Webstorm, the deprecated symbol usages will be struck out as a warning for you which is a lot helpful. Let me know if you have any feedback, questions, suggestions in the comments.
 
[contact-form-7 404 "Not Found"]

Vignesh M

An energetic Fullstack developer/Tech Lead and has a strong desire in Programming. With 6.5 years of experience in Angular, Javascript, Laravel PHP, Ionic, and Flutter, he always strives to come up with Smart Solutions to accomplish complex tasks.He is also interested in Video games, Motorcycles, Books, Movies, History.