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 1083 of the free egghead.io lessons, plus get RxJS content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Isolating component instances

3:39 RxJS lesson by

We added classNames to pre-processing and post-processing steps when calling the LabeledSlider, in order to instances independent of each other. It would be better if we could hide these steps away. This lesson introduces the isolate() helper function to achieve that.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

We added classNames to pre-processing and post-processing steps when calling the LabeledSlider, in order to instances independent of each other. It would be better if we could hide these steps away. This lesson introduces the isolate() helper function to achieve that.

Avatar
Stephen James

I guess this answered my question from the previous video :)

In reply to egghead.io

We added these weight class names to our pre-processing and post-processing steps when calling the labeledSlider in order to keep these two instances independent of each other. It would be better if we could just hide these steps away.

Cycle.js has a helper function called isolate to do just that. We can import it here as a script into the HTML, and that gives us a global object or a global function called cycleIsolate, which I'm just going to rename to isolate smaller.

The way we can use isolate is we...it's a function that we can pass a component function, such as labeledSlider. A component function is just a function that takes sources and returns syncs, and we can pass a scope string, such as weight, and what it gives us is another component function that has the pre-processing step and post-processing step included inside it.

If we use it here, we don't need this anymore, and we also don't need this post-processing step, and it still works. We can use it also for the heightSlider. We're going to change the scope to be height. We're going to use it here. We don't need the pre-processing step and neither the post-processing, and it still works.

What isolate does is call these pre-processing and post-processing steps for us. Isolate works with all kinds of drivers, not just the DOM driver. If you want to learn more about how it works under the hood, just check out our documentation at cycle.js.org, but in this lesson we just need to know that it solves the same problem but with less boilerplate.

Also the scope argument is optional. We don't really need it because if we don't provide it, then isolate will create a random scope stream and use that to create independence between components. If we do that and we inspect the DOM, we see here that it created cycle scope cycle two as a random string. It's using that inside the intent in order to make these components independent of each other.

However, notice that isolate without the scope argument is not a pure function. This component here is not the same as that component because they are using different scopes, random scopes. You can leverage that to actually make a version of the labeledSlider which is already isolated.

We can do that like this. I'll just call it isolatedLabeledSlider, which is when it's a function of what that given sources. We'll just return the labeledSlider of that sources, but first we're going to isolate that labeledSlider, and then we can just call here isolatedLabeledSlider. Isolated, and down there isolatedLabeledSlider, and both of them still work.

You don't need to call isolate inside your main, but you can just use a component which already is isolated.

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