Intermediate React, v3 Action Creators & Providers

Transcript from the "Action Creators & Providers" Lesson

[00:00:00]
>> Let's go create some Action Creators. So, outside reducer, we're gonna create another folder. Called action. Creators. Okay, these are not purely necessary, but I would suggest doing them as well. They're basically functions that take in some parameter, and then they return the correct shape of action. So let me give you an example here, we have one let's do this for change theme.js.

[00:00:43] And it's another function that you just export default function. Change theme, this takes in a theme, and it returns an object that looks like an action. So the type is going to be. Change theme, and the payload is going to be the theme. Pretty simple. Now, I can see you putting all of your action creators on one file, because obviously these are quite short.

[00:01:18] Or you can put them in multiple files. In this particular case, I put them in multiple files, but that's totally up to you. So let's make another new file and we're gonna have to do the same thing here, change animal.js. And let's just again, these are really very similar over and over again.

[00:01:38] Change animal, Animal, change animal. So these ones were all keeping track of very simple strings, but you can imagine they can have pretty complicated. Let's say we had an animation and those animations were modifying various different parts of like. All right, this is now true, that this has gone through this animation, it's false.

[00:02:09] It started this one and, this should be green now and they should be pink, and so, one action, can trigger five different state trees to change, right? And so that's why, it's important that we have these kind of, there's not always a one to one mapping, I guess what I'm trying to say.

[00:02:27] Okay, new file, change theme. All right did that one. Let's do change breed.js Breed, breed, breed, okay, one more action creator here. Change, animal, breed, theme, location. And location, all right, now we have all of our action creators, now we're able to dispatch. These I guess actions to the, to ready to dispatch them to redux.

[00:03:38] Okay, now, yeah, we'll talk about here in just a second. So now, all of our redux stuff is ready to go. We are going to, now go integrate that to our application, so go to App.js. And here, we're going to, import provider, from react-redux. And we're going to import, the store from ./store.

[00:04:26] So first of all, we're not using the theme anymore. We're gonna put that in redux, so we're gonna delete that. We're gonna delete the theme context because we're gonna be done with that as well. You can delete the theme context component here. And instead of that, we're gonna have a provider, with store=store.

[00:04:57] And now, actually using react context ironically, now, this provider is providing our redux store, to all of our application. Now we can start reading and writing from redux. All right, so let's go to search params.j.s now. And at the top, we're going to delete context and the use context here, because we're not going to use that anymore, as well as that line here.

[00:05:27] Underneath breeds that I had here, this theme, set theme, we're going to delete that. And. Now we're going to get something from, react-redux called useSelector, from react-redux. So this is another hook, it's relatively new actually for react redux. And we're gonna get, instead of using state here from this, and theme, so go ahead and delete, animal, location and breed.

[00:06:07] And this is going to be const animal= useSelector, and it takes in state and returns, state.animal. So, basically you give it a function as like all right, given the entire state tree. What do I need to do to get just that bare minimum out here? And I'll do the same for location.

[00:06:33] For theme, And for breed. Now, one of you might astutely ask, couldn't I just pull them all out at once? You definitely could, in fact, an easy way you could do that would be, const, animal, breed, location, theme, and you could do that through =useSelectorstate, like just return the entire thing, right?

[00:07:09] This would work as well. The only thing that I'll suggest against this is like, sometimes your redux stores can be enormous and it's actually probably better sometimes to operate those enormous stores like this. But, this doesn't offend me either, it's up to you. Okay, and now, this is reading from our redux store.

[00:07:30] With hooks that became incredibly easy to use from redux, right, because you have the provider which has the redux store on it. And this useSelector hook, is actually reading from that store, from the provider. So let's actually start our app. I think we've broken some things, but this should at least start up.

[00:07:56] So I think this is pretty clean, once you actually get redux in place and working, it's pretty clean to look at. So let's go to local host 1234. Did I break something else? Can't exhale local lexical declaration. That was, my problem, go to store.js, and I put store here, not reducer.

[00:08:32] So on line 2, make sure you, should be reduced to here not store. Right because, you can't provide store to itself that would make any sense. You have, you give store the route reducer, and that's how it gets started. So again, line 5, that should be reducer. Okay, and now, you can see here, Seattle, Washington, dog, Havanese, dark blue, all those things that we, the new defaults that we set in there.

[00:09:13] That's why we're only seeing Luna now, right? Because that's the only one that's, coming back from the store. However, try and change them now. It is not working, why? We have the same problem before is that, the redux store is being read from, but it's not being written back to, right?

[00:09:39] So I read from, going back to, let's see we are in search params. We're reading from, our state to get state.animal but where's it being written back to, it's not, right. So that's a problem, we have to actually write back to our store. So let's go into, how do we dispatch actions.