Extra Reducers

[00:00:00]
>> To extra reducers has two syntaxes. One is where you can just type in like, some action and put in- State and action. And this will work, this will basically match it against any other things, you could actually take that like task.action.assign to in the same way you're dispatching it.

[00:00:24]
You can also plug it in as a key in here and it'll totally work, the recommendation is to use the functional syntax. And this is mostly, should you switch over to TypeScript, is easier to do type inference functions returning then what exactly a key in an object was.

[00:00:42]
So let's do that syntax. We'll see the other one later as well. And so in extra reducers, we get a function and it gets this builder. And this builder is actually super powerful. We're not gonna get into everything with it, but with this builder you can add cases to it.

[00:00:57]
So I can do a builder and I can say I wanna add the case of tasksSlice.actions.assignToUser. And okay cool, if this reducer hears of any action from the other slice over there, here's what I want you to do. Again will hit the state and the action. And this one, we could just literally, this is no different than any other reducers that we've written.

[00:01:31]
This one's gonna be a little more complicated because the JavaScript logic is more complicated. Because if you look at the task IDs, it's an array, on the individual task, a task can belong to one user. So it's just setting a string to be a different number. Here not only do we want to push the task ID onto the humans task IDs array, we also wanna remove it out from anyone else.

[00:01:58]
So we need to iterate all the humans and say, if you're the human we're looking for, you get a task ID. Otherwise if you had it in there, we're taking it out of here, right? So the only complicated part here is a few additional lines of JavaScript. But the ability to create slices that can listen to actions from other slices exists pretty simply in this extra reducers property here as well.

[00:02:26]
And so we'll just say for, const humans or human of this case state really. So go through all the humans. And if you're the human we're looking for, so if your human Id is the one that task was assigned to. So action payload.humanId. Cool we're gonna push it onto your array.

[00:03:00]
[COUGH] .taskId, and if you're not, we use a good friend filter to get you out of there. Human.taskIds.filter. This will be the task Id and we basically want to sell just do I do just keep it clear. So let's go through all the Ids. We'll say. Cool if the Id is not the one, we're looking for.

[00:03:35]
Very similar to what we did before. It's also totally possible to write like a helper function for some of this as well, but I wanna keep it as regular JavaScript as possible. So now they should be able to kind of switch in between the different humans. Let's go ahead and we do need to wire up the action as well.

[00:03:55]
I believe, so let's go to the select human. This implement me, we're gonna do the dispatch to and we'll get the humans based on this. And then the task Id as well. So let's say we'll do dispatch and we're gonna do tasksSlice.actions.assignToUser. And the human Id it's gonna be event.target.value.

[00:04:37]
And the task Id is gonna be the one we are the task Id [INAUDIBLE] That should do the trick. Let's take a look at it. So now I should be able to assign one. So I got to refresh. Didn't work. Let's see what we got. Cannot set property assigned to undefined.

[00:05:02]
It looks like we didn't parse the right one in. Because it's supposed to be task Id. So Marc is now in charge ordering energy drinks and he's done. Right, I felt like he could be trusted with that task. And so now we can actually manage the state between two different slices by using this extra reducers and the builder.

[00:05:25]
The builder has add case it also has add matcher which allow you to look for like just sub strings within an action type as well, which is incredibly powerful. We're gonna take a five minute break and then we're gonna talk about, actually hitting API's and asynchronous actions and then yeah.

[00:05:41]
Okay, got a question for me?
>> Yeah, can you go back to that? One page where you were \,there you go or actually. In your slices, it sounds like, I don't know maybe I'm just misunderstanding this but it kind of sounds like you're listening and then doing something based on that event.

[00:06:08]
>> I really might misunderstand this though, am sorry.
>> That's actually completely right, right? Like kind of, when we're just writing our reducers just regular all JavaScript functions. We could just write conditionals and we could just check to see every action flew through every reducer, the thing about Redux toolkit is it's automatically creating the actions and setting up the reducer for the things that it knows about, right.

[00:06:36]
Extra reducer kind of gives us back that functionality to add additional cases up to this reducer object, to say like cool not only do we care about userslice.add, I also want you to listen for test slice actions assigned to user because you care about that too. And here's what you do, right?

[00:06:55]
Because in regular Redux, under the hood, every action flows through every reducer, but Redux toolkit by trying to hide a lot from us doesn't immediately have the ability to know about that. So the extra reducers and this function basically is trying to build back some of the functionality we had before Redux toolkit, where we could basically listen to any action that flew through.

[00:07:18]
So every action officially flows through this extra reducers, we'd say like, okay, I care about this one. And I wanna add it to things I care about as well and the rest of the actions will just flow through and not do anything. So yeah, effectively we're subscribing in a way and so for every reducers subscribe to everything, we're just kind of declaring where we care and where we don't care.

[00:07:39]
>> Is the only purpose for using extra reducers like for some events, side effects the ones like for example, this one is related to tasks. So it is a separate reducer. So it is a side effect for humans here and for some, like civic actions as well, yeah.

[00:08:03]
>> Yes and, yeah it's a connections which we're going to get to in a second is yes and, right. Basically reducers can handle anything that reducers makes. So extra reduces for, like we made add in here. So the only thing that this section knows about is how to deal with ad.

[00:08:18]
If I go back to the task slice, the only thing that's a task slice is built in to deal with is the stuff that it made. Anytime you want to deal with an action that like wasn't made in this reducers object, it has to go into extra reducers.

[00:08:33]
Right, so for instance, if this task slash toggle didn't happen to overlap with this toggle over here, I would have to put it into extra reducers, right. So if we like rename this in any way, I'd have to get that case to manage the task state in extra reducers instead.

[00:08:50]
This one just happens to match up with toggle, so it works. But if this was called like, I don't know, toggle twice or something like that, which doesn't make any sense, I would have to add it to extra reducers because it wasn't made by the slice. It's not handled by the slice, so it has to get handled extra reducers.

[00:09:07]
So that does affect things made by other slices. It does affect asynchronous actions that get fired. Those all fall under the umbrella of things that weren't explicitly defined in this reducers object, has to happen in extra reducers