Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 986 of the free egghead.io lessons, plus get RxJS content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Generalizing run() function for more types of sources

4:23 RxJS lesson by

Our application was able to produce write effects, through sinks, and was able to receive read effects, through the DOM sources. However, the main function only gets the DOMSource as input. This lessons shows how we can generalize main to receive an object of sources, containing all kinds of read effects that we can use.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Our application was able to produce write effects, through sinks, and was able to receive read effects, through the DOM sources. However, the main function only gets the DOMSource as input. This lessons shows how we can generalize main to receive an object of sources, containing all kinds of read effects that we can use.

Avatar
Kevin

Before we included Cycle core to invoke run as a library, shouldn't we have checked if source wasn't undefined for the proxySource associated with Log using if ( source ) or if ( !!source ) or if( source && ( 'subscribe' in source ) )?

In reply to egghead.io
Avatar
Andre

Kevin, that is correct! Official Cycle Core library has these checks.

In reply to Kevin
Avatar
Kevin

Right, understood (thanks for ignoring my mistake of not mentioning instanceof Observable instead of what I wrote before).

In reply to Andre

Our application is able to produce write effects through sinks, and it's able to receive read effects through sources. However, this main function only gets the DOM source as input, whereas this object has all of the sinks, so we could actually rename this to sinks as an object, and that's what we're returning.

So we're returning all of the sinks, but we're receiving just one source. Instead, what we need is something generic like we receive all of the sources from all kinds of different drivers. Maybe we might have HTTP read effects, such as reading from network requests, or we can have local storage, so the DOM source is just one of these read effects that we can get.

Main is expecting this object of sources. We go down here to run. Instead of giving just the DOM source to main, we need to give all of the sources, so we need to make proxySources, and that should be an object, proxySources. I'm going to remove the hard-coded code that we had here, and I'm going to go back to the generic code that we had.

We have the proxySources, but we need to fill in all of the subjects from RxJS. For each key in the driver object, we are going to make an RxJS subject. Same thing as before, but we're just being generic and creating a source for each of these drivers.

We can call main using these proxy sources, and each of these drivers may or may not return a source, so, actually, the console.log driver doesn't return a source here because we can't actually read from console. We can only write to console, so not all drivers are read and write. Some of them are just write. Some of them are just read.

If they do return some source, then we can get them from this function call, and then we can imitate that source back into the proxy. So we can do proxySources. We can get the prospective proxy source, and we can feed in that event.

Now every time a click happens on the DOM source, for instance, that click will be fed into proxySources.DOM and will be fed using onNext. If I'm not mistaken, every time I click here on the DOM, it resets the timer. Now this is working nicely. In fact, run is now getting to a pretty nice shape. Our toy Cycle.js is almost done now.

What we could do now is actually extract this run as a library. We could import this run and just call it. That's what we're actually going to do now. We are going to get the Cycle Core library. Here we're importing Cycle Core, and that gives us the run function.

We just imported the Cycle object, and that has run. We just imported Cycle.run, which has...Now, Cycle.run is coming from the library that we just imported, and as you can see it works, even if we click on the DOM and it resets the timer.

Basically, Cycle.run is not scary. It's almost the same thing as we just wrote, except that was a bit more simplified. This Cycle.run from the library actually has error-checking and some nice things to keep us safe. That's basically the idea in Cycle.js.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?