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

Brian moves on to the Search component and refactors it to read state from Redux. Once Redux is added, the Search component no longer needs the getInitialState() or handleSearchTermChange() methods because that functionality now exists in Redux.

Get Unlimited Access Now

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

[00:00:00]
>> Brian Holt: Now, we have landing, reading, writing to Redux. But now search term is not reading from, or sorry, search is not reading from Redux. So now we needed to go make search read from Redux. So we're going to go to search.js.
>> Brian Holt: And we're going to import {connect} at the top.

[00:00:30]
>> Brian Holt: 'react-redux'
>> Brian Holt: Okay, we're gonna add searchTerm to our propTypes
>> Brian Holt: I'm going to change Header, cuz Header's no longer not going to be, sorry, search is no longer going to keep track of searchTerm, cuz that all lives off in Redux land. So Header no longer needs to receive these from.

[00:01:03]
>> Brian Holt: From Redux. So now Header should just look like this.
>> Brian Holt: Okay.
>> Brian Holt: We also don't need getInitialState, that's totally gone.
>> Brian Holt: We don't need handleSearchTermChange, so that's totally gone. Cuz all of that lives in Redux now, it's totally been abstracted away from React.
>> Brian Holt: If you go into our filter here, it's gonna be, let's see, instead of state.

[00:01:46] So here it says this.state.searchTerm, right? It's not being read from state anymore, it's being read from props. So you're gonna say props.searchterm, toUpperCase.
>> Brian Holt: Okay, and what we're gonna do down here to the bottom is we're going to write our map state to props. Const mapStateToProps = (state).

[00:02:21]
>> Brian Holt: return searchTerm: state.searchTerm.
>> Brian Holt: Okay. And then now we just need to connect.
>> Brian Holt: So (mapStateToProps)(Search). Is there a question?
>> Speaker 2: Couple questions. Owen wants to know is context the same as window?
>> Brian Holt: No, it's a-
>> Speaker 2: It's like an internal-
>> Brian Holt: It's an internal reaction.
>> Speaker 2: Structure too.

[00:03:00]
>> Brian Holt: Yeah. It's specific to React.
>> Speaker 2: Okay. And AB's asking, is with router available in React router four?
>> Brian Holt: Is with router?
>> Speaker 2: That was in-
>> Brian Holt: I don't know.
>> Speaker 2: They're saying this was in React router three.
>> Brian Holt: I'm gonna go with there's very little in common between v3 and v4.

[00:03:20] It's a total rewrite. So I'm gonna go ahead and assume not. But I don't know, cuz I don't know what with router is.
>> Brian Holt: Okay, so now if we save, then come back to. I should see if we're doing okay. We're doing okay. So, now if I refresh here.

[00:03:47] I'll actually go back to the homepage now. And I type in here like house and I hit Enter. Now, it's, notice, it's being searched for house, like the search is correct, right? But notice our header is still wrong because we still have not modified our header to read from Redux as well, right?

[00:04:06]
>> Brian Holt: But that is the correct search.