Cancelling Observables — RxJS

Hiraash Thawfeek
Jul 30, 2018 · 4 min read

RxJS is something I have come to appreciate quite a bit in the recent past, in it’s ability to manage asynchronous operations. It really is a shift in the programing paradigm of how you look at asynchronous code. If it is adopted consistently well across your app, you can see a significant improvement in how you manage asynchronous code. In this post I want to talk about a particular principle of Observables. This post wouldn’t make a lot of sense if you have not had exposure to RxJS.

Unsubscribing or Cancelling.

Subscription: represents the execution of an Observable, is primarily useful for cancelling the execution.

However, if you have been using RxJS for long enough, this is not a concept that seems natural to Observables. The pattern seems to almost dictate that Subscriptions are simply a “viewership” to the source and not something that controls the source. This is mostly because of the different types of Observables that we come to use and our inability to always know what type an observable is and what really happens when you do unsubscribe from the Subscription.

Observable Temperature.

Once you have read the above post, you will also learn that there are operators that you can use to change the temperature of an Observable. Particularly operators like publish, refCount, share and defer.

Hot Observables

let source = fromEvent( element, ‘mousemove’ );

In the following example we create a hot observable using the create operator. This might look like a bit of an overkill but it’s purely for the purpose of explaining a hot observable’s attachment to it’s underlying operation.

As you can see the ticker starts to fire every 100ms as the code starts to execute. The observable returned by the getTicks emits each tick to the subscriber. The observable always gives every observer what the current tick is regardless of when the observer subscribed. By unsubscribing you essentially stop listening, but the ticker continues to work.

Cold Observables

let source = range( 1, 10 );

The above observable emits values from 1 to 10 when an observer subscribes. For every other observer that subscribes the values are emitted again. Lets explore this further with the ticker example that uses only the create operator to create a cold observable.

In this case the ticker does not start until an observer subscribes to getTicks observable. Every time an observer subscribes to the observable a new ticker is created that emits from 0. When an observer unsubscribes, the underlying ticker specific to that observer is stopped. This is identical to

getTicks(){
return interval(100);
}

The ticker example shows when you unsubscribe from a cold observable source, you essentially affect the source operation specific to that observer/subscription.

Warm Observables

let source = interval(100).pipe( publish(), refCount());

In this case interval produces a cold observable but publish (along with connect operator) makes it a hot observable. The refCount makes it warm — initially cold but turns hot when the first subscription occurs. Lets use the ticker example with create operator to make a warm observable that behaves similarly.

In this particular case, the observers fully control the underlying operation of the observable. By creating the first subscription we are able to start the ticker and by unsubscribing all subscriptions we are able to stop the ticker.

Conclusion

Beyond the Semicolon

A tech-blog by the team behind Creately (https://creately.co

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store