Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Return Subscriptions from the Subscribe Function in RxJs

    André StaltzAndré Staltz

    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.

    rxjsRxJS
    ^5.0.0
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss