Basic Operators Solution

[00:00:00]
>> So, with that let's go and take a look. One of the things that I gave myself was get result, which does that collecting everything in a array, and then we'll resolve it for me. And then these are now a sync functions than just, wish if you return the expectation, it'll wait for the promise to resolve in this case.

[00:00:26]
So, it's just syntactic sugar, over what we did by hand before, but I couldn't be bothered to make arrays subscribe to things over and over and over again in the interest to save time. That was cool when we were trying to get an understanding of the API of an observable and subscription, but that's old hat now.

[00:00:45]
So, we're good in that sense. All right, so here we have one, where we wanna take a series of numbers, and we wanna end up with we're dinosaur, very loud, about four times. So, what are the two operators? I only want five out of the seven items in the stream, what operator speaks to you?

[00:01:10]
Take, right. So, we could say take, we'll say five. Right and we'll make sure yep, we have it imported. So, we'll take five, and this will give me now 0,1,2,3,4,5. And I really have two options, if I want to take these numbers and change them into the same value, what am I two options?

[00:01:32]
>> Map or map two
>> Map or map two, in this case map two is probably makes a little bit more sense. So, say map two. And map two seems like why would I ever use this? Will actually use it a little bit, like there are some times where like, you could say like, hey, let's say hypothetical starting and stopping a counter, right?

[00:01:52]
The start button I might always want to map to true. And the pause button I might always want to map to false. And then I can figure out is the counter running or not? Or what the desire state is rather than going like, is the event from this event target, this, right?

[00:02:06]
Just map does want to stream to true mastery to true or false. When I get them both together, I will handle my stuff. So, that's the kind of if it feels silly. In this example, it is silly, but like we are again, we're building towards some stuff here.

[00:02:20]
So, we have that in place, and that passes. Okay. So, I wanna skip the first five values and double the last two. The answer this is one of those longer where the answers kinda in the question, right? If take takes the first five, in this case skip the first five, right?

[00:02:40]
So, in this case we can go ahead and we can skip five of them. And then we will map and map takes the value in this, what do I with at this point which is multiply it by two. Awesome. I let that pass. All right, so now, we're escalating a little bit here.

[00:03:02]
We want to omit the square of every even number in the stream, right? So, we want to kind of ignore the odd numbers. And then we will multiply the even numbers by themselves, what do we use to ignore? I guess it's really glass, half empty glass, half full kind of thing either ignore certain values, or only allowing other values.

[00:03:32]
What's the operator for this one?
>> Filter. Filter, in this case we will filter, and we'll say in this case, if it's not even, only allowed even once through, and then which point we can then map. Cool and we will unscope that test Let's well, all right, it's passing.

[00:04:04]
All right, so we want all some of all the total Fibonacci numbers under 200. So, we only want to take them while they are beneath 200, right? Less than 200, which operator we use in this case?
>> Take while.
>> Take while, we could try to lucky guests would take, that would work.

[00:04:24]
Totally didn't do that a few times writing this test, was making during the exercise would never dream of it. So, this is when you take a while. Okay, so, we'll do as long as less than 200, and then we want a final total. You notice there's only one value in this array that we ever admit.

[00:04:49]
So, which is the, we have two choices here. I'll give you the two choices. And you The right answer, is it reduce scan?
>> Reduce.
>> Reduce gives us the final value. Scan will give you everything along the way. So, we'll say total and, We'll give it a starting value.

[00:05:15]
And we're on skip this test. One of the things that we could do is having a starting value, always make sense. There is another helper that we'll see a little bit that called start with, which will then shoot any value through that observable stream and the very beginning.

[00:05:32]
There's also bandwidth, right? So, you can have the first value and the last value that goes through, no matter what regardless of what the observable does by default. This could be useful if you have an input field, and you want to be like cool, like nobody's typed anything.

[00:05:46]
I don't have anything to work with here, shoot through the initial value, something along those lines. So, start with is another one that we can use, I don't know if have been imported. So, that might blow up
>> Just the reduce function work like array reduce, where if you don't pass a second parameter, it just uses the first and second values together to combine.

[00:06:06]
>> I think the first value goes through it. Yeah, the first, yeah. And then the second value would be the
>> Yeah.
>> And where reducing scan can be somewhat interesting is it's one thing to total up some numbers. The other with scan you think about you have, you can take an object, right?

[00:06:27]
And then as things go along, let's say actions, if you wanna call them, go through the stream, you could take that object of state. You take the object that comes through, and figure out how you wanna augment that object, and effectively create a redux reducer out of the box.

[00:06:46]
So, this could be interesting verb, if our counter got more sophisticated and we're like, okay, by what interval do we want to count up? How like by fives by twos by ones, what rate every second, every five seconds up or down. What we could do is, if you've ever used any kind of like redux flux like data store, you could theoretically use scan.

[00:07:09]
As every action comes through, manipulate the final state along the way, and you'll get every state transition, right? As you kinda go through as well, so that's where this can become somewhat useful as well, and what would that look like? Well, here we have a pipe and we'd say scan, in scan we'd have the current state, and next, like this one's not using like x kind of augmenting the object in this case.

[00:07:37]
Alright, I have that one in here too so, now, it will go ahead, and will if it fails for some reason. It's going to try it again, if you try it again and try it again now, this one fails one every two times JavaScript gets very confused. And in this case, again, we've basically built a mini version of redox just using the scan operator and passing through a series of values, right?

[00:08:09]
You could call this action it would work. You just have to do the stuff you're normally doing reduce, or if action type is whatever, then do this state. But yeah, effectively, you can do a version of redux in just a few lines of code. So, yeah, there's some of the basic data transformation ones, right?

[00:08:29]
Starting with simple and getting, you can see how you might use this to kind of manage more complex things along the way.