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

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: So let's go to Search, so let's go to search.jsx. Come into search.jsx, we import connect up here, ShowCard and Header. Cool, that all looks really good. What's gonna be really cool about what we're gonna do, is we're going to eliminate state from search. And we're going to eliminate handleSearchTermChange,

[00:00:34]
>> Brian Holt: And we're gonna eliminate props here.
>> Brian Holt: So all this stuff is going away, which means Search has now become a status functional component. So now we can migrate this back into something that's a little bit more simple. So I'm going to say, const Search equals this, and we're going to get rid of that.

[00:01:09]
>> Brian Holt: Okay, so now this is back to being not a class anymore but being a function. It's gonna take in props, which are going to be, we're gonna have to type those props. It's gonna take in searchTerm which is gonna be a string and it's gonna take in shows which is gonna be an array of show.

[00:01:37]
>> Brian Holt: Then here instead of saying searchTerm equals that we're gonna say is equal to props.searchTerm. And handleSearchTermChange is going to be equal to props.handleSearchTermChange, which we'll write here momentarily.
>> Brian Holt: I guess that's one worth putting on there, is handleSearchTermChange is gonna be a function. Instead of having props.shows, it gonna just be just that, no this.

[00:02:16] This is gonna be props.searchTerm.
>> Brian Holt: That's getting them just a little bit more succinct each time.
>> Brian Holt: Not even that. I forgot, okay. So actually dropped this handleSearchTermChange. Because now what we can do, instead of making search have to worry about handleSearchTermChange and all these kind of stuff, it can just make header write directly to Redux.

[00:02:49] And it doesn't have to be the intermediary anymore,right?
>> Brian Holt: So actually get rid of all of that. And this is just gonna be showSearch now. Yep, yep, yep, yep, that's exactly it.
>> Brian Holt: And now we're going to filter on props.searchTerm. Why is that upset?
>> Brian Holt: That's right.
>> Brian Holt: So, we're gonna run up against to a flow edge case right now.

[00:03:34] It's pretty good about following through, but because we're inside of a block, which is inside of a block here. It actually can't follow it further enough for ESlint to say, hey you're never using this prop type. We actually are, it's just ESlint can't go that deep. It's not smart enough, right?

[00:03:55] It's not actually evaluating your code, it's doing static analysis. So what we're gonna do here, is we're just gonna say. I know that this is what you think, but you're actually wrong. Eslint-disable-line react/ no-unused-prop-types.
>> Brian Holt: And this is just us telling eslint, no, I know better than you.

[00:04:28]
>> Brian Holt: Okay, now we need to make a maps state to props down here, so we're going to say, const mapStateToprops
>> Brian Holt: Equals state. And we're going to return an object of searchTerm is state.searchTerm.
>> Brian Holt: And then we're gonna call connect with mapStateToProps
>> Brian Holt: And we don't need this component up here anymore.

[00:05:15]
>> Brian Holt: Okay, so now we've successfully disentangled that component state from Search. It's now totally reading from Redux, and it no longer has to care about writing to Redux because that's gonna become header's problem.