This course has been updated! We now recommend you take the Intermediate React, v5 course.
Transcript from the "Dispatching Actions" Lesson
[00:00:00]
>> So there's another hook that we can get here from React Redux called useDispatch. And then underneath here, we're gonna say const dispatch = useDispatch. And now we have a dispatch function that we can dispatch actions to Redux. Let's go ahead and import all of our actionCreators here cuz we're gonna use all of them, use import changeLocation from ./actionCreators/changeLocation, okay?
[00:00:40] Copy and paste that four times. This one will be, ChangeAnimal. This one will be changeBreed, and this will be changeTheme, okay? So now we have all of our actionCreators available to us. And now we're just gonna go put this in all of our various different form pieces. So we don't have updateLocation anymore.
[00:01:16] What we're gonna have this be instead is, this is for locations is gonna be change, it's gonna be dispatch. Dispatch expects a fully formed action. So inside of that, we're gonna put this and then we're gonna say dispatch(changeLocation). So if you remember, if we look at our change location, this returns a type changeLocation in the payload as is location, right?
[00:01:44] So this is gonna accept whatever the user is typing here and it's gonna dispatch a fully formed action to Redux. So, in other words, it's gonna dispatch an action that looks like this {type: "CHANGE-LOCATION" with a payload, Of whatever they typed. That's the action that's actually gonna make it into Redux.
[00:02:17] And let's just go test that out. Save this, come back over to your app. And now I can type in here again, right? Because now Redux is actually being updated. And then whenever it gets updated, it's being re rendered back to the DOM. Make sense? So let's go ahead and do that for the other ones here.
[00:02:44] Here we're gonna have changeAnimal, changeAnimal, and then we're gonna have to surround both of these with dispatch. Okay, so now animal will work. Let's come down here to breed. And I'm just gonna select both of these at once. This is gonna be changeBreed. Put that in parentheses here.
[00:03:20] I'm gonna put dispatch. So now this is gonna work, dispatch(changeBreed |e.target.value|), okay? So now our breed selector is gonna work. And lastly, we need our theme to work. So let's go make that work. So this is gonna be changeTheme, put all this in parentheses. And we're gonna do a dispatch(changeTheme|e.target.value|).
[00:04:00] All right, let's go take a look and make sure that everything works. Do empty, that emptied breed. So all that stuff is still working correctly. Chartreuse, that's working. If I delete this, then we can see all the pets. Still thinks that that's, or you know what, cuz we didn't dispatch to changeBreed to none.
[00:04:22] So that's something that we would actually have to go do. In fact, we can even go do that and fix it right now. In the reducer for changeBreed, sorry, for the breed reducer, whenever there is a case of changeAnimal, we have to respond to this too, right, because we need to zero that but only in certain cases.
[00:04:56] So if, Let's see. So we'd actually have to break out of this into another reducer that would listen to both of them. So what you would have to do here is you'd have to come into your index.js, and we won't get too much into this. But here you'd actually have to have another part here where you'd have another special reducer that could handle both animal and breed at the same time.
[00:05:36] Because if animal's equal to empty string, then breed is going to be returned as empty string as well. So actually I have another idea, this is gonna make this a lot easier. Instead of handling this at the reducer level, what we can do is we can handle it at the app.js or the SearchParams level.
[00:05:53] So here on the animal level, let's make just a function up here. That's handleAnimalChange, With e coming in. And you're gonna say if e.target.value === blah, then you're gonna have to say dispatchchangeAnimal to be empty string, and then you're gonna have to do that for breed as well.
[00:06:47] Actually, you always do this. It's not even that. And then you're gonna say dispatch, changeAnimal to be whatever e.target.value is. There we go. Okay, took me a second, got there. So if you always do it, then you can handle the reducer or whatever. This is fine. We're sticking with this.
[00:07:20] Here on changeAnimal or changeBreed, changeAnimal, I'm gonna do handleAnimalChange. Okay, now if we go back over here, we go to Rabbit and Submit. I guess there's nothing in Seattle that has a rabbit. And there we go. Now we're not getting havanese rabbits anymore. You can see that I did two actions here.
[00:07:54] I also could have handled this at the reducer level and everything would have been fine.