Check out a free preview of the full Complete Introduction to React (feat. Redux and React Router) course:
The "Connectors" 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:

Brian demonstrates how to use the Redux.connect() method to create a connector for use in React components. The connector provides any component with access to the current state and any methods for dispatching actions which update the state. The connector also provides a reference to the application’s store.

Get Unlimited Access Now

Transcript from the "Connectors" Lesson

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

[00:00:03]
>> Brian Holt: This next part we're gonna make it easy to plug redux into react using react to redux. But any questions so far beyond that?
>> Brian Holt: All right. So, what we're gonna do is, we're gonna create two different functions here. One of these we called mapStateToProps and one is gonna be called mapDispatchToProps.

[00:00:31] mapStateToProps = (state).
>> Brian Holt: And.
>> Brian Holt: This expects an object, so if you remember that we're gonna use these parenthesis. So that this is an implicit return.
>> Brian Holt: searchTerm:state.search term.
>> Brian Holt: Now what's actually happening here.
>> Brian Holt: When we actually we're gonna use react redux's ability to plug components into the react's store.

[00:01:19] This is basically saying, wherever I plug this into react, pass this in as props, right? So we're gonna pass the search term as.
>> Brian Holt: Okay, so we have state.searchTerm in our redux store, right? We're gonna pass that in to react as a search term, the name of the property is going to be search term, right?

[00:01:40] So then, in whatever component I'm gonna reference it from it's gonna be this.props.searchTerm.
>> Brian Holt: Right? Does that make sense? So the first part is the name of the property. The second part is from the state here right, the current state of the redux store, the search term, right?

[00:02:02] That's what's happening here. If this looks a little confusing to you feel free to flesh this out a little bit to be a little bit more clear. So, let's get rid of these parentheses, and I'll just leave it this way
>> Brian Holt: Right, that's what's happening there.
>> Brian Holt: So that's just that function.

[00:02:26]
>> Brian Holt: Okay, so that's one half of this, right? We also wanna be able to dispatch the actions very easily. So what we're gonna do is we're gonna create what's called const mapDispatchToProps. And then we're gonna have dispatch function here. And then we're gonna return another object full of functions.

[00:02:56]
>> Brian Holt: So we're gonna create a property that we're gonna pass into other redux type things. Not react, we're gonna pass it into react components. Set search term.
>> Brian Holt: That takes a term, right, or a search term. You can call it search term if you want to. Search term.

[00:03:18] This is another function.
>> Brian Holt: This is fine, too.
>> Brian Holt: And then we're just gonna call dispatch, which is actually in a caller root reducer. You can think of dispatch as the root reducer. I don't actually know if it's literally the root reducer, it might be, it might be some sort of layer of misdirection.

[00:03:42] But for your thinking about purposes, just think of dispatch as the same as root reducer. Because ultimately, that's what you are going to see.
>> Brian Holt: Dispatch, and then we just have to follow this, right? It's gonna expect a state and an action.
>> Brian Holt: So I guess that there is a layer of misdirection, so it's gonna be type.

[00:04:13] Set search term, right, which is what we're getting from up here. This is a type of action that we're gonna dispatch.
>> Brian Holt: And then here we're gonna say value:searchTerm. So basically, to kind of demonstrate, inside of one of our react components we're gonna say this.props.setSearchTerm. And then we're gonna call it with a search term.

[00:04:39] So it's gonna be whatever search term I got so, house, right? Whatever we're getting from our inputs essentially is what we're gonna do, right? This is gonna call this dispatch right here, with this type of action and this type of value. This dispatch is going to feed this in here to this action right here, with the previous state of whatever our store was.

[00:05:04] Then we're going to modify it and we're gonna return the state here, which is gonna be the new state. That's the entire life cycle, right? So hopefully, there's some computer sciency terms being thrown around, like reducer and blah, right? But that's actually, it's pretty, I'll say it's hard, but it's not complex.

[00:05:24] I'll put it that way, in my opinion.
>> Brian Holt: Okay, so now we have these two functions.
>> Brian Holt: And we're gonna use react redux to make this, basically a wrapper for react components. And so we're gonna say, const connector = reactRedux.connect mapStateToProps and mapDispatchToProps, okay? Now I'm gonna say, because we have a pretty simple redux store, this is okay, that we only have one connector.

[00:06:07] Particularly if you're gonna have many connectors, right? Because not all react components care about all actions or all state. Typically they only care about parts of the tree and so you'll make different connectors for different components, right? And you'll customize them to whatever those components need. In our case, we're only really worried about one action and one piece of state, so this works for now.

[00:06:33] And it's also, instead of doing this inside of your store, you actually might do this inside of your different components as well, so.
>> Brian Holt: Okay, module.exports = connector, and store, right? And if you remember correctly, this is the same as connector: connector, store: store. But because we're lazy and we don't have to, we can just do that, and that works okay.

[00:07:13]
>> Brian Holt: That's it, the end. That's all of redux, right? We've basically touched almost every part of redux. The only thing we're not talking about is middlewares which is not useful for us to write now. But if you've ever done Node Express, a middleware or something that runs in the middle.

[00:07:31] That's all that is with redux.
>> Brian Holt: Okay, I imagine you might have some questions about what we've done here, it's pretty dense.
>> Speaker 2: What does the connect method do?
>> Brian Holt: This one right here? We're gonna see it in action momentarily but basically this is going to be a way to connect.

[00:08:01] It's a wrapper for a component that, you're gonna call this connect method. And you're gonna feed it a react component and it's going to wrap it with. What it actually does is, it creates another react component that's going to feed in props to whatever component you wrapped it in.

[00:08:20] It's a little abstract, you'll actually see it happen here momentarily, when we actually implement it.
>> Speaker 3: The mapDispatchToProps, so it's returning an object which has a function in?
>> Brian Holt: Yes. So you could have multiple function in here if you have multiple action types you want to dispatch, right?

[00:08:41] We only have one action so we have one method right. That's typically gonna be a fairly one-to-one ratio. That I have one method per one dispatch. I have one method per one action type that's actually what I wanted to say. Not totally true, you could have a method call dispatch multiple actions.

[00:09:03] But, at that point, you might think about having actions that dispatch other actions, which mind blowing, right? But that's also a possibility too, and so, a question you might ask yourself is how do I do Ajax with this? Or asynchronous, right, cuz this is all synchronous code so far.

[00:09:22] So what you would do, is you would dispatch an action that that action inside of the action would call out and do your Ajax for you, right? Then once the Ajax came back inside of the callback, where you get the data? You would dispatch yet another action that would actually update your store, right?

[00:09:39] So you would have an action, makes Ajax call. Once the Ajax call comes back, you dispatch another action which updates the store. The end.
>> Speaker 4: On line nine is that the default state that we're passing into, would that be the initialstate.searchTerm?
>> Brian Holt: Right here?
>> Speaker 4: Yeah.
>> Brian Holt: It needs to be an object because it represents the whole store, right?

[00:10:04] And so as we grow we're actually gonna do shows here, we're gonna bring them in here. So you wanna bring in the entire object, that make sense? Okay, well I think once you get going you'll see that it needs to be an entire object rather than just a string, right?

[00:10:25] I guess technically, your entire store could be just a string, but that's a pretty limited store and pretty poor use of it [LAUGH].