Return Subscriptions from the Subscribe Function in RxJs
So far, when writing these subscribe functions, we haven't returned anything. It is possible return an unsubscribe function from a subscribe function. In this lesson we will see how to allow observers to subscribe and unsubscribe from an Observable.
[00:00] So far when writing the subscribe functions which are 'past' and 'observable' constructor, we haven't returned anything. But it's possible to return an unsubscribe function from this. Here's how it's useful.
[00:16] Let's say inside this function I want to set an interval to run this every one second. Every one second, I'm going to deliver a value to the observer. I'm going to say 'hi,' for instance. Now when we run his, we see the string 'hi' being delivered every one second.
[00:33] Now, suppose that after four and half seconds, I don't want to receive these 'hi' values anymore. Let's say the observer is done receiving values. It doesn't want to get values. Since we're subscribing, we should also have a way of unsubscribing. That's where this return function, 'unsubscribe', comes in.
[00:53] If we just comment this out in order to have pure JavaScript and no Rx -- just to make things simpler to understand, 'subscribe' expects the observer object. Let's make this an object with three members, 'next', 'error', and 'complete' -- 'subscribe' will return this function. That's what we can capture here as the return value.
[01:22] Now we have this unsubscribe function that we can call anywhere here. Let's say, for instance, here. The setInterval will return to us this ID number for the interval that was registered. Then you can stop that by calling this API clearInterval with the ID. We call that precisely here inside our 'unsubscribe'.
[01:46] Basically, when I call 'unsubscribe', it will clear the interval. I can do that after four and a half seconds. When we run this, we should see just four values. Then it should unsubscribe. It did. That's what returning this function, 'unsubscribe', is. It's a way of being able to stop receiving values because 'subscribe is saying', "Give me values."
[02:21] If we now go back from pure JavaScript to RxJS, we need to adapt these here. We can put this 'subscribe' function directly inside here, for instance. Even though we are returning an 'unsubscribe function' from here, the 'observable.subscribe' will return always a subscription.
[02:46] The subscription is just an object which has the 'unsubscribe' function. It's almost the same thing, but just a slightly different API. This also works.
[02:58] The idea is that you are able to dispose from resources that you are using here so that this wouldn't leak, because if the observer is not interested in those values anymore, then we can stop everything that was running.