This course has been updated! We now recommend you take the Complete Intro to React, v8 course.

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

Brian updates the Search component to use the newly created Redux store. The Search component now pulls the searchTerm property from its props instead of its state. This greatly simplifies the component since it has now become stateless.

Get Unlimited Access Now

Transcript from the "Updating the Search Component" Lesson

>> [MUSIC]

>> Brian Holt: Most of you seeing like typing and it works okay but nothing's happening. Okay. So let's go close the loop and make it actually work again. So, let's go over to search.JSX. This is going to be really fun because we get to delete a bunch of stuff. My favorite pastime is deleting code.

[00:00:23] It's just so cathartic. Especially when it's not my code and I get to delete my coworker's code. Okay, I probably sound like the worst jerk in the world. I'm pretty close. Okay. const connector = store. Sorry, requires store rather slash store. Okay. Delete get initial state because we're not going to keep track of any state in here.

[00:00:57] Delete the HandleSearchTerm event, we don't we didn't have that, that's okay.
>> Brian Holt: No, yeah get rid of this too, get rid of this method, handleSearchTermChange because we're not going to be modifying our own state anymore. Is that how we want to do it though?
>> Brian Holt: All right, it's headers handling all that data.

[00:01:27] So, we don't actually need it, so, delete that, get rid of this handleSearchTermChange. You get a search term, cuz it no longer knows. And you're just going to give it show search, which you put back the one online because that's ridiculous to have that on two lines. Okay, now we're going to change filter to only look for search Term.

>> Brian Holt: This is going to be props instead of state. And this also needs to be a prop type up here. So search term colon string which also have to bring that in as well, so up here you can pull in string as well. I think we already have the connector at the bottom.

[00:02:30] Nope, we didn't have, so we have to do connector here as well.
>> Brian Holt: Okay, so make sure you do connector there. I'll scroll up so you can see the rest of it.
>> Brian Holt: Okay, so if you wanted to, you can actually factor this again to be a stateless function component which is nice.

[00:02:58] I'm not going to, but you one should, cuz it no longer cares about state and so. Again, limiting your surface areas for bugs is always a good idea. After this, I'm gonna go ahead and push a branch. So, if you're broken, I'm going to push a branch. Bless you.

[00:03:25] But now, search should work again. So, I'm gonna go make sure that that's the case, so I'm not having you type broken code. Everything's compiling okay. So let's come back over here. Refresh and type in the here and say like Kimmie and now we're working again but this is all using Redux be the scene that we're no longer using React state.

[00:03:52] So, give me a second to push up a new branch.
>> Brian Holt: checkout -b fem-21. git commit-m FEM step 21. git push origin FEM 21.
>> Speaker 2: There's a question on if we made a stateless component prop tapes would have to be defined outside of it correct.
>> Brian Holt: Yep same way we did the ES6 class ones you would say like connector search.proptypes equals the object up here.

[00:04:41] This one. Yeah that's exactly how you do it.
>> Brian Holt: Is it working for most people? So what do you think, Redux, yea or nay? Pretty cool so far. It's about to get a ton more compelling. Once I show you how to debug redux, you just want to put it in everything.

>> Brian Holt: But we've externalized a lot of the concerns about marshalling data which is why we were able to delete so much code to make this back to be a stateless functional component. To be totally honest, if you're willing to keep all of your view state in redux, your entire React app can just be stateless functional components which is pretty cool.

[00:05:25] Now, that's pretty close to true. Sometimes you need the life cycle methods but, we'll talk about those later in the course. But beyond that, for the most part, technique is still as functional components.
>> Speaker 3: What's your opinion on, so like in this case, we're putting the search into the global store.

[00:05:48] But, do you think if there might be something like say you have a form. Would you still do that because of the gains you get by following this the Redux pattern. Or does it make more sense to, for performance reasons, save it locally to the component. And then when you submit it, push it.

>> Brian Holt: I would never do it for performance reasons. React is really fast about updating its state. And it actually does batching that Redux is not going to do for you. Now the question for you is where does it make sense for you to have your view state? Because app state which is ideas like for example, we have shows which is app state right that's something that comes from the server and it's something I'm gonna use multiple places absent also be like your user information, well that kind of stuff.

[00:06:34] View state is gonna give you something more like what I have in the form of what I have in might this input is this checkbox checks, right? I'm personally of the opinion that I keep all of my view state in React because that just makes sense to me, right?

[00:06:47] Like React is my view Library, I should use it to keep track of view state. People disagree with me and they keep every state 100% goes into redux and that's up to you but I'm right. So listen to me. [LAUGH] So, does that make sense?
>> Speaker 3: Yeah.
>> Brian Holt: Yeah it's another trade off and decision you need to make for yourself.

>> Speaker 4: Can you scroll up a bit? Yeah, thanks.
>> Speaker 2: A couple people in here saying that the search button isn't working in the last push, through the browse all.
>> Brian Holt: Does for me. Now this doesn't work yet because we haven't fixed that yet. We're about to fix it.

[00:07:32] Is that what people are referring to?
>> Speaker 2: I'd see.
>> Brian Holt: And this seems to work okay. Yeah, we haven't plugged in landing yet, which is the next step that we're going to do here momentarily.