When subscribing to observables it’s key to manage your subscriptions. An observable execution can run for an infinite amount of time and therefore we need a way to stop it from executing. If we keep our subscriptions open to resources that are not required we’re losing unnecessary memory and computing resources and that is bad. We can of course just call unsubscribe()
but there are much better and easier ways to stop your subscription from receiving data with the power of rx.js.
If you’re not sure that you completely understand observables yet, I recommend to read my previous article.
Photo by Grant Ritchie on Unsplash
Using operators from rx.js enables us to make observables complete without calling unsubscribe()
. Using those methods instead of calling unsubscribe()
always has preference as we have much more control over our subscriptions this way.
For each rx.js operator i will include images of rxmarbles.com. Please note that the top arrow represents the original observable that emits multiple values. Each circle stands for one emit. The bottom arrow represents the effect the operator has on the data stream before it completes. if you haven’t checked out rxmarbles yet, i highly recommend you to look at it soon. It can really help you with understanding how each rx.js operator work.
If you are sure that you only need the first value or the first value that passes a test, use the first()
. The observable emits only the first value and then completes.
**Example usage**You can use first
when you just want to get the value from an api-request. Since you know you only need one value, first
works great for that.
If you know beforehand that you only want a maximum number of values from your source you can use the take
. take
returns an observable that emits it’s values a maximum amount of times.
**Example usage**You can use take
when you for example know that the first value can be null but the second has the value you need. I use this sometimes when selecting data from my ngrx/store. It can happen that the store is still empty when you ask for the data, the first value will then be null. A little later the store might be filled and my subscription now receives the data it needs. take(2)
then works fine.
Where take
accepts a maximum number of emits from the observable. elementAt
accepts only the emit from a given index. In other words, use elementAt
if you for example only want the third value from an observable. elementAt
then waits for the third value and then completes.
http://rxmarbles.com/#elementAt
**Example usage**Maybe there’s a scenario where you’re making something interactive and need to do something once with the third click.
This one is a bit more difficult as takeUntil
requires two observables. takeUntil
emits values until a the second observable emits ‘something’ or completes. The first observable, e.g. the original source, then completes.
http://rxmarbles.com/#takeUntil
**Example usage**Let’s say you’re listening to a websocket on a specific page. You of course only want to keep a subscription to this websocket open when you’re on the page. You can use takeUntil
to automatically unsubscribe on routeChange.
You can see takeWhile
as a filter. Each value that the observable emits is given to the takeWhile
. This then tests the value for a certain condition and returns a boolean. If it returns false, the observable completes.
http://rxmarbles.com/#takeWhile
**Example usage**The example i gave on when to use take
about selecting data from my ngrx/store that might or might not be present yet can also be done with takeWhile
.
While the examples are somewhat fictional, this small overview of first
, take
, elementAt
, takeWhile
and takeUntil
should give you a better understanding of how you can manage your subscriptions without using unsubscribe.
I work for Sytac as a Senior front-end developer and we are looking for medior/senior developers that specialise in Angular, React, Java or Scala. Sytac is a very ambitious consultancy company in the Netherlands that works for a lot of renowned companies in banking, airline, government and retail sectors. You can think of companies like ING, KLM, Deloitte, Ahold Delhaize, ABN AMRO, Flora holland and many more.
From a personal opinion Sytac really sets itself apart with their client portfolio, but also with how they take care of their employees. They do really care about the wellbeing of their employees. Apart from a good salary (50K-75k), you will notice this in regular meetings with the consultant managers but also by the amount of events they organise and all the other perks they offer to keep all employees happy.
If you think you have what it takes to work with the best, send me an email on [email protected] and i’m happy to tell you more..