Check out a free preview of the full Complete Intro to React v2 (feat. Router v4 and Redux) course:
The "Using Redux in the Header Component" 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:

The last component to refactor is the Header component. Brian imports the connect object from react-redux as well as the setSearchTerm action creator. He then updates the Header component to read the state from Redux and dispatch the action when a new search term is entered. Code for the application up to this point is on the v2-20 branch. - https://github.com/btholt/complete-intro-to-react/tree/v2-20

Get Unlimited Access Now

Transcript from the "Using Redux in the Header Component" Lesson

[00:00:00]
>> Brian Holt: Okay? So let's go make sure that that gets modified. So let's go to header.js.
>> Brian Holt: We're going to import at the top, connect,
>> Brian Holt: From react React-redux. And we're also going to import our action creator.
>> Brian Holt: setSearchTerm from ./actioncreators.
>> Brian Holt: Okay.
>> Brian Holt: So now that we have those, we're gonna need a prop type, which is down here at the bottom for dispatch.

[00:00:57]
>> Brian Holt: So instead of having handle set search term, we're gonna change that to dispatch.
>> Brian Holt: Okay,
>> Brian Holt: And then inside of handleTermChange, which I would rather we have to add a method called handleTermChange up here at the top. handle,
>> Brian Holt: SearchTermChange.
>> Brian Holt: Come on.
>> Brian Holt: So if you're following along like me and doing this as an ES6 class, just a reminder, slash whatever, there's no comma here.

[00:01:45] Normally, if it feels like this is JavaScript, we should put a comma there. But with EX6 classes, there's no commas.
>> Speaker 2: They wanna see search GIFs real quick.
>> Brian Holt: Okay.
>> Brian Holt: And as soon as I finish this next little bit, I'll just push up a new branch too.

[00:02:18]
>> Brian Holt: Okay, so
>> Brian Holt: handleSearchTermChange, we're just gonna say, this.props.dispatch
>> Brian Holt: Our setSearchTerm, you can do it in either way, you can do just with dispatch directly, you can do it with map. Props to dispatch. I'm fine with either way. With event.target.value we need the event right there. Okay.

[00:02:56] So that, handle search term chance
>> Brian Holt: Here when we have the input, instead of going to this.props.handleSearchTermChange, now this is local. Okay, and so we have to get rid of that. So it's handleSearchTermChange right there. But now we have a problem, cuz we're using goddamn ES6 classes. What is this here?

[00:03:27] Now, if this was the other way if this was react create class, we wouldn't even have to worry about this. But now, because we're doing ES6 classes, this is not guaranteed to be header, right? So now, we have to go back and guarantee that's always going to be header.

[00:03:44] So, we're gonna do constructor props super props. So if you ever do a constructor inside of class with react, you just have to do this cuz We get props from creating this, and we have to parse those up to react.component or everything falls apart. So, that's just a mess, like that should just be like an automatic, okay I'm ES6 class.

[00:04:16] React, super (props), right? First line always is gonna be super (props).
>> Brian Holt: Super if you're coming from a language where inheritance is common, should be look familiar to you. But, this is basically saying please call my parents constructor with this. That's what that does. Now, that we've done that we can say this.handleSearchTermChange = this.handleSearchTermChange.bindthis.

[00:04:51]
>> Brian Holt: Which is just making sure that header is this right there. We need to assure ourselves that that is always the case.
>> Brian Holt: It's annoying. So again, this right here is the reason why I don't like the syntax as much. Certainly for teaching, cuz it's just a boiler plate feeling to me, and I hate writing boiling plate, yeah.

[00:05:25]
>> Speaker 2: Okay, again, is asking isn't it harder to do change if you've put the connect in all the elements? Isn't it better having to connect in only the container and pass the props down in the component?
>> Brian Holt: It's a design decision. This is certainly just an easier way to teach.

[00:05:44] And I think this is a perfectly acceptable way to do it. So, I think what's being asked is, where do you put connect? You can put connect in one of several places. You can do it in the parent container, you can do it in the lower container. I prefer for only header is worried about search term in this particular case.

[00:06:07] So, why don't we make header read directly from redux? But you could make search from redux, and then pass that down into header. Up to you. This is just the way that I would have personally done it myself.
>> Brian Holt: Yeah, we need to finish doing this down here, so.

[00:06:30] const mapStateToProps = (state) return, searchTerm: state.searchTerm. And then you would connect
>> Brian Holt: Map state the header or map state to props around header.
>> Brian Holt: Okay, let's go ahead and see if that works now, real quick.
>> Brian Holt: Refresh. So, nothing shows up cuz I still have something random as my default state.

[00:07:24] But if I delete, it's now starting to read from
>> Brian Holt: From Redux, so now everything is working with Redux.
>> Brian Holt: Now interesting, cool side benefit about this, so now I type House, I click on House of Cards, okay? So, I go into the House of Cards route. Now if I hit back, I still have house written here, right, because redux is not temporal, right, it's living across all of these different route source state as preserved.

[00:07:59] If this was pre, like react like it previously was, it would have been removed because that component went out of scope, so its state would have gone away with it. Same thing if we go to the home page. It still says house right there. Now, that may or may not be desirable for you but that state is living across routes because redux is not being reloaded.

[00:08:22] I'm gonna go change my default state to be blank. A question. Push your branch?.
>> Speaker 2: One question. What is the best jumpstart for migrating from an existing ES five app into react?.
>> Brian Holt: So the nice thing about react is, you can migrate piecemeal. So, you can just start with the least of your app, right, kind of the terminal points.

[00:08:58] You can have just one page, right, that's a React app. And also the Angular app lives on the other side, right. React doesn't have to own your entire app like Angular, or Ember does. It's fine being just a piece of it, and then slowly you can just kinda start replacing different pieces with React.

[00:09:15] And then, bigger pieces of React, until eventually it kinda takes over your entire app. And that's definitely the way I would suggest it. As much as possible, one can marry Angular and React together, and I highly suggest not doing that. I'd say backbone is as far as I would go.

[00:09:33] Like marrying backbone and React, and I wouldn't go any further than that. Any other questions? There is one. I'm trying to figure it out, though. Okay.
>> Speaker 2: The browse all link now needs to clear the state. If you click it when something is in the form field, the result still be filtered?

[00:09:51]
>> Brian Holt: Yeah, that's true. So you would just dispatch an action with an empty string is how I would do that. I'm not gonna fix it right now, but you could totally fix that.
>> Speaker 2: Richard is saying, you can use the syntax Which is the arrow syntax for handle set search term.

[00:10:18] So, you don't have to use the constructor and it's cleaner syntax too. And if you don't use a constructor you can define state as an object inside the component. You may want to look up a chat.
>> Brian Holt: Yeah I mean I That there are ways to get around with the way I did it.

[00:10:36] Again, this is a class property, which is not standard JavaScript yet, which is why I don't teach it. If you're comfortable with it, cuz eventually it will land. I think it's a stage three prop or stage four, borrowing from the terminology from TC39, the JavaScript standardization body. There are ways around it, but until those land as officially part of JavaScript, I'm not gonna teach them.

[00:11:10]
>> Speaker 2: Okay,
>> Speaker 2: So, I just pushed the v2-20