Connect API & mapDispatchToProps Solution

[00:00:00]
>> Alright, so our job was to basically do the the Redux pieces here about removing an item from the array of items, as well as create the action creator and then hook it up to our component. So let's start with the action first, which is again, I operate on the principle is my action should have, like I said before, just the facts and how little can I know about what happened?

[00:00:23]
Because then I can handle the rest of that in my reducer, right? The more than my actions are aware of the trickier like the more people will rely on something. I think a lot of times about what works very quickly when you're just doing a demo app. It's also important to think about, okay, like if people are coming to expect that in the action, we have the entire shape of the entire object.

[00:00:43]
Do you ever change the shape of the object? Well, now you have to find out both in that l the actions are using that shape and everything that might have been coded against it, versus by keeping your surface area incredibly small, which is like what is the bare minimum that we need to know.

[00:00:58]
Then we can go ahead and like our code base will hopefully be more maintainable over time. So in terms of removing a menu item, the bare minimum they need to know is what?
>> The ID.
>> Just the ID yeah exactly I just as long as I have the ID I can figure out the rest in the reducer.

[00:01:17]
So make remove item and we'll grab I used you you I understand the not you ideas but like ID if you spread all the props over ideas the thing that means something HTML Just add this set counter here as well,and we should be able to go ahead and now see that we have in the application.

[00:01:43]
We'd love to get this working so that when it hits submit, we can change the count.Originally, we can just keep this as some amount of state but if you can actually And the payload is I could just do the UU ID. I'm going to nest it as an object.

[00:01:59]
So whatever UU ID is in, whatever UU ID is passed in, prepare the payload with that value. And then in my reducer Pull in this item removed, and we'll say action type removed. Then, what's the best way to get something out of an array? There is no like there's no reject per se for an array in JavaScript.

[00:02:32]
What is the strategy for getting to immutably get something out of an array? Should clarify, there's ways to mutate the array and splice it out. But what is a way to immutably get something out of an array?
>> I would say use from third
>> Yeah filters probably my best bet which feels a little counterintuitive, which is I wanna remove one thing for the array.

[00:02:50]
So, I'm gonna write a filter that keeps everything that is not the thing I'm looking for. That's all we have with the standard library in JavaScript. You could also choose to use something like Lodash But it's not too bad just involves like flipping the logic around a little bit.

[00:03:07]
So here will return the state which has all those items and it will filter it for each item. You get to stay in the array, if your item.uuid is not the action.payload. .EU ID.
>> So you got to stay and if you're not the thing that we're looking for.

[00:03:32]
All right, so we have all that in place and now we just need to go ahead and make that singular menu item container. So we'll go in here, we'll say menu, item container, dot js. And that's going to so we'll have a map dispatch to props. Where the, if we look at the menu item singular, it's expecting a menu.

[00:03:58]
I am singular Expecting this remove property. And I know it's all wired up to deal with that already. So we need to figure out how to get that action creator and wired in there as the remove prop that this component is expecting. So map dispatch to props. We'll start by we use the function syntax at first because we'll see why in a second.

[00:04:20]
So dispatch, and we know that we want to turn an object and we know the one that we need is remove. And remove. Now it's tricky like I could make it ask for the UID and pass it in, but I got to modify the component. Well, let's we'll start with that.

[00:04:43]
And then we'll say dispatch, remove item. You ID. So now I would have to go back and modify the component. But like I said before, before we jumped into this exercise. We get that own props. Or just the prompts have been passed to that object, which we saw before we're spreading out the item, which means UU ID will be a prop that we're passing in to the container, which means we can read from that ourselves.

[00:05:11]
So, instead of asking for that later, we can basically give this component, I'm going to give you a version of this action creator that actually already knows about your own UU ID or your own ID. So, when you dispatch you don't have to worry about that later. So let's say on props you you I do.

[00:05:30]
And then finally, export const menu item container equals Connect no for the first argument, and eventually we could You could do a thing where it's like what if we pass menu item container, only the ID and let it fetch the rest of the items about the rest of details about the item from state.

[00:05:53]
That's totally a thing you could do. I'll likely leave that as an exercise to the reader. But yeah, we could totally just pass solely in the ID and fetch it out the same way. We're doing it later, but we already have it wired up and it's fine doesn't actually save us too much.

[00:06:10]
So do map dispatch to props. And then we'll pass in. Menu item, and connect needs to get imported As well, and now in menu items floral, We can just swap it in. All right, let's make sure not to make any mistakes. Seems like everything's good. And I can remove items from there as well as just add one more.

[00:06:54]
Put it in, remove it. All right, so we've got that working as well. And what we saw, was there's ways to get Props that you pass into the component and use them. As you map that dispatch, you're getting everything you need. And again, the name of the game here is we want to take these existing presentational components.

[00:07:10]
We don't want to have to modify them. We want to use them as they are. There's a use case for both especially if you're kind of wrapping a design system or something along those lines where you might choose to use this approach versus the hooks approach. There's also if you really wanted to do both, you could create higher components that use hooks and then pass the props into a component that you pass in, as well.

[00:07:33]
I, you know, that seems just to be like you're basically re implementing this API yourself at that point. So I don't know necessarily if you need to do that. The other nice part about the Connect API is stuff like memoization. And you know, React memo is just taken care of for you as part of the process of connecting the components.

[00:07:52]
So, a lot of times I have found that if performance is a concern, a lot of times the amount of memorization I could do have done by hand with the hooks and higher order components. I get for free. And it tends to be more performant. That does not mean that you could not handcraft all the react memo within your own application you the hooks API, but the idea that you don't have to, especially on a large enough team, those things tend to add up because like, maybe somebody didn't think about it.

[00:08:19]
Well, maybe they cache the wrong thing or use use callback Whereas actually more expensive so on and so forth.