Async with Rx.js Solution

[00:00:00]
>> Kyle Simpson: Okay, let's take a look at the solution for our asynchronous exercise with observables. As I showed you here in the comments, the way to call an operator using Rx version six and above, is that we take an observable, which is what we're getting back from this call, and we call .pipe on it.

[00:00:19]
And we're going to pipe just like we did with our pipe in our previous exercises and in composition. We're gonna list out one at a time in order from top to bottom, AKA left to right, we're gonna list out any of the operators that we want those values to be piped through.

[00:00:34]
In our case, we just have one operator that we want to pipe it through, which is that we want to pipe it through the map call. Now remember, map normally takes two inputs. It would take a mapper function, and also the thing to be mapped on. Here, we're only gonna provide the first of those, because it's a curried function.

[00:00:53]
So we're gonna provide formatCountdown. And this will provide us a unary function that's expecting a value each time. So each time one of these numbers comes through this observable, it will end up piping itself through this formatCountdown. And that end result is the end result of the countdown observable, and then we are subscribing to that countdown observable and simply printing whatever we get through to the console.

[00:01:22]
So formatCountdown needs to take a counter, and if you remember when we ran the unfixed exercise, the counter started with -1, and then 0, 1, 2, 3, and 4. So those are the counter values that are coming in and we need to format those as a time, and the time can be formatted using this formatTime utility.

[00:01:44]
So if we were to just simply call return formatTime with the counter and we ran that, it wouldn't be quite right because we'd be getting -1 and we be counting up, we'd get 0, 000, 001, 002, that's not what we want. We want it to basically go in reverse.

[00:02:05]
So to make it go in reverse, what we actually want to do is do a subtraction from something. What do we want to subtract from? How about the countdownLength? So if my counter is 0, then what do I want my actual countdown timer to say, I wanted to say 5 and 4, and 3, and 2.

[00:02:24]
So, what I'm going to do is do countdownLength minus counter. And if you ran this, you would see we have an off by one error, which is the whole reason for me throwing the -1 in there so that we can fix our off by one error, so we need to subtract out one more value from it.

[00:02:43]
And this will now format the -1. If we say countdownLength of 5 minus -1, which becomes 6, minus 1, then we have 5, that becomes 005. And then countdownLength to 5 minus counter 0 is 5 minus 1 is 4, and then countdownLength of 5 minus 1 minus 1 is 3, and so on, so I'll have 005, 004, 003, 002, 001.

[00:03:14]
And then finally, the 000 and immediately after that, this console complete is fired when the observable has finished. The big takeaways here are not so much about Rx, the way it works but that we can understand that we use Rx to take a stream of values like a lazy array as we discussed.

[00:03:39]
And we map that to another lazy array, we map it to another observable and then we subscribe to that observable to see the values coming through.