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

After walking through the solution to the Rendux Exercise, Kent wraps the Advanced React Patterns course by thanking the students.

Get Unlimited Access Now

Transcript from the "Rendux Solution" Lesson

[00:00:00]
>> Kent C. Dodds: All right, let's go ahead and implement this bonus Rendux thing. So I'm going to pull in the exercise version. We'll run the test. And we'll get our first error. So we're not rendering the search component, let's go ahead and start implementing some of this stuff cuz we've got a fair amount to do here.

[00:00:21] So, I actually provided as much as I could, that was Redux specific. Cuz I don't think that you really care to learn Redux in this workshop. Feel free to learn that elsewhere. So yeah, some of the Redux staff I provided for you. And we'll just be doing some of the pattern stuff.

[00:00:39] So, if we look at the usage of the Rendux component. It's taking the initialState, it's taking the reducer. And then, I kinda covered this already but it's taking this function as a child or this render prop. So that's where we're gonna start, is our render prop. Actually, before that we need the context.

[00:01:01] So let's do that first. So, we'll make our RenduxContext=React.createContext. And we'll initialize this will all this stuff that our usage example is using. So we've got rendux .state and rendux.dispatch. And down here, we have, actually, it's easy to render version with the reset. So, we're going to need those three things in our default.

[00:01:31] So, we'll say state, as just an empty object, reset is a function that does nothing and dispatch, likewise. Great, so, next, so let's go ahead and implement the provider pattern. So, we'll return a toggle or the RenduxContext.provider and because we are using both the provider pattern and the render props, we're gonna pull out our UI.

[00:02:05] Here, actually, let's just make this a little easier to read. We'll do children goes to set props. Then we'll get our UI from type of children, function, then we'll call the children, children. Otherwise, we’ll just do the children. Okay, great. And then we’ll render the UI and let us not forget, the provider also needs a value.

[00:02:29] This.state. That's an inside joke. All right, so the, we’re rendering the provider we’re also handling the render prop, that's great. We need to also expose the consumer, so that people can Rendux.Consumer. Technically, they could use Rendux.Context.Consumer, that'd be totally fine if you wanted to do that way. It'd work fine.

[00:02:52] But I actually like making that explicit and this is the only way you can access the context, as a static property off of my component. So I'll say static Consumer = Rendux.Context.Consumer. And let's save that and see what we broke. All right, so, well [LAUGH] this is a familiar error, okay, so we don't actually or we haven't yet implemented anything on our state.

[00:03:23] We haven't initialized our state at all, so let's go ahead and do that. State, this first thing is saying hey, we can't read reset, so let's make sure we have rest on there. Reset, this.reset. And again, it's kind of weird to like callback handlers in your state because they're not things that change ever but in the case of context, it's the easiest way to expose these things to context without worrying about unnecessary re-renders.

[00:03:51] So, that's what we're doing here is adding that to our state. We're also gonna want the dispatch method to this.stored.dispatch. And then, we'll have our state, the state within the state, is gonna be this.initialRenduxState.
>> Kent C. Dodds: Okay, cool. So, so far so good. One thing that we need to do is implement this higher order component.

[00:04:27] So, that's what's failing is it can't find the printed state, which is being rendered here. So, let's go ahead and implement our higher order component, so we had the wrapper=React.forwardRef. That's gonna take props and the ref that we should forward and we'll return the component here. We're gonna return Rendux consumer and this will, inside, use the render prompt that the consumer's exposing.

[00:05:06] That'll take the rendux thing, rendux utils. Whatever you wanna call that and render the component. And here, we'll forward on all the prompts, we'll forward on the ref and we'll forward on rendux. Oops, rendux
>> Kent C. Dodds: And then we'll return the wrapper instead. Okay, cool. We're passing tasks. We could improve this.

[00:05:30] So, we're not doing the Poisson non-react status, so let's go ahead and do that really quick, so we don't bump into problems in the future. Wrapper component and then, let's also give us a nice display name for DevTools. displayName = 'withRendux(${Components.displayName || Component.name})'. All right, let's actually, I didn't get a chance to show you what this display name looks like in Dev tool, so let's look at that really quick.

[00:06:08] That's in our, over here, going through our reactive tools and it's saying unknown. I don't know why it's saying unknown, it should be display name, what? Boo
>> Kent C. Dodds: Well by golly, you know what, maybe, I'm not sure what that is. Maybe if we do this.
>> Speaker 1: It's not because it's a cons is it?

[00:06:38] You can.
>> Kent C. Dodds: No, no, you can reassign properties on cons. I don't know, that's weird. Somebody find out what that is and send a poll request to the Front End Master's recording. But yeah, so that is, that's the whole thing. So hopefully, at least this last thing gave you a peek into the fact that these patterns aren't just useful for a toggle component that's managing one thing in a state.

[00:07:04] But they are actually useful for managing an entire application worth of state. In particular, for provider pattern for solving our problem and thank heaven to react context API for making that really easy to do. And then also, the render prompts for giving total control over UI state reducers and control prompts for giving control over the state.

[00:07:27] And combining these things together, you can really make some highly flexible APIs for people to consume in any way that their use case needs. But the really nice thing about these patterns is that they're pretty low level primitive patterns that you can build on top of, to make components that make even more opinions.

[00:07:48] So, I've actually been waiting for somebody to re-implement some other autocomplete solutions with downshift because the other autocomplete solutions are easier to just get up and started with. You just like here is autocomplete items equals this.pops the items. And it's really easy. Even if it's quite not as flexible.

[00:08:11] It's a lot easier. But I think the reason that people haven't done that is because it's pretty generic or like case by case basis. But the nice thing is that, you can build on top of these things to provide cleaner nicer APIs for specific use cases. And also, with higher order components being able to build on top of these render prompt APIs makes it a lot easier too.

[00:08:35] So I'm really excited about these patterns. Thank you so much for looking at my Twitter. [LAUGH] So, thank you so much for coming out to the workshop. And with that, I'll just say, goodbye and please go ahead and submit feedback, I'd appreciate that. Thank you. [APPLAUSE]