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.
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 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.
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.
**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.
**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.
**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
While the examples are somewhat fictional, this small overview of
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..