Passing Subscriptions

[00:00:00]
>> Jafar Husain: Thank you to our intrepid volunteers here for helping us with a little roleplay exercise. As we can take a quick look at the code on screen here, let's remind ourselves of what we've done. We've created an observable of all the clicks from now until eternity, right? And we're gonna call that me.

[00:00:15]
I'm gonna be the clicks observable, right, for this particular button. Now, what we do next, is we map over clicks, and we create a new observable, right here, and that's going to be our our friend-
>> David: David.
>> Jafar Husain: David, so David is the observable we get from mapping over me, and he's gonna basically take every value I give him, and let's just say, he's gonna add one to it.

[00:00:38]
In practice, we're pulling off the offset x, but that's just some transformation on the data that I deliver to him when I call him next, right? So from now on, I'm just gonna give him numbers, and he can call next and just add one to those numbers, right?

[00:00:49]
So if I call next on you, right, next five, you're gonna turn around and say to-
>> Soren: Soren.
>> Jafar Husain: Soren, next six.
>> Jafar Husain: So Soren, here, is gonna be subscribing to David, and then David will see that David, in turn, subscribes to me, and then, so the subscriptions are gonna flow up, and I'm gonna hand David my own subscription object.

[00:01:12]
And you're gonna turn around and hand Soren your subscription object. Then at some later time, usually when somebody clicks the button, I'm gonna call next, right? So I'm gonna say next five, and then you are going to say-
>> David: Next six.
>> Jafar Husain: Right.
>> Soren: Six.
>> Jafar Husain: Yeah, right, and so you'd log that to the console.

[00:01:30]
So this is how we're gonna step through the code as we actually go through this exercise. So it's amazing what you can accomplish when you don't mind looking ridiculous, so thank you do our volunteers. So what we're gonna do here, is we're first going to
>> Jafar Husain: We're gonna step over, and we're gonna see what happens when you call subscribe here on David.

[00:01:53]
>> Soren: Subscribe.
>> Jafar Husain: All right, so let's see what happens. Where do we find ourselves? Well, we find ourselves in the other system's functions create map, but I'll put my breakpoint right here. And now, we find ourselves in the subscribe of David. So David, what's he gonna do? Well, he's gonna turn around and subscribe to me.

[00:02:12]
>> David: Subscribe.
>> Jafar Husain: Right, subscribe. So if we stepped into this, where do we find ourselves now? We find ourselves in the subscribe of the fromEvent observable, right? So I say cool, I'm gonna hook up the handler to the click, and then I'm gonna turn around and hand you my subscription, right?

[00:02:32]
Here's my subscription, and you are gonna?
>> David: Here's my subscription.
>> Soren: Thanks.
>> Jafar Husain: Hand the subscription to David. [LAUGH] And if I step over that, sure enough, we see we're in the place of the code where my subscription has been handed to David. David's handed it to Soran by returning it, and now, the program ends.

[00:02:55]
Well, at least it ends until somebody clicks something. So I'm going to put a little break point here, right here. So now, let's say somebody clicks a button. We are going to jump to this particular piece of code. Whoops, hold on. Maybe I will click that button, right?

[00:03:11]
So now, what I'm gonna do, is I'm gonna call, once now that I received that event click, I'm gonna call next on your observer. The one that you handed to be when you subscribed. So I'm gonna call Next five, right?
>> David: All right. Next six.
>> Jafar Husain: Right.
>> Soren: Here's a six.

[00:03:27]
>> Jafar Husain: Right, so here we've stepped into your code, right here. This is the map observer, right? We're gonna apply that projection function to V.
>> Jafar Husain: And now, finally, we find ourselves all the way out into that map function that we passed in, right? So there is where you're calling the map function that was passed into you when you were created, and you take that result then you send it to Soren.

[00:03:55]
So we step in here, and finally, we find ourselves in Soren's next handler. Now, we print to the console. Does that make sense? So now, hopefully it's clear why, let's say, for example, now, Sorin wanted to unsubscribe, right? What we did, remember that optimization we did? When David subscribed to me, I just handed David my subscription.

[00:04:14]
But instead of David creating a new subscription, he just took my subscription and handed it directly to Soren. The reason why that works is, if Soren decides he doesn't want any more data and he unsubscribes from me, well, that just means David's not gonna get any data from me.

[00:04:28]
And transitively, it means our friend Soren's not gonna get any data from me, right? So that's why we can just pass the subscription all the way through. So in general, if you're just transforming one observable to another observable, you can do this trick where you just pass the subscription all the way through.

[00:04:42]
So as we can see, subscription flows up, data flows down, and unsubscription would also flow up. So if you were to call unsubscribe, that would actually skip you entirely, right? Unsubscribe from me, I don't send anymore data to him, he doesn't send any more data to him.