Check out a free preview of the full Advanced React Patterns course:
The "Rendux Exercise" Lesson is part of the full, Advanced React Patterns course featured in this preview video. Here's what you'd learn in this lesson:

Kent practices implementing patterns with Rendux, which is redux as a render prop.

Get Unlimited Access Now

Transcript from the "Rendux Exercise" Lesson

[00:00:00]
>> Kent C. Dodds: Let's just go over the last example, where we combine all of these patterns together. So let me reset, get us in a good state. And pop open 13 exercise.
>> Kent C. Dodds: And then let's go to the Bonus Round. Rendux. So this is Redux as a render prop. That's what we're implementing.

[00:00:28] And we're swapping out all of our toggle, like, boring one property stuff to our application state. So now we can manage our entire application state using all the same patterns that we have been using all day. So this is what it can do. It's not very interesting. But you can control that.

[00:00:54] It's kind of fun, right? Woohoo. So, cool let's take a look at what the exercise is. As far the usage example, we have this Rendux component now, not toggle. And we can provide some initial state for it. We can provide a reducer. And this is actually just plugged right into the createStore from Redux.

[00:01:23] And based off of all the types, you return different state and whatever. From this point on, it's all just regular Redux stuff. You create a reducer, all that stuff from Redux. And then here we have our render prop. We're just here accepting a reset. So we can have that reset button.

[00:01:42] But we're also. You're gonna use the provider pattern in here as well so that elsewhere we can use the Rendux consumer to pull out state. And that state is gonna be what we call rendux. And rendux will have rendux.state, it'll have rendux.dispatch, which just points to the redux store dispatch.

[00:02:04] And so on and so forth. Then we have this special input that when you type in on, it's gonna update the value of the toggle to true. And off and so on and so forth.
>> Kent C. Dodds: Okay? So what I have given you already, I gave you some, like, just grunt work stuff so you don't have to do all of that.

[00:02:31] I also did as much of the Redux specific stuff as possible, because this isn't a Redux workshop, so I don't care if you know Redux. It's totally cool if you don't. So I did lots of that stuff for you. So the render function is your job. And there are a couple other things that you'll need to do.

[00:02:53] But Cody the Koala took the day off and will not be helping you with this one. So that's tough. And then there's also the withRendux, which is actually is just used once here. Mostly just here to help you have a chance to implement to a higher-order component. So yeah, we can start the test here with, let's see, npm t to start up the test.

[00:03:26] We'll go to these tests and swap these out.
>> Kent C. Dodds: And get started on this exercise.