Rx.js Fundamentals

Combining Operators Solution

Steve Kinney

Steve Kinney

Rx.js Fundamentals

Check out a free preview of the full Rx.js Fundamentals course

The "Combining Operators Solution" Lesson is part of the full, Rx.js Fundamentals course featured in this preview video. Here's what you'd learn in this lesson:

Steve walks through the solution to the combining operators exercise. A student's question regarding if takeUntil is the best approach for subscription management is also covered in this segment.


Transcript from the "Combining Operators Solution" Lesson

>> So we didn't like this, what we want to do in this case is we want to basically use some of those new operators we learned about, takeUntil and skipUntil. Again, this still won't be totally perfect yet, well, spoiler alert, we'll have a single use timer by the end of this.

But again, it'll be our first foray into kind of starting to combine different observables together. So, we have the start and the pause. What we really wanna do is create this counter, Observable. Or you name it whatever you want. I'm gonna name it counter, which is that interval, in this case, of 1,000 milliseconds, and then now we have access to pipe.

And what we could do in this case is we could say that we want to skipUntil. And one of the things you have to remember to do is theoretically, you can import them from ArcGIS. But if you care about your bundle size, what you wanna do is, if any of the operators live in arcsgis/operators.

So, skipUntil, we know we're gonna need take until from arcgis/operators. All right, so we'll skipUntil we get any kind of event that emits from the Start button, and we'll take them until we get any event from the Pause button. Again, this will be a single use counter, we're gonna work on improving that.

So we'll skipUntil and then once that happens, we will then takeUntil the Pause button. And we're gonna see one little bug that we have with this, one is that we're gonna need to subscribe. And we'll do that setCount. So we have our interval where we will mark.
>> Is takeUntil operator the best approach for management of subscriptions?

>> It depends, right, I'm gonna argue with no, right? Cuz we have a better way that we're gonna get to we just don't have all the tools yet, right, to switch in between different subscriptions. It's interesting cuz it'll give you a time where a given thing should stop.

One of the disadvantages of takeUntil is that then it's complete, right? Once you hit the emission that gets you to takeUntil, you're done, right? This observable has completed and once an observable is completed as we saw previously, it shall never start back up again, right? You have to replace it with a brand new one, yeah?

>> I remember some talking about conditions of hot versus cold. So, in essence, is this related?
>> Exactly, right? This is one, effectively, this interval observable is single use, right? And it starts up when it gets its first subscription, right? Each subscription gets a unique version of it and when it completes, that subscription is over, right?

If a new one subscribes, it starts over from the very beginning. There's this idea of a hot observable, which is just going and keeping track of the many subscribers and will only stop once everyone has unsubscribed from it. But here we have just kind of a simple one where takeUntil will end this observable in this case.

Right, so let's flip over and try it out, this started at 2, which is weird. Forget first enough, it'll start at 1. We refresh and I talk for a few minutes and I kill a little bit time, see it starts at 5, right? That's interesting. Anyone have a hypothesis why?

>> We're starting the generator as soon as the code starts?
>> Yeah, exactly. The intervals are ticking along, right? We're not dealing with them. We're not letting them through the pipe until that first event happens, right? But they're going, right? So we need to figure out a way that we're in control cuz interval will pop out values one at a time, right?

But what we could do is we could maintain our own state. Sean, we have a hypothesis and how we would do that?
>> Maybe, what do we do when we're maintaining state in those tests from before?
>> Using scan.
>> Using scan, right? Scan is super useful for that as well.

So we can pull in scan, And we'll say scan, at which point it will start with a value of 0, and we'll take the total. And really, we'll just do total + 1, we don't actually care what interval had to say. We just know that we're gonna ignore everything until we hit the Start button.

We're gonna start with a value of 0, and we're gonna increment by 1. So missed that comma there, and now we should be able to go back. And even if I can pause I can refresh, I can talk to you all for a little bit and kill at least one second worth of time, And we still start at 1, right?

So scan is useful for maintaining that state because, yeah, interval's popping out these numbers. We're always starting with 0, and only the ones they get to scan are gonna increment that 0 at all. Now, we can't start this one back up again cuz again, we unsubscribed. What we're eventually gonna wanna do, is let's start and stop, basically change channels between the incrementing and silence, right?

And so, cool, you want more values faster, we'll go to that stream, you wanna hear nothing cuz we're paused? We can go there as well, but we've got the state separated out. So we're getting there, we just need just a little bit more.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now