This course has been updated! We now recommend you take the Intermediate React, v5 course.
Transcript from the "Refactoring React to Use Redux" Lesson
[00:00:00]
>> Brian Holt: So that takes care of the thunk. This is how you do asynchronous data fetching with Redux. Now, let's go back to app.js. Everything up to this point has probably been a little frustrating with Redux. And if you feel that way, you have every right to. This is the satisfying part.
[00:00:21] We get to delete a ton of code from our react application. So up here, delete pet finder client. Delete all this pet finder stuff right here. Delete the constructor.
>> Brian Holt: Delete all of these methods in here, cuz we moved them out into Redux.
>> Brian Holt: We're not gonna be using context anymore, so you can delete the SearchContext provider and we can now just call this ReduxProvider as Provider.
[00:01:09]
>> Brian Holt: So far so good, you can just call this Provider.
>> Brian Holt: And we can get rid of this InteriorProvider, the on that was for context. Oops.
>> Brian Holt: And now, this is what our app looks like. All of that data, all of that functionality around managing state, it's all been externalized.
[00:01:40] So it does kind of clean up your React code a little bit. This is nice. This is a lot easier to understand than all of that craziness that app.js was doing earlier. It's a compelling not to use Redux or to use Redux, rather. So anywhere that we were using basically context before, we're gonna have to go with refactor use Redux.
[00:02:06] So let's go back to results.js.
>> Brian Holt: And now what we're gonna do is we're going to, we already imported connect up here. Anywhere that says, this.searchParams right there, we're gonna delete. So just says, stops props.
>> Brian Holt: This dot or let's look for a search context. We can get rid of the consumer up there.
[00:02:48]
>> Brian Holt: And.
>> Brian Holt: Cool, you can get rid of this results with context business, because we're not reading from context anymore.
>> Brian Holt: And this will just be results now since we're not worrying about context. And now we'll be reading from location, breed and animal.
>> Brian Holt: Location, breed and animal and we'll just be passing it directly on as well.
[00:03:18] Animal and breed.
>> Brian Holt: Yep, can actually do it. So now, all these data will becoming will becoming from Redux and this is how we've done it nefore we were using consumer to inject that through context. And now we're using Redux and mapstate to props to get to that results.
[00:03:44]
>> Brian Holt: So again, this data is coming from the Redux store and this object that we're providing back to Redux is injecting the location animal and breed as props on results. Make sense?