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

Now that Brian has the store, action, and reducer ready, he adds Redux to the application. The Redux Provider component is added to the router and passed the store. Then in each component, the state property is mapped to the corresponding component property. The code for the application up to this point is on the v2-18 branch. - https://github.com/btholt/complete-intro-to-react/tree/v2-18

Get Unlimited Access Now

Transcript from the "Adding Redux to the Application" Lesson

[00:00:00]
>> Brian: Let's go plug in our interface to deal with Redux now, okay? So, go to clientapp.js.
>> Brian: Okay, we need to plug Redux into our app. And they've actually done something for you, so that it's really easy to do. So, up here at the top I'm going to import provider from 'react-redux'.

[00:00:35] React redux is a pretty small library specifically for connecting the two together. It's a convenience method, you could totally do it yourself. This is just a lot easier.
>> Brian: Okay? Inside of <browserrouter>.
>> Brian: You're gonna do provider.
>> Brian: And we’ll select that.
>> Brian: So, yeah, BrowserRouter, then provider.

[00:01:15] And then everything else.
>> Brian: And then the other thing we need to to is import up here is import store from './store'.
>> Brian: Okay, up there.
>> Brian: And we're gonna say, store = {store}
>> Brian: So, now, this little tiny library it kind of does [LAUGH] a little bit of black magic.

[00:01:54] I wouldn't worry too much exactly about how it internally works. But what it's gonna do is it's going to make redux available inside of your app, so, now, you can connect to your app to redux where it needs to be connected.
>> Brian: Now, that it's available let's go back to landing.js.

[00:02:26]
>> Brian: So, up here at the top. We're going to import {connect} from 'react-redux'. Again we're in landing.js. Connect is a method that we'll use here momentarily.
>> Brian: Okay.
>> Brian: Then what we're gonna do down here underneath landing. We're going to create a new function called const mapStateToProps.
>> Brian: That's going to be a function that takes in state.

[00:03:14]
>> Brian: And what it's going to do is it's going to return an object searchTerm: state.searchTerm. So, basically it's gonna take in your entire redux store, and you're going to return a object of just the particular piece of state that this component cares about, right? So, landing cares about search term, it cares about nothing else from redox, so it's only going to take in search term.

[00:03:46] So, what this is going to do is it's going to take this redox state, and its going to pass this in as props to landing, right?, does that make sense, because we want search term to come in from redox, so its going to pass it in as a prop to landing.

[00:04:02]
>> Brian: And the way that it's actually gonna end up happening is we're gonna do export default, and we're gonna call connect with (napStateToProp)(Landing). So, now, landing is a redux connected component. So, what connect does, is you call it with mapStateToProps. It creates a new function. Which we are then immediately invoking on landing.

[00:04:41] That's why it has that two-function call. So, connect returns a function, and then we're calling that function.
>> Brian: So, now, landing is always going to have that redux available search term. That make sense any questions about that? Okay, so, now, we have search term available as a prop.

[00:05:19] To landing. So, let's actually go document that, const {string} = React. PropType. Then here we're gonna say, propType: and searchTerm is going to be a string. Okay. And now, we can put that on input. So, now, value is going to be equal to {this.props.search term}. Right.
>> Brian: So, just to demonstrate this working.

[00:06:14] I'll actually push a branch. Yeah, I'll push a branch after this. We'll write the, yeah, so we'll in about, we'll take a break in about 20 minutes.
>> Speaker 2: Looks like you may have a typo, scroll up a little bit. PropTypes. React.PropTypes, line four.
>> Brian: Yes.
>> Speaker 3: What did you say about 20 minutes.

[00:06:40]
>> Brian: We'll break for lunch in twenty minutes, is that too long?
>> Speaker 2: There's a question-
>> Speaker 4: Kind of, it's 12:20 already.
>> Brian: Okay, I'll finish this and we'll take a break.
>> Speaker 4: Okay.
>> Speaker 2: It's got a question, where have you define the props in landing component? The part of the interface, right?

[00:06:56]
>> Brian: Where did I define it? Or why did I define it?
>> Speaker 2: Where?
>> Brian: So, it's coming from redux, right? That's what this mapStateToProps does, is it pulls out of redux, and passes it in as a prop.
>> Brian: And that's where it comes in here, as it's coming from redux.

[00:07:12] Via connect.
>> Brian: So, connect is just going to inject that in there.
>> Brian: Okay, so just to kind of demonstrate to you this is actually working. Well, let's go back to reducers. And just put in something random in here.
>> Brian: It can literally be something random. So, now, if we save that, still running, okay, and we refresh, and go back to the home page, now, we're getting something random in their, which is coming from redux, right?

[00:07:52] You won't be able to modify it for the same reason that before. We have no way of modifying redux. But I guess, you're just gonna have to hang on the edge of your seats until after lunch to fix that.
>> [LAUGH]