Rx.js Fundamentals

Combining Operators Exercise

Steve Kinney

Steve Kinney

Temporal
Rx.js Fundamentals

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

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

Students are instructed to edit the counter to skip values until a user hits the start button using takeUntil and skipUntil. Hitting the start button should start the counter, and hitting the stop should stop the counter.

Preview
Close

Transcript from the "Combining Operators Exercise" Lesson

[00:00:00]
>> There are two more that I want to talk about, these start to bridge the gap where we can get a little bit more sophisticated. And one of the reason why I call them out is, because just simply with their names and get a little bit confusing, take while and skip while took some functions, right, that manipulated the values.

[00:00:19]
But if you look in that example right there, in this case, there's not a function there. skipUntil and takeUntil rely on other observables, right, which means when they show up, right, this observable will then subscribe to those observables, and basically it will skip. In this case, we have a timer that goes off after two seconds, we have a timer that goes off after seven seconds, right?

[00:00:48]
This case the interval is gonna be pumping out values, however it's gonna skip them all in total that timer goes off, till values emitted from first timer, then it will start letting values through, into there's an omission from takeUntil. Right, and then it will stop listening to any values, effectively complete at that point.

[00:01:15]
Now, if only somebody had, a not great counter somewhere that was manually subscribing and unsubscribing to values, turns out that we do. Right, so, if you think about our counter right now, we have the start stop buttons that are emitting events, right of any way, shape and form.

[00:01:41]
Right, we have this interval that we want to start and stop based on those buttons. What my challenge for you is, can you rewire a counter so that it is skipping values until someone hits the start button, and it will take them until someone hits the pause button.

[00:02:05]
Right, don't worry about too much about the values you see on the screen, the idea is we don't want it incrementing or at all, right? Whatever value increments to, we don't care at this point, we'll fix that later, but we want to do is, remove that global variable.

[00:02:20]
And basically say, we have the streams of clicks on those two buttons, and we will start counting and updating the DOM when the start button hits, and we will stop when the pause button hits, right. So we're gonna use takeUntil and skipUntil, we could use scan as well, that's a little bonus, just worry about getting the DOM to start and stop, and we'll figure out how we could also use scan as well, along the way.

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