Rx.js Fundamentals

Creating Custom Logic Observables

Steve Kinney

Steve Kinney

Temporal
Rx.js Fundamentals

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

The "Creating Custom Logic Observables" 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 demonstrates how observables work under the hood by creating an observable with custom logic.

Preview
Close

Transcript from the "Creating Custom Logic Observables" Lesson

[00:00:00]
>> One of the questions that we got earlier were a little bit more about how observables work under the hood. Like, what is the thing that triggers next and complete, so on and so forth. So I wrote one additional bonus test, which is we're gonna to kind of like write our own observable, in this case, with our own logic and kind of see the kind of different pieces of an observable.

[00:00:22]
A lot of times like you will just kind of either we're basing it off of things that happened. Were taking a promise and turn it into observable. We are taking events I think about making your own bespoke observable a lot like when you use the promise constructor to write your own promise, does it happen?

[00:00:42]
Occasionally. Does it happen often? Nope. Right. And that is very much the case about constructing a new promise. Our new observable as well is most of the time you don't need to do it. But let's show you how just in case. So we go here and here we can go ahead and say omega observable, and we'll say new observable.

[00:01:07]
And how when you make a new promise it's new promise it takes a resolve and a reject. Not dissimilar an observable takes a subscriber you can name it whatever you want, but that is what the type script and telesense will, suggest that you name it. And in here we can write all of our custom logic around how this observable should work.

[00:01:30]
So, we could say, subscriber.next('John'), We can say the one after that is Paul, George, Ringo. And because we're doing this one by hand and not using of or from we are in charge of telling the observable when it has completed, right? So this one we'd say instead of like return in the generator that we saw before, we'll just simply say subscriber.complete().

[00:02:06]
And that doesn't take any values. And this is effectively very similar to that generator that we saw as well. The important thing to note is we've seen now synchronous observables and asynchronous observables, right? This is a synchronous one, because when we create the new observable, it's just going to run through this code.

[00:02:24]
Right? And we'll kind of play around with some of this in a second just to get a sense of it. But it's going to run this line of code. Its just its normal JavaScript. There's nothing particularly special until you were to put like a set timeout in there.

[00:02:35]
Well then yeah right like that would have it would become an asynchronous one. We'll take a look at this in a second let's just make sure this test passed before we play around with it any more than that. Great and now it passes. So the interesting part here is also we know with promises for instance, once a promise resolves that's it, right?

[00:03:01]
The promise has resolved that's how I feel about New Year's resolutions. Same thing is true with an observable, once it completes we'll never get to this line of code. It's almost the same thing as like a return statement in a function right, once you get to that complete it is game over we'll never add Ringo to The Beatles which is sad.

[00:03:22]
But that's the example and so this test will now fail, because, should fail, it's running. Yep, it fails because Ringo has been kicked out so the little minus sign Ringo is not in there, because we've already completed it, we closed the observable stream. It is over at this point.

[00:03:41]
So if we were to throw an error, anything that would happen after the error. If we didn't catch it would also complete the observable as well. So this is how you can kind of write a bespoke observable if you need to. If you have some kind of custom logic that of or from or whatever, doesn't work for you.

[00:03:57]
This will do the trick and you can write your own logic in this case, as well.

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