![Rx.js Fundamentals](https://static.frontendmasters.com/assets/courses/2022-01-25-rx-js/thumb.webp)
Check out a free preview of the full Rx.js Fundamentals course
The "switchMap 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 switchMap exercise.
Transcript from the "switchMap Solution" Lesson
[00:00:00]
>> So here we have our venerable counter, needs some updates, right and this goes back to that question we had before of like, it's important to see how skip until and take until will start and stop one. But this gave us an observable, that was basically one time use.
[00:00:17]
What we really wanna do, is again, swap back and forth between a regular cadence of integers and complete silence depending on whether or not we want things to reflect in our UI. So, one of the things that we saw previously is instead of using the events, we took a look, we use mapTo, right?
[00:00:43]
And we'll just add this up here, say, mapTo and for each of these, mapTo true, mapTo false, right? And now, counter is going to be, we're still gonna need this interval at some point or another. But let's kind of start up here for a second. And counter is reliant, it's merging the clicks on that button, right?
[00:01:21]
And depending on what the last event on, should I be running, should I not be running, it will then redirect its output in a different way. So we'll say counter in this case and just merge together, start and pause. Right, so I want to listen to both these true values, and false values coming through.
[00:01:45]
If I was to just a regular map over this, or even just tap I would get true false depending what button happened. Now what I really wanna do is give back a different observable and swap that in, as we kind of go through. So, instead of mapping it to an observable, in this case, I want to switchMap.
[00:02:09]
Right, and this again, the value that switchMap is gonna get is the value that came into this observable. Now, because we've mapped to either true or false, we will get either true or false. So this will be a boolean of, should I be running, should I not be running?
[00:02:26]
In fact, let's call this shouldIBeRunning, And we'll kind of do with the long hand here just to make sure it's abundantly clear, we won't use a ternary like we saw before. We'll say if shouldIBeRunning, return an interval that runs every one second, right? Otherwise, return NEVER, right? So either depending on the last value that came through, we're going to either return an interval, or we're going to return NEVER.
[00:03:08]
Then we'll see there's a slight problem in my code, you can kind of see down here but yeah, question.
>> You have to pipe those mapTos, right, at the top on the.
>> Yep, theoretically if I hate my bundle size, I don't [LAUGH] right, if I wanted you to pull them in, but you're right.
[00:03:25]
I should.
>> Do you use the chaining method instead of pipe?
>> Yeah.
>> Genie is deprecated.
>> Yeah cuz again, if you enjoy a reasonable bundle size, there's no way to have an observable that has all 100 and I think I counted 134 methods. I ship those whatever even if they said we use what mapTo switchMap.
[00:03:55]
Don't need all the rest of the operators, right? Let's only pull in the ones we need. So should I be running? We have counter, and we need to get rid of the other counter. Now what's missing? I'll just hint. This will work, but it's gonna have that problem we had before, right?
[00:04:13]
Which is you'll get a fresh count every time. You will not pick up where you left off because this is returning a brand new interval observable. Right, so this one's gonna start at zero or one or whatever, every time. What we really wanna do is that's fine, but we want to pick up where we left off.
[00:04:33]
So we'll grab this scan as well. We'll pop it in there too. Awesome. So yeah, now depending on which way this happens, we should finally reach the promised land of two buttons and a number that do roughly what we expect it to do. The one thing that I've noticed is that the IntelliSense, I'm gonna import stuff for you.
[00:05:06]
It's a little squirrely if you have both of these, so, We can start it. We can pause it. We can start it again. We can pause it again. Now if I took out that scan, you kind of see that I can start it. I can pause it. If I start it again, it goes to 0.
[00:05:33]
The reason for that is I'm getting a fresh observable every time an interval pumps out 0, 1, 2, 3, 4, 5, so on and so forth. With that scan, listen, as long as it's kind of the effective version of mapTo. I don't care what number you produced. I'm keeping my own count, I'm using my own count, whatever you told me you're producing, I'm unconcerned with.
[00:05:56]
So scan is again that way to kind of maintain state. Like we saw on that test earlier, you can almost implement a reducer-like situation just using scan.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops