Join egghead, unlock knowledge.

Want more egghead?

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

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    `add` Inner Subscriptions to Outer Subscribers to `unsubscribe` in RxJS

    John LindquistJohn Lindquist

    When subscribers create new "inner" sources and subscriptions, you run the risk of losing control of them when the outer subscriber unsubscribes. This is handled easily enough if you use the add method from the Subscriber class to add the "inner" subscription to the Subscriber.



    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




    Instructor: A really important scenario we haven't covered is, what happens when this subscriber completes before this subscriber completes? This object is our subscriber, and you'll see the behavior right now, if I take until and all the save from event document key down which just means I'll type a key and this should stop.

    Save here, and I'll click 1, 2, 3, 4, 5, and then hit a key on my keyboard. You can see we got done, but stuff kept on happening. This done came from here, this subscriber, but my inner subscriber kept on pushing out nexts.

    If I were to use the real concat map and do the same thing, I'd go 1, 2, 3, 4, 5, hit a key, and you can see done and everything is stopped. Just to show that again, 1, 2, 3, 4, 5 and hit a key, done, nothing else happens.

    That's because, this complete is also telling this guy to complete and unsubscribe. Luckily for us, subscriber has a method called add which can simply take an inner subscription and say this add this.innersubscription.

    Let's save. Make sure I switch back to my concat map, my concat map.

    You can see if I go 1, 2, 3, 4, 5 and hit a key, that it is now done and nothing else is logged from that inner subscriber. This complete knows to stop and unsubscribe from this subscription.

    You can think of it like where we say subscribe here and pass in a subscriber using the operators will walk through using this call to source subscribe and pass in the other operators whereas the opposite would be this.add. Will let the parent subscriber know. We'll let this one to know that when unsubscribe is called, make sure and clear out those inner subscriptions.