Check out a free preview of the full Advanced State Management in React (feat. Redux and MobX) course:
The "Connect React and Redux" Lesson is part of the full, Advanced State Management in React (feat. Redux and MobX) course featured in this preview video. Here's what you'd learn in this lesson:

Continuing on, Steve completes hooking up the input field to the Redux store.

Get Unlimited Access Now

Transcript from the "Connect React and Redux" Lesson

[00:00:02]
>> Steve Kinney: So what we wanna do is we want to wire up the,
>> Steve Kinney: Let's do the number of people container, right we might just stick with one for now just to see. So what we'll do is we will pull in,
>> Steve Kinney: This connect function,
>> Steve Kinney: From react-redux.
>> Steve Kinney: If you ever get mixed up and type in redux react, you will join legions of other people who do the same thing, it's okay.

[00:00:36] So we have connect, and connect is going to wrap a component. It's basically that higher order component pattern, that we saw yesterday, just kinda bundled up really nicely for us. And what connect does, we wanna export the container, so export default,
>> Steve Kinney: connect, and connect basically we have these high order component functions.

[00:01:02] Before this actually creates a higher component function, so it's one level above that. And it takes two functions that are put together which is one called, and you can technically call this whatever you want cuz you're gonna create them. mapStateToPrompts and mapDispatchToProps.
>> Steve Kinney: And you see these red lines cuz we have not created these, we have to create these, and basically, you have that giant state tree, right?

[00:01:29] A given component possibly doesn't care of that specific about that entire stage, it only cares about a specific piece of it. So mapStateToProps allows you to take the entire tree, just pluck off the pieces that you care about, and pass them to the component. One reason to do this, if the tree is very large, you don't wanna deal with the rest of it.

[00:01:47] And two is props re-render the components, so the less you pass in, you're not gonna have needless re-renders. And then mapDispatchToProps creates an object with, remember we bound those action creators before? It takes that and passes it in, as well, right. So basically, it creates a set of props which are the state that you wanna have and the actions that you wanna pass in.

[00:02:10] And it gets ready to receive a component, that will then wrap that in a high order component pattern, so you will have that ready to go, so it will also take in some component. We're gonna say Input right now cuz this is the number of people container, so we'll import that.

[00:02:32]
>> Steve Kinney: Input from'../,
>> Steve Kinney: components/Input. So now I have no squiggly red line there, and what I do have two squiggly red lines for is mapStateToProps and mapDispatchToProps. One easy way to fix that is to simply create them. Now they're not squiggly.
>> Steve Kinney: This will error at run time, because this is not what these things are expecting to spit out, which is nothingness.

[00:03:08] But this is effectively what we need to do to create this pattern. So mapStateToProps takes the state.
>> Steve Kinney: And we'll return a new object,
>> Steve Kinney: I mean, if you wanna pass the entire state reach through, you could do that. But ideally, we just wanna pick out one thing, so if we look at the input component.

[00:03:32]
>> Steve Kinney: We can see the input expects a label, but it also expects this value, and that's probably what we care about the most. So what we'll do is we'll return an object,
>> Steve Kinney: That is gonna have a value.
>> Steve Kinney: And the value can be, in this case, State.numberOfPeople.

[00:03:58]
>> Steve Kinney: Right so, now it'll create a prop that's called value that will be mapped to that piece of item and state. And that's really all that this one cares about, and the other thing we'll do is we'll import updateNumberOfPeople.
>> Steve Kinney: From the actions.
>> Steve Kinney: And we want to go ahead and say mapDispatchToProps.

[00:04:32] And that will receive the stores dispatch method, that we saw before that passing the result of an object, or an action creator to dispatch, kicks off the entire process, so this is the ability to dispatch things. And again, we wanna return an object, it's gonna take the object return from mapStateToProps.

[00:04:50] And the object that we return from mapDispatchToProps combine them and pass them in as the props to whatever component you give it.
>> Steve Kinney: All right, so now we'll just say return object that is, I thinks its call onClick if I'm not mistaking, or onChange on the input.
>> Steve Kinney: And that will be,

[00:05:15]
>> Steve Kinney: That will get a value.
>> Steve Kinney: And it'll do updateNumberOfPeople with that value.
>> Steve Kinney: I can call it either one, I just have to call it the same thing. So now this creates an object that has a value, and onChange, and we're gonna pass it into the input field.

[00:05:38] We know that the input also takes a label, I would probably choose to do that when I use this container component. I would still pass in a label, that prop will also be combined as well. So the props you pass to the component that we're creating as well as these things from redux will be passed in.

[00:05:53] One thing I wanna point your attention to real quick and then we'll review it, is this creates a function that then waits for a component. And what this allows you to do is, this could be like your with current user. And then you could use that same container that you are creating now, and use it for multiple presentational components.

[00:06:12] Which is a really powerful pattern that's why it's broken up like this rather than having three arguments in. You can pass in the first two and have a thing ready to wrap any component. In this state and set of actions, and then you can pass multiple components. We don't have a use case for this example but think about a current user, right?

[00:06:30] There might be multiple presentation components that wanna give the current user to, so you could do something like,
>> Steve Kinney: withCurrentUser and imagine that this is all stuff for the current user. And then we could say later,
>> Steve Kinney: Profile = withCurrentUser and then our User Profile component. And then if we wanted it for something else, like a profile edit, we could use the same with current user.

[00:07:06] So we can create this thing ones, we can use it for multiple presentational components. All right, very cool, now let's actually discuss some of the theory now that we've seen it in action.