Intermediate React, v2 Connecting Redux to the Application

Transcript from the "Connecting Redux to the Application" Lesson

[00:00:00]
>> Brian Holt: So, I want you to go back to App.js.
>> Brian Holt: Delete ThemeContext, cuz we're no longer gonna use context. So just go ahead and delete that line there. Delete the ThemeContext providers here.
>> Brian Holt: And delete the theme here out of App.
>> Brian Holt: And now what we're gonna do, you can delete that import as well.

[00:00:31]
>> Brian Holt: Up here at the top, we're gonna say import {Provider} from 'react-redux'. This is a react component similar to the provider that we had for the context, that's going to provide the React Redux store to the entire application. So inside of here,
>> Brian Holt: We're going to say, provider and store ={store}.

[00:01:08]
>> Brian Holt: And we can actually auto import that from ./store.
>> Brian Holt: Okay, and then we're just gonna wrap the whole app with that.
>> Brian Holt: And so now, Redux is available to the entire application.
>> Brian Holt: Sorry.
>> Brian Holt: Good so far?
>> Brian Holt: Feels good deleting a little bit of code. My favorite thing to do is to delete code.

[00:01:43]
>> Brian Holt: So let's go add it to SearchParams, so SearchParams here. So up here, we're going to import (connect from) react-redux.
>> Brian Holt: We're gonna replace the context references.
>> Brian Holt: So we can get rid of the useContext there, and we can get rid of ThemeContext there.
>> Brian Holt: So here where it says location and,

[00:02:31]
>> Brian Holt: Yeah, where it says location, we're gonna put this to say props.animal.
>> Brian Holt: No, sorry, props.location, rather.
>> Brian Holt: We'll take in props up here as well.
>> Brian Holt: Okay, oops, get rid that.
>> Brian Holt: Okay, and then anywhere else that refers to location, we needs this to be value = props.location.

[00:03:16] And rather than onChange calling updateLocation, we're gonna say props.updateLocation.
>> Brian Holt: And then anywhere that refers to the theme,
>> Brian Holt: Rather than the value being theme here, we're gonna change this to be props.theme, and these setThemes here are gonna be props.setTheme.
>> Brian Holt: Okay, so now we're gonna have to go write the code that injects this from Redux for us to be able to do that.

[00:04:02]
>> Brian Holt: And here, we have to change this to props.theme as well. Okay, so down here at the bottom, we're gonna have to write two things here.
>> Brian Holt: First thing I'm gonna write is map state to prop, so we have to write a function called const mapStateToProps. So this is going to pull things out of Redux, and hand it to the component.

[00:04:27] So we're gonna grab the theme and the location, and we're going to give back an object with theme and location.
>> Brian Holt: Okay, and then we're also gonna have to do a const mapDispatchToProps. So this is grabbing the read data, so it's the things that I can read. I wanna be able to read the theme and the location.

[00:04:56] And here in the mapDispatchedToProps I wanna be able to update it, so I wanna be able to send actions to Redux for it to tell it update itself. So here, I'm gonna just grab a dispatch function, and I'm going to give back here an object. So one of them is going to be called set theme, cuz that's what we called it, right?

[00:05:22]
>> Brian Holt: And that's going to be a function that,
>> Brian Holt: Takes in a theme and it calls dispatch, with that changeTheme function that we created. Because that's the action creator name. And we're going to pass in to that theme. And then same thing here with updateLocation. I recognize that these are named different things, and there is no good reason for that, so.

[00:05:56]
>> Brian Holt: Update location here, his is gonna take in the location. It's gonna call changeLocation. And again, that's been auto imported at the top. And we're gonna pass in a location to that.
>> Brian Holt: Where did that get so messed up? Okay, dispatch, this is an arrow function.
>> Brian Holt: So again, changeTheme and changeLocation.

[00:06:35] You'll see up here at the top changeTheme and changeLocation have been updated up here. And you can get rid of this hook right there on line 10.
>> Brian Holt: Okay, now, we're gonna use the connect to say, export default SearchParams right here, we're gonna say connect,
>> Brian Holt: (mapStateToProps, mapDispatchToProps).

[00:07:08]
>> Brian Holt: And then this returned the function so, connect returns a function that then you're going to invoke on SearchParams.
>> Brian Holt: It's kind of an odd way of doing it, right? It's a function that returns a function, but that's how they chose to do it. Actually, the real reason they chose to do it that way is because that's how decorator's work.

[00:07:31] So eventually you'll be able to use connect as a decorator. And if you don't know what a decorator is, that's okay right now because there's still a long time coming.
>> Brian Holt: Okay, so that was a lot. But now, we have in SearchParams, we're reading and writing to Redux.

[00:07:54] So let's see if we can actually get this running. It should be running right now, we'll see. I'll do npm run dev.
>> Brian Holt: And now, if we go to localhost1234. So now I have this, but it's still reading and writing to this location. But now, this location doesn't live in the component anymore.

[00:08:34] It lives in Redux.
>> Brian Holt: Same with this theme, right? It's reading and writing, not from context anymore, which is what it was reading and writing to before. Now, it's reading and writing from Redux.