Customize Effects from the Main Function

André Staltz
InstructorAndré Staltz

Share this video with your friends

Send Tweet
Published 6 years ago
Updated 3 years ago

How can we show one string on the DOM, and a completely different string on Console log? This lesson shows how we can make our main function return multiple Observables, each one targeted at a different type of effect.

[00:01] We now have an application with two types of effects, console log and dom. Both of these display the same string actually. What if we would like to show different strings? How can we show one string in the dom and a completely different one on the console?

[00:17] We cannot use the same sink for both of these functions. Of course we need to have two sinks. How do we that? From our main function, we know we need to return two different streams. We can do that by returning an object for instance. We're going to return an object, and we're going to have under the property let's say DOM, we're going to have this stream.

[00:41] Then under a different property, let's call that for instance log, we're going to have another stream. This is how you can return two values in Java Script. You can just bundle them together. I'm going to make a stream of periodic, let's say every two seconds, and we're going to count numbers. A slightly different type of stream.

[01:06] Down here we're going to get sinks as outputs in many of these streams, and I'm going to pass the DOM sink to the domDriver and the log sink to the logDriver. Once I run this we're going to see different numbers at different times, and unrelated.

[01:24] This is how we can control which data goes to which effect. We should do that specifically in our main function, because this routing of data is basically logic right, and we know logic should live in the main.

~ 5 years ago

Andre, thanks for all your work. A quick comment to one of your first lines:

"Both of these show the same stream" really threw me. Coming from a Rxjs background, they don't. It took me a while to realize xstream is hot-only. Suggestion: Throw in a line about this difference between xstream and rxjs.