Check out a free preview of the full State Management in Pure React, v2 course:
The "Dispatching, Reducers & Hooks" Lesson is part of the full, State Management in Pure React, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Steve demonstrates how to customized versions of dispatch by building independent dispatch functions that are linked to reducers.

Get Unlimited Access Now

Transcript from the "Dispatching, Reducers & Hooks" Lesson

[00:00:00]
>> So now we could say something along the lines of, we'll change this to use thunk reducer and we'll say use effect, just like before, and there's nothing stopping you from combining these approaches as well. Will say go ahead and fetch. Remember, before we had a whole bunch of that extra like loading state and stuff along those lines, we can say.

[00:00:37] Hold on one second. We'll use effect and we'll dispatch a function. Might actually even pull this out a little bit. We could actually give ourselves like a fetch character, so let's actually pull that out. We'll say const, fetch characters, just cuz it's gonna get a little confusing in that use effect.

[00:01:11] Again, this is simply a JavaScript function, it will use fetch it will have a side effect, right? Which makes it a little trickier task but we say fetch, and we'll say end point. Was characters, this we've seen this before right then response, response to Jason. Then we'll take that response and we'll dispatch.

[00:01:48] Type. Why are we doing this, right? We're writing this file, but now, we're taking the idea of sending an AJAX request and dispatching stuff, and we're removing it completely from our React application, right? It's simply announcing that stuff happened as it goes through. It can be in another file, it can be literally anywhere, we can reuse this all over our code bases is simply an action creator like that ad garage and toggle forgiveness that we saw earlier.

[00:02:13] It is separate from any other concept. It will get a thing called dispatch which should be a function, it will call it. Right, but that's all it really needs to know about anything else will give the payload. And this case is gonna do because this is built for the characters one because it's why it's called fetch characters, we'll say the payload is, so you say characters is response.characters So it's got a type, it's got a payload, if things go poorly, we got the error, Nope.

[00:03:17] The error. This could be anywhere in my code base. The idea is it is totally separate, it's simply a JavaScript function. It's going to take this dispatch thing. It's gonna call the same dispatches, and do all of the right things. And then hopefully whatever wants to manage it, whether it's show a load or showed an error, like whatever, we're separating that like what the component does from the actual separating of the state, the more you don't have things combined, the easier it is to change your mind.

[00:03:52] Right? You can reconfigure all the pieces, when everything's tied together is problematic. So now, in here when they click that button, we're just gonna say, dispatch, fetchCharacters. So this is the dispatch here that comes from our useThunkReducer, right? It will go ahead and dispatch this function, which will get a copy of dispatch, which will then handle everything else.

[00:04:26] So we've separated what the component knows about. It's like, hey, I'm gonna dispatch this function. It knows about how to go get characters, and it's completely separate from our UI, right? And then it will tell the Reducer that does no stuff all the things that happened. So we're beginning to separate out, we've separated state management for the component.

[00:04:46] We've brought in the ability to pass any function we want, to kind of customize this. We want the body to do something else, we just dispatch another thunk, right? So we're going to get the same effect that we had previously but we can pull more stuff out. Now, let's say you don't want to have thunks, but you wanted to have logging, right?

[00:05:02] Whatever you want to do, you can create like these kind of customized versions of dispatch, in order to do that for you. Let's verify that it works. We'll see if I got any fun new errors, useEffect is not defined, that's a great one. So fetch and you see that the load based on that button, so before we were doing it when it mounted, here we now have it as a function that will go ahead and trigger it on an event.

[00:05:33] Right? Instead of loading with announcement, you just a regular useEffect, we're saying hey they've dispatched this fetchCharacters I have those separate, you know how to do that? When they hit the button will dispatch go fetch the characters which can then go ahead it will dispatch a loading. It will go dispatch a response completed.

[00:05:48] It will go dispatch an error. Right, we kinda separate out all of these pieces, and that's basically a way to add extra functionality to the dispatch if the very simple use reducer that React gives you doesn't give you what you want. Should you find yourself adding lots and lots of different types of middle ware.

[00:06:06] Could you add them more and more? You could. It's probably a sign that Redux might be a choice for you. You know, ask your team about Redux and decide if that's what you want going forward. Like there was a lot of things when we lost some of that performance stuff with the context API.

[00:06:26] React Redux, which we'll see later, which we'll talk about a little bit more later, does a lot more of those performance optimizations for you, right? And could you implement them yourself? You totally could. Should you? Probably not.
>> I keep seeing that you're missing, well, not you, we would be, too, missing a dependency.

[00:06:44]
>> Yep.
>> That doesn't seem to be affecting anything.
>> This one, it's not, but we should put it right. Where's that use effect? It's not affecting anything cuz this component doesn't reload, right? We have that empty array in here, so it's not like, slamming on the API.

[00:07:07] But that so this whole load when it first mounts, but this will say if dispatch changes which it really won't with the use reducer. Actually we might have to wrap this in a use call back, right? But [SOUND] yeah, let's actually fix it. I'm pretty sure that when I put this dispatch in here things are gonna go poorly.

[00:07:30] Right? It works right now, because it does it only on Mount. If I put dispatch in here, JavaScript is gonna make my life a real hard, right? Cuz what happens here is we're returning a new enhanced dispatch every time, right? Which is going to come out of this function every time, which is going to trigger, you know, bad stuff every time.

[00:07:52] So what we'll probably do here is we'll say React.useCallback is a great noticing. React.useCallback and as long as the dispatch from useReducer is the same, we can assume that this shouldn't change either, and we know because I told you and you believed me that we saw it with our performance optimization before, that the dispatch every time will be the same referentially.

[00:08:18] So let's make sure I didn't blow anything up. Cool, yeah, so we're just saying, hey, if dispatch hasn't changed, don't give me a new enhanced dispatch every time render is called, just give me back the same one cuz it's just calling the same dispatch, right? And these are the little tricks you have to be worried about with the useEffect because otherwise, yeah, I probably would've locked up the browser.

[00:08:40] Right, just from talking and typing at the same time. But that's why you live-code with 15 of your friends.
>> [LAUGH]
>> What we're gonna talk about a little bit next is thinking about some routing, in this case.