Refactor React Render Props to Streaming Props with RxJS and Recompose
Kent taught us about the concept of "render props" in his lesson from the Advanced React Component Patterns course here: https://egghead.io/lessons/react-use-render-props-with-react
This lesson takes the concept of render props and migrates it over to streaming props by keeping the same example and simple refactoring the Toggle component which handles the render prop.
Instructor: [00:00] Let's refactor this render props pattern where a render function has props and returns a render function from those props. In this scenario, this toggle component is keeping track of state, and then the render function provided is rendering out this switch in my toggle component.
[00:16] I'm going to rename this to toggle stream, which will blow up everything because I need to now create that toggle stream component and make it use the exact same API.
[00:27] Say toggle stream is a component from the stream. I'll take our prop stream and our prop stream will map -- let me reformat -- our props to a component, but in this case, we're actually mapping to props.render and invoking it, so this is our component.
[00:49] Right now, we need an ON. Let's set this to TRUE and a toggle function, which can be just an empty function. You can see we're already back in business, but this doesn't have functionality. To track the ON in the toggle, I'm going to wrap this in curlys, return the stream, reformat, and set up our toggle stream.
[01:12] This will be a create event handler and we'll get our handler and our stream. The handler can be toggle, the stream can be toggle$. With a handler named a toggle, we've already solved this because calling toggle is going to push values through our stream.
[01:31] Now, to create our -- I'll just call it a toggle state. We'll just have this be toggle, we'll have it start with the value of TRUE, and then I'm going to scan where this can be just a boolean that flips. If it comes in TRUE, it'll flip over to faults and vice versa.
[01:48] To get the current value from toggle state, we'll do the combine latest instead of map. Combine latest with our toggle state, and this will be props, and I'll just call this ON.
[02:00] In fact, if it helps you track it, I'll rename this stream just to ON$. Now, this ON will be passed down to here, I can delete this, hit save here, and now start clicking my button.
[02:14] Hopefully, this demonstrates how the render prop pattern, where render returns a render function off of the props maps really well with the concept of streaming props, where this component can simply stream the values coming in through the props and render out whatever you give it.
[02:28] Whether I use the toggle component, hit save, where that's working, or my new toggle stream component, hit save, you can see these are behaving the exact same way. The main difference now is that with a stream, I can make requests, buffer, set intervals, debounce, collect values, do everything you can do as streams.
[02:49] Probably the silliest most simple example is observable interval -- a tenth of a second and start with TRUE -- and I'll just watch this button fly back and forth.
[03:03] If I did something like bump that up to a second and merge this together with our toggle stream, I could have both of those streams streaming in where it goes back and forth every second, but I can also click it. I can control the click, but it also goes back and forth on its own.