Check out a free preview of the full Complete Intro to React, v3 (feat. Redux, Router & Flow) course:
The "Using Redux in the Header Component" Lesson is part of the full, Complete Intro to React, v3 (feat. Redux, Router & Flow) 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.

Get Unlimited Access Now

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

[00:00:00]
>> Brian Holt: Now, I want you to go to header.jsx, and now we're gonna say import. Connect at the top, from react-redux. And we're going to import {setSearchTerm} from' ./actionCreators.
>> Brian Holt: We come down here for default props, get rid of handleSearchTermChange.
>> Brian Holt: Get rid of searchTerm.
>> Brian Holt: Cuz these are no longer optional types.

[00:00:55]
>> Brian Holt: Right?
>> Brian Holt: You also are gonna get rid of the maybe types here. So get rid of the question marks. Cuz now, it's just always going to be reading from redux, and it's only gonna occasionally be using it.
>> Brian Holt: Then down here at the bottom.
>> Brian Holt: You're still gonna have a default prop show search.

[00:01:21] You're gonna say const mapStateToProps = state which is going to return an object of ({searchTerm: state.searchTerm}). And you're gonna have a const mapDispatchToProps which is gonna be = (dispatch).
>> Brian Holt: Which is a function.
>> Brian Holt: And again, you're gonna be returning an object with a handleSearchTermChange. And all that's going to do is take an event which is going to be a, well actually I don't think you even need to type this one.

[00:02:16] You're gonna dispatch a setSearchTerm, from (event.target.value).
>> Brian Holt: Did I import this up there? No, I guess I didn't. Sorry, this should be setSearchTerm.
>> Brian Holt: Yep.
>> Brian Holt: And then down here we're just gonna connect.
>> Brian Holt: (mapStateToProps, mapDispatchToProps).
>> Brian Holt: And that is it.
>> Brian Holt: Yep, cool.
>> Brian Holt: So, the nice thing is we have this HandleSearchTermChange that was coming in as a prop before.

[00:03:28] The nice thing is, we don't have to re-factor that, because that's already the contract that we have there. So it's totally fine to leave that as is.
>> Brian Holt: So now HandleSearchTermChange and SearchTerm are both gonna be required. showSearchTerm is still a media type because it might be coming, it might not be.

[00:03:49] And then yeah, we're gonna have this input that may or may not be reading from Redux, depending on which context it's called in. So let's save that, and refresh.
>> Brian Holt: Yep, still getting some errors, which doesn't matter. So now if I say, I'm gonna search for black, and I hit Enter, I'm going to go to the landing page with that filled in from Redux, right?

[00:04:20]
>> Brian Holt: And then I can modify it up here and it's still giving me reading from Redux. Another cool thing as a nice byproduct of this. If I click into Atlanta, and then I click Back, it's still gonna have the same search term, because that's being perpetuated in Redux, right?

[00:04:34] Nothing's modifying Redux when I go there.
>> Brian Holt: Something else that actually is a problem, if I back to svideo, well, I mean, it's still reading Atlanta, that's fine. But if I say or Browse All, I actually technically haven't fixed that yet, but the only thing you'd have to do is if they clicked it, dispatch an action to Redux to clear out the search term, and that's fine.

[00:04:57] Not gonna do it here because I literally just explained to you how to do it, I have all faith that you can go and do it. Any questions?
>> Brian Holt: It only took us two hours, but we've at least completed the first bit of migrating to Redux.
>> Brian Holt: It is pretty cool, I mean the tradeoff here is that like for example if you look at Search, Search got a lot more simple right?

[00:05:27] Search you used to have to worry about state, and passing props into the right header and all that kinda stuff. It no longer has to care about that because Search in and of itself really, all it wants to do is read Search term and do searching, and it doesn't actually wanna read and write to Redux, right?

[00:05:41] It can lead that problem to header. So by virtue of that, it doesn't have to care anymore, because it only matters where you're actually doing the writing. And the writing isn't actually happening in Header, and it's not happening in Search. So that is a nicety. It's gonna externalize the reading and writing to your data store into separate files and separate functions, and it's gonna simplify your React components.

[00:06:06] That's a net positive in my opinion. However, we greatly complicated the process of reading-writing to our state. It's deliberate, it's very deliberate, which is a good thing in general. But it's a pain, yeah, it's just more code. It's more code, and more things to think about, which is always hard.

[00:06:27] What we'll talk about tomorrow is, we'll talk about testing Redux. Cuz you can see, as you may imagine, a lot of the stuff that we just did, like the action creators and the reducers are extremely testable. So that's gonna be really positive for us. And I'm gonna show you how to actually have Redux generate test for itself, which is pretty cool.

[00:06:51]
>> Brian Holt: Any questions about Redux? I've shown you the happy path for Redux, this is most of what Redux is. It's just dispatching actions into the reducers, and letting the reducers take care of things, which then update the store or which then gets fed back in the UI, right?

[00:07:12] That's most of Redux, everything else is an advanced use case.
>> Brian Holt: I would also say, you cannot actually write Redux, only ever doing stuff like this. I will show you tomorrow how to do asynchronous stuff. We can actually externalize asynchronous stuff and Redux, but you wouldn't do that, I guess.