Connect Redux to React

[00:00:00]
>> Steve Kinney: The next thing that we need to do is hook it up to React. So the first thing I'm gonna do, go down here, and I need to wrap the application in that provider that we saw before. This allows React to be able to reach into Redux, it basically connects the two of them.

[00:00:17]
And we'll say Provider,
>> Steve Kinney: Provider does need a prop, anyone wanna venture a guess as to what that prop is?
>> Steve Kinney: You wanna hook it up to a Redux store, exactly, right. So now the we can theoretically hook up any component in this tree to our Redux store.

[00:00:43]
Right, we are most of the way there at this point. Now, this component, we're using Redux for all of our state management, right? Which means we are not going to be using React state. Which means everything that's gonna come into this counter is going to come in as a prop, including the current count and the ability to dispatch that action, right?

[00:01:09]
And so how do we connect a React component to our Redux store? Again, you gotta give the API designers some credit here for having a series of well-named functions, right? So we could say connect, connection's a little bit of an oddball, we'll see in a second.
>> Steve Kinney: connect itself returns a function waiting for a React component that says, okay, what am I connecting and then what am I connecting it to?

[00:01:50]
So it means theoretically, if you wanna have multiple components that we're gonna take our actions and the store that we're gonna use, you could do that. A lot of times you'll see them together, right, so you've got connect, and connect takes a few arguments. The most common two that you're gonna see are some function that maps some state of our Redux store to the component, so there's props that are getting passed in, and something that maps the actions in, right?

[00:02:21]
You don't have to call them this, but they are frequently called mapStateToProps,
>> Steve Kinney: And mapDispatchToProps.
>> Steve Kinney: You can call them sandwich and taco, it doesn't matter, right, it's just the first and second arguments. This is just the convention, and I would totally argue that you stick with the convention.

[00:02:47]
And what mapStateToProps does is, remember, we talked about that giant tree. Not every component is gonna care about every piece of that tree, right? We can have other stuff in here, like an error state, current user, all this stuff. This kinda doesn't care about any of it. So what mapStateToProps does is, it takes the entire state of your application, that entire Redux state.

[00:03:16]
And it allows you to pick off the things that you want, that we're gonna pass as props to that component. Because if we passed the entire state into that component, that means that, even if stuff in the state changed that the component didn't care about, we would trigger a re-render.

[00:03:33]
Right, we don't wanna do that, we wanna basically say, here are the things that you care about. I will pick them off the tree for you, and I will hand them down. So mapStateToProps takes one or two arguments, the first one is the entire state tree, everything, right?

[00:03:51]
And you could theoretically just return it, and that will pass the entire state of the world down. Right, that will actually work for our purposes right now cuz there's only one thing. But when we build our larger applications, that's not going to work. Basically, you take the entire tree, return just the things that your component needs, maybe format it as your component needs.

[00:04:09]
One of the things we talked about in the prequel to this workshop on React state was that sometimes you have to derive additional properties from existing state, right? And so if you had done to-dos and undone to-dos, right, you might wanna split them up into two different arrays, right?

[00:04:28]
You might wanna total stuff up and count it, that you can also do in this function. So in this case, we could return the entire state of the world, which is going to be effectively this object on through. And we'll get a little more nuanced in a little bit on how to do that.

[00:04:45]
The other one is mapDispatchToProps, which is, it takes this dispatch argument, which is effectively pointing to store.dispatch, right? This gives you the ability to go ahead and dispatch those actions to change that state, which will then pass those new prompts into Redux. So what we'll do here is, this returns an object, they both effectively return objects.

[00:05:11]
This one returns objects, we'll call this one increment, and that is going to dispatch, right, the same as store.dispatch. And you could write your object in here with a type and everything along those lines. But we made this helper here, incrementValue, so we'll pass it in and we'll call it.

[00:05:31]
Right, so now, our counter component is going to get two props, right? It's gonna get that entire state of the world, right, with that count on it, and it's gonna get an increment prop. The object that gets returned out of mapStateToProps, and the object that gets returned out of mapDispatchToProps, are combined into the props, [LAUGH] right, that go into the component.

[00:05:58]
So for instance, we can actually say in this case const { count, increment } = this.props. And I'm gonna start just by console logging to make sure we've got, we do a lot of talking, make sure that we've got,
>> Steve Kinney: Cool, also start up the application.
>> Steve Kinney: Cool, unexpected token, cuz I didn't put in the render method, good thing we started this up, right?

[00:06:45]
>> Steve Kinney: Cool, the other one is, I'm getting yelled at because I have an import, they want them all at the top.
>> Steve Kinney: It gets very angry, so I just switched versions of Node. Node-sass is a C++ library, so it has to get compiled against a given version of Node.

[00:07:02]
And if you are on a wrong version of Node from when it was compiled, things don't work.
>> Steve Kinney: Cool, so we've got this object here. All right, one thing we didn't do earlier is, we made these mapStateToProps and mapDispatchToProps, but they are not magical. We do need to pass them in, so the first one is mapStateToProps, the other one is mapDispatchToProps.

[00:07:31]
>> Steve Kinney: All right, great.
>> Steve Kinney: Next thing that we have problem with is, this does not mutate the counter, right? It returns a brand new component, so we need to store that.
>> Steve Kinney: Typically, in the kind of prequel to this workshop, we saw the container pattern. Which is, take the state on a higher order component, pass it in to the presentational component.

[00:08:01]
This is an implementation of that pattern that is just handled for us. All connect does is, it takes the two functions to figure out, hey, what actions do I need to pass in, what state do I need to pass in? I'll make those props and I'll give them to this component, it creates one of those higher-order components for us.

[00:08:18]
Neat, and then all we need to do now is use that new higher-order component in here. We should get everything we want now. Cool, perfect, so we've got the zero, and we've got this function to increment. These are now props that are getting passed in, and so really, I can now replace this one,

[00:08:39]
>> Steve Kinney: With count,
>> Steve Kinney: And we can say onClick,
>> Steve Kinney: increment.
>> Steve Kinney: And up we go, right, we have now taken state that we normally like putting this out. So state made some methods on the class object or used hooks or something along those lines and cast them in, we've separated out.

[00:09:07]
None of React knows anything about the state. This is kind of like, for me, like we were talking about in the very beginning, you can take a state of the world. Your React application becomes declarative, you're just saying, hey, show these props, fire these actions. Redux handles it all separately, so your React to application is deterministic.

[00:09:26]
If this object comes in, the application will look like this, which is really kind of great. We'll see some other interesting things you can do here as well.