Creating Observables Solution

[00:00:00]
>> So, the first one again, these are just basically to get our, it's one thing to look at a bunch of slides with observables on it. It's another thing to just kind of like play around with them a little bit. And so, we're always going to kind of have a bias towards getting our hands dirty with some of this stuff and just playing around with it.

[00:00:17]
This first one is not much different than we saw before. In fact, in this case, we have in a single value, right, so we can unskip this one and not too much given previously where we'll say, observable of 1 and then we'll subscribe to it. Push(value)and I'm gonna put that on my clipboard cuz I'm gonna use it one or two more times as we go along.

[00:00:59]
So, just as we saw before, this isn't much different. Cool, so, then we have this idea that we want to just have one of a bunch of objects, right? And this one is to kind of somewhat resemble a reducer in this case where we might have a bunch of actions that flow through, right.

[00:01:19]
We might want to then be able to turn that stream of actions that are happening through our UI that are being dispatched, if you will, into an observable as well. And again, this one we're gonna use of but it is relatively the same basic idea where we can pass in primitive values.

[00:01:37]
We can pass in objects as long as we separate them out as arguments as well. So one, skip this one and in this case, we will go ahead and say, And I'm, just grabbed this, will have each of those arguments, As well. And we need to subscribe to it because if you don't subscribe to it, then the test will fail because you will not actually put those values into the array.

[00:02:11]
And that's again, the simple act of creating observable does not do anything. Observables only activate when you subscribe to them. Which kind of there was some questions earlier about like frameworks. One of the really cool things about this is you can set up all your logic and you say, hey, when this component mounts, subscribe to this observable.

[00:02:28]
When an unmounts unsubscribed to the observable and now you don't necessarily have to like worry about these things it's just kind of happening for you in this case. Cool, so, in this case we just separated as different objects again if you had an array and you wanna use array what's the utility function that we use.

[00:02:46]
From exactly. All right, speaking of from, so here is the basically the same idea, but in this case we want to use it as an array, so here we'll say, Equals from and now we're given an array instead of individual objects. Yeah, for more times especially when you have things in array this is just probably the one you can use just a little bit more, we go paste that in there as well and then we'll grab these values and keep them in array, right?

[00:03:16]
So, making some of the observables. Effectively, pretty straightforward. Now, again, when you have all your values from the get go, right, like, you probably could have just used an array. This is really useful when we have things when we're dealing with multiple observables, where we're getting different values out and we wanna turn it into a stream.

[00:03:34]
And we'll see this when we start combining observables like, hey, I have this observable stream, hey, I have this thing that's not an observable. I really need to make it an observable, so I can combine those two streams together and do some work with them. A lot of times you just need to convert your data into the basic through the same kind of format, so you can use it throughout your application.

[00:03:54]
So, skip this one as well, validate that it works, kinda move along in case it, will check back if it doesn't, but, all right, so here we have a generator. And I said before generators are kind of observables, where they kind of we'll generate it will basically yield the first value pause, yield the second value pause, yield the third value pause and eventually return the fourth value in this case.

[00:04:23]
Now, you look at the test, you'll notice something a little bit different here, which is, we only expect it equal 1, 2, and 3. Does anyone know why?
>> Yeah, a return is basically a completion. Observables actually don't pass an argument to complete anyway. So, the only things that are yielded from this one in this case are the three values.

[00:04:48]
So, we'll go ahead and skip this one. And we'll go ahead and we'll just make one from, And the other thing we have to do is a lot of times you think you could just pass that in, you actually need to create the generator instance itself or else it won't do the thing and we'll say observable dot subscribe Awesome, run that test.

[00:05:24]
>> So maybe you wouldn't do this, but if you were writing a generator function that you wanted to turn into an observable, should just never expect to get that return value?
>> Yeah, you should never expect to the return value. Where generators and observables become interesting gather we'll see this later, is if you have a generator that maybe is infinite, right?

[00:05:47]
If you look at this one's just running through the generator 1 2 3 going for it, right? When we get to operators and we'll see just making things into streams is great and wonderful. It is manipulating those streams and playing around with time that becomes a little bit more interesting.

[00:06:02]
That's where like we can have an infinite generator set. We only want values in a certain case up to a certain extent, skipping this many values. A lot of times your generator if it was quote unquote infinite needs some stopping maximums like a for loops, right? Otherwise you end up with an infinite loop if you tried to iterate over it.

[00:06:16]
Basically, an observable allows you just take out the difference between generating values that can be the generators job, knowing when to start and stop it becomes the observables job and we have a separation of concerns. And I will show you some code in a little bit that will basically, will see a generator has a stopping condition, will see a generator that goes infinite will then use observables to create the starting and stopping as well.

[00:06:41]
Which means that you can then use the same generator, multiple places throughout your application. And then let the observables the different observables you're using different places be in charge of knowing exactly what to do with those values as they go through. Alright, so now we have those asynchronous issues.

[00:06:58]
Here we have one we'll deal with a promise. So, here we have just done function which allows us to tell just when to actually check everything. So, we can kind of go through here and now we need to figure out not only when a value is emitted that's important, but we've done that we've done that like three times we got it.

[00:07:16]
But also knowing when it's completed cuz it's when the test is completed, that we need to actually check to see if the results are the right or what we think they are. So, here's a promise, resolves one, we should see that result in an array. Let's go ahead and let's create the observable first.

[00:07:35]
And we'll say from our promise in this case, and so now we need to subscribe to it. And if I just give it an x value, this test will fail. Let's make it fail. Let's do it. So, if we do it the way that we've normally been doing it.

[00:08:01]
Result.push(value), run it, should probably unskip it if we'd like to fail. But we'll run in this case and it's going to fail because nothing got put into your array yet because basically we subscribe to the promise. The promise went on the event loop, right? Then the test one to see if there's anything in the array.

[00:08:20]
There's nothing there yet. Check, the test failed and then the thing I put in the array, right? So, in this case what we wanna do is we want to wait until the observable has been completed. So, here we'll say next, we'll put the value in and then when it completes that's when we'll go through expect everything and then tell Jess that we're all done in this case.

[00:08:46]
So, run it again. Great, now it passes, right and so, there's nothing synchronous or asynchronous about observables. And we'll see a little bonus section at the very end. Like how exactly this might work under the hood. But, in the case of asynchronous ones, you just have to treat them that way.

[00:09:08]
All right, so, what happens when a promise rejects? So, the nice part about from is that it, when you give it a promise, kind of wire itself up to all of the kind of accoutrements of promises in this case. So, what we can do is what happens when a promise rejects.

[00:09:30]
What do we use to find that error? Catch, right. And so, basically, when it resolves, we get an x value. When it catches we it emits an error value alright? And then it completes, is observable made directly from a promise is very similar to a promise. It resolves.

[00:09:49]
It rejects and then it completes. Why is this useful? Because you can imagine a world where somewhere in observable, we might wanna to make an API request, right? And being able to then get that back into the stream is super helpful for us. So, we'll go ahead and we will kind of try this out.

[00:10:11]
So, here we have a promise that immediately rejects. And so, what we'll do in this case is we need to say Observable in this case, and it will be from this promise, which is not gonna go well. And in this case we will say observable dot subscribe and this one is never going to give us an x value, you could prepare for the happy path, but like this is a pretty straightforward promise it's going to reject.

[00:10:47]
That's all it knows how to do is reject. So, in this case, we have an error situation. Now, the thing about errors with observables is error is effectively a completion state as well, right? When an observable encounters an error, it's done, it unsubscribes. Game over, right? So, we can actually put our done logic in this case in the error as well.

[00:11:11]
So, this time instead of getting nothing like complete you will at least get a copy of the error and so here we will go ahead and we'll grab our test logic. We wanna skip it. And we can see. Awesome.