Check out a free preview of the full Complete Introduction to React (feat. Redux and React Router) course:
The "Using Redux in React" Lesson is part of the full, Complete Introduction to React (feat. Redux and React Router) course featured in this preview video. Here's what you'd learn in this lesson:

Now that the store is created and the connector is built, Brian replaces the existing state management code in the application with the Redux implementation. He wraps the entire application in a Provider component which gives all subcomponents access to the store. He then implements the connector in each component that requires it.

Get Unlimited Access Now

Transcript from the "Using Redux in React" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Speaker 1: Can you explain the map state to props in MAP dispatch to props?
>> Brian: Let's actually go use the connector, right? This is making a special components that's going to wrap our components. Let's go use it, and if you still don't understand it, let's talk about it because I feel like it's really abstract until we actually do it.

[00:00:25] It's actually fairly, it's fairly well like small in terms of what it does. I hope that's enough hand waving for you, and if it still doesn't make sense after we do it, let's talk about it.
>> Speaker 1: And any places that we could be console logging to help visualize some of this data flow?

[00:00:45]
>> Brian: You can certainly do it in your reducer.
>> Brian: Console.log(state, action), right? That would be the place to do it, but we're going to use redux tool momentarily and you can you can introspect using redux tools. Okay, so let's go make this work right now it's just a store doing absolutely nothing.

[00:01:11] So, we have to go do some, basically bootstrapping of this really quick. Let's go to client app.jsx.
>> Brian: And we're gonna pull in store here. So, up here we're going to pull in, I'll just do a dent here at the bottom Const Store equals require, dot, slash store.

[00:01:41] Const, actually what I wanted out of here is, I just want to lower case store really. Remember that one that we just created, we're just gonna pull that one out, and I'm gonna do const {provider} equals require('react-redux')
>> Brian: We're gonna use Provider here in just a sec.
>> Brian: So, let's do this the easiest way possible and will modify this later.

[00:02:23] I like making sure that router is always the root component of what I'm doing here, so I'm actually in a rap app down here in the render part, I'm gonna say provider.
>> Brian: Let's just do it out there not a big deal. JK, we're gonna do it right here.

[00:02:46] Provider and we're gonna say store equal store right?
>> Brian: Down here just indent this little bit, and then we're gonna /Provider right here, so what is Provider? Provider comes from react-redux which we saw right here. And what Provider is gonna do is anytime you at you use the connector it's going to automatically connect to our redux store and pull in data for you.

[00:03:11] But you have to give it basically this top level so that it can be able to manipulate whatever you're doing.
>> Brian: So this is a little magical and I really don't like magic if you've ever talk to me about programming. But it's pretty easy to understand how it works too.

[00:03:32] So, yeah. Provider. That needs to be closed too.
>> Speaker 3: I think there's an extra angle bracket inside the curly brace after store.
>> Brian: After store. There it is. Thank you. Okay. So Provider. This is from reactor redux it's gonna look for your Redux store wherever it is, right?

[00:03:55] And actually pass it in which is this, right? So this is our actual Redux store and now this is going to make this available to anywhere you requested inside of your app, right? So any place that we use connector It's going to find our Redux store and plug it in, right?

[00:04:10] So again a little magical but you just have to know that it's gonna be passing your store to wherever you ask for it. So this is nice because now you don't have this like magical store floating in the ether that sometimes you say, hey store give me stuff You just gonna plug it in just where it's needed and everything else doesn't even get to see it.

[00:04:29] Which is a good thing because then you don't get bugs we don't expect them. So it's explicit and being explicit this particular case is useful, okay. So this is just making it available now it's actually go use it.
>> Brian: So go into Header
>> Brian: Header.jsx. And we're going to pull it in here.

[00:04:56] So I want to bring in, const { connector } = require('./Store'}. This is the The connector wrapper that we wrote.
>> Brian: And the really easy way to do this is when we're doing module that exports down here. You can just do connector header. This is going to wrap it with our, our map state to props, map to station, dispatch to props.

[00:05:31] So basically we're saying like this. Stop props here and now we can also say that down here a console dialog this stop props dot search turn right. And this is now going to work not coming from like any other state. It's gonna come from,
>> Brian: Our store instead of coming from somewhere else and react.

[00:05:58] So this magically connected us to a redux store.
>> Brian: Okay, so now all we have to do here inside of header is we're gonna say this stuff this.props.searchterm. Yeah, instead we're going to have to use the one that comes from. We actually got to be called the same thing in a search term change sets search terms.

[00:06:28] Right So now this isn't coming from our parent this is actually coming from redux right So this is actually called Set search term. Right. That's what we called it. So it's going to set search term. And that matches up to. The function from store. So let's just look over at store.

[00:06:46] This matches up to this function right here, right. That's, that's the function we're calling.
>> Speaker 1: Which by the way needs an arrow between the argument, and the curly bracket.
>> Brian: Yeah you can do it that way to, this or, this also works.
>> Speaker 1: I got an error.
>> Brian: Okay.

[00:07:11] And that should work but that also works. Same diff, but I believe Okay so going back to header which is where we were so you understand where that method is that we're calling. It's coming from store And now that we've called connector and wrapped header, these things are being injected into the properties.

[00:07:38] That's what connector does is it grabs these methods in the state that we want and it injects that into our reacts component from redux. So it's the connector, it's the glue between redux and react.
>> Brian: By the way, if you're following my notes, I'm a little off the beaten path, by the way.

[00:08:00]
>> Brian: Okay, this all should work I think the way that I have it here. This needs to be setSearchTerm right here. And I think after that we're all good.
>> Brian: Okay.
>> Brian: So, save that, let's see if everything's working okay. I have one error in store, infix operators must be spaced, okay.

[00:08:30] Line 9, store.
>> [INAUDIBLE]
>> Brian: Is that what this was?
>> Speaker 1: Yeah.
>> Brian: Okay, cool. Yeah I guess that would be an fix OPERATOR OK so yeah go over to your app real quick and refresh go to browse all. OK so now in your header here we should be able to type and now not We anticipate that we broke the search right because we're no longer pulling in that state.

[00:09:09] So we're no longer using the correct state, we're not using the state from redux, we're still depending on it being there from react. Right? So now we have to go change that. So in other words, this is intended behavior so far Let's take a second. Does anyone have questions.

[00:09:30] We're kind of halfway through this so if some of this doesn't make sense, let's maybe get a little bit closer to the end. And connect all the dots because I'm like half way around the circle it's like, hey these two dots don't connect. And it's like, okay well, we haven't actually connected them yet so.

[00:09:44]
>> Speaker 1: Somebody wanted to see quickly where you were creating a store again?
>> Brian: Sure.
>> Brian: Davide is saying that he's getting an error that cannot see read, create store. So you have to do require redux up there. That's the only reason I can. Think of why you would see that.

[00:10:08] So const redux equals require redux make sure that's spelled correctly as well, as well as down here, redux dot createStore.