This course has been updated! We now recommend you take the Intermediate React, v5 course.
Transcript from the "Dispatching Actions" Lesson
[00:00:00]
>> All right, we gotta go quickly refactor the update functions here. So now we have to get a useDispatch up here from react Redux. So this is doing everything that we need to, to read from it. In fact, I think, if I'm not mistaken, we could say npm run dev.
[00:00:27] I think this will load, it just won't update. Yep, so you can see here, now it says Seattle here. But notice that we've run into the problem again that I can't update this, same problem. There's nothing updating, right, nothing's calling the reducers, right? So now we have to go call a dispatch with our actions to be able to update the store.
[00:00:51] Does that make sense? Again, just maybe to walk through it explicitly. If I type into location, right, that's going to update. React then catches that event, which says, something happened. I'm going to re-render, so it calls search params again and it pulls location out here. Well, what is location?
[00:01:17] It's still the same that it was last render, nothing updated the store. So it remains Seattle, Washington here, right? So now we have to go write the function that updates that. And we're gonna do that with something called useDispatch. Okay, and then we're going to import all of our action creators as well.
[00:01:37] changeAnimal from changeAnimal, import, changeBreed from changeBreed, import, changeLocation. I'm kinda wishing I had put these all in the same file now. [LAUGH] Import, changeTheme from changeTheme, okay. So now we have all of our action creators here. Here, underneath theme, you can say const dispatch = useDispatch. You don't have to give that anything.
[00:02:13] This is just now a function that we can now send actions into Redux. Okay, and then we're just gonna replace everything that we have here, or sorry, here. Instead of saying update location, we're just gonna say dispatch. And then inside of that, we're gonna say changeLocation, To be that.
[00:02:45] Right, so this is gonna take our e.target.value, which is whatever the value of that location is. It's going to pass that into our changeLocation function here. Which takes in a location and returns a well-formed action, right? It's going to pass that into Redux. Redux is then going to call our route reducer, right, this combineReducers.
[00:03:09] It's then going to pass that into the location reducer, which is then going to read, is this a load change location? It is, and therefore, it will update the location. That's going to inform Redux, hey, something changed. Run through all of your subscriptions, right, which we created a subscription here in search params.
[00:03:31] This is going to change here. And this is going to let React know, hey, this component changed, cuz it's state changed, and this will cause a re-render of search param. That's the whole circle. Okay, so let's go ahead and finish rounding these out. So again, I'll just show you here how you would have done this, otherwise.
[00:03:58] You would have said, type, right? You could have explicitly written in here the shape of the action and that would have been fine. People do it that way. This just reads better to me. And then I don't have to remember then, all of my action types, right? I can put that into another file.
[00:04:18] Okay, dispatch actually, we can just do this, and I can write them both at the same time. So I can say, dispatch, changeAnimal, and that animal is going to be e.target.value. I think I need another parenthesis there. Now why don't I, notice, I had two function calls there.
[00:05:02] But now I just have two different things subscribing to changeAnimal. It's actually only going to dispatch one changeAnimal. I don't have to explicitly dispatch an empty thing for breed because breed is already listening for that change. So that's another nice thing about Redux, is you can these kind of dependencies work themselves out to be better code, I think.
[00:05:25] Instead of having two hooks calls, I have one action dispatch. Okay, updateBreed here, same thing. We're just gonna say, dispatch(changeBreed(e.target.value)), okay? And theme here, same business, dispatch(changeTheme(e.target.value)). Cool. So, I will say, this is so much nicer than it used to be. React Redux and didn't support hooks for a while, and so you had to do some really awkward finessing to get everything to work together.
[00:06:29] With the latest version of React Redux, this is very pleasant to use. After I refactor this from the old version, of course to the new version, of course. It's like, yeah, I could probably use Redux again now, this is actually kind of nice. Okay, so now you should be able to type in here and say, Salt Lake City, and I can change cat to be that.
[00:06:54] This is all still working again, right? So everything's still working as we think it is, yeah.
>> Why create dispatch instead of using useDispatch directly?
>> So the question is, why is this API the way it is? Well, it's a hook, right? And so, you don't wanna variably call hooks.
[00:07:28] In fact, that you can't call a hook in an action, or, sorry, in an event listener, because it's not in a react-function body, right? That's the only time you can use hooks. So it's just giving you a contextual function that you're able to call from anywhere. In other words, it's a necessary technical constraint, due to how hooks work.
[00:07:55] Cool, other questions? All right. One more thing. We have to go make it so that if we're on this page, notice that this button is not updating, right? You're actually seeing green, which is the default context. So I'm gonna show you how to quickly do this with a class component, which you're gonna see this is far less pleasant.
[00:08:21] So, head over to Details.js and we wanna be able to read our theme here. So first of all, delete your theme context. We're not doing that anymore, and we're going to import connect from react-redux. Okay, theme context is gone, that's fine. We're gonna get rid of theme context here So the theme consumer and all that stuff, we're dumping that.
[00:09:02] And then we'll repopulate this theme here in just a second. This will actually end up being this.props.theme, okay? Now what I would actually do [LAUGH] if this was me, I would just say const theme = use selector and I would actually just do it here. Doing this exact same pattern that we do with use params, that would totally work.
[00:09:38] We'd have no problems. You could even do useDispatch and pass the dispatch and you would just pass it in as a prop to details. And that would be 100% the best way to do this. I'm gonna show you the old way to do it because you'll probably run into this code.
[00:09:55] Okay, so we're gonna write a function called mapStateToProps. This is gonna be a function that takes in theme, And it returns an object theme. So, just to clarify that kind of dense syntax here, this is basically just a function that takes in props and it returns, theme: props.theme.
[00:10:40] This right here, returns this, and the reason why you do it this way, as opposed to just returning the object directly is we want just theme, right? It's a subscription, right? So we're letting it know, if theme changes, then give me back theme. That's what that is. Okay, I'll leave that in there so you can look at that.
[00:11:08] Then we're gonna make a new component here called ReduxWrappedDetails. So, const ReduxWrappedDetails = connect(mapStateToProps)(Details). Okay, so now we've, I know this is weird. It's a function that returns a function. So we're calling this, this right here, what I've highlighted returns a function, which this then invokes. I know it's a strange API, this was just really common back in earlier days of React.
[00:11:45] This ends up with a component that looks like this, ReduxWrappedDetails. And then here in WrappedDetails, we'll return ReduxWrappedDetails, like that. If you're looking at me like, why the hell are we doing this? I didn't want to either, but you needed to know that. [LAUGH] One, I wanted you to know how much better it got with the Hooks API.
[00:12:23] And two, again, if you're going into a job where they have a lot of Redux and a lot of old Redux, you're gonna see this everywhere. So it's good for you to recognize how this used to be. Okay, so basically, what's happening here is we created this function here, mapStateToProps.
[00:12:43] This grabs theme out of the store, okay? And then that's going to pass that into ReduxWrappedDetails, right? So now this component here is having theme being passed into it as a prop from Redux, right? Okay, and then from here, we're passing that down into here. So now, here, this.props.theme will be coming from Redux.
[00:13:09] Now we're not doing mapDispatchToProps, but that's how you would do. There's another thing that you could do here that will allow you to basically dispatch actions as well to Redux. We just don't have to do that in this particular component. But now if you refresh the page here, we'll make this Peru and we'll go look at Luna, and you can see here, this is the correct color.
[00:13:38] Okay. Any questions? This is it by the way, this is all the code that we're going to write here for Redux. I'm gonna show you the big payoff of like, okay, but the cool part of using Redux. Is RxJS similar to Redux? Let's go with no, they're fundamentally very different things, they just happen to be spelled fairly similarly.
[00:14:06] There's plenty of cool stuff on Observables and RxJS on front of Masters. Is Joffers' course the newest thing in that, Mark?
>> Steve Kinney's.
>> Steve Kinney's, okay, so check out Steve Kinney's course on RxJS. So a question from Muhammad is, how do we get data to the store?
[00:14:23] The only way to get data to the store is through actions. That's the point is it's like a front gateway into your data that has to go through a reducer and there's no other way to mess with it. And that's very intentional and it's a very good thing.
[00:14:44] And another question is, would I rather do this with Context, absolutely. Yeah, this would be way easier to do with Context. As you saw, we refactored from Context to Redux, and for this particular use case, Redux is just 10 billion times overkill.