mapDispatchToProps

[00:00:00]
>> We know that the item can be dispatched. But now we also need to actually wire it up to this button, because like right now, there's nothing actually happening here. And so there's a bunch of ways to do this. And we'll kind of step through just the, dead simple approach first, and then we'll kind of escalate it a little bit to a more kind of sustainable approach.

[00:00:24]
So if we go in, we want to create this NewItemFormContainer. Now that's going to wrap our new item form with everything it needs to be connected up to Redux. And we can say NewItemFormContainer, and we need a new item form From ../components/newitemform, right? And we will, pull in connect as well.

[00:01:04]
And so the cool thing that, is if you don't give connect any arguments or if you don't give it any map dispatch to props, it's gonna pass in that full dispatch object. Which is just like map state to props was an analog towards Uselector, that dispatch is effectively the same dispatch, that you get from the use dispatch hook, in our, or say NewItemFormContainer.

[00:01:37]
Equals Connect by giving no arguments, no map state to props, no dispatch to props. Unlike that tip selector I showed you the very beginning. And we pass the NewItemForm, it's going to pass in, an empty object for the state props, and then it will actually pass in dispatch, as a prop to that object.

[00:01:54]
So I can go ahead and, if we go into calculator, we can swap it out. And we'll say you want to FormContainer. Containers, great, so I should be swapped in at this point. Now this isn't great because like we need to go into NewItemForm and modified a little bit.

[00:02:20]
And one of the selling points of using the connect API is basically, your regular old presentational UI. React components can be completely agnostic, to the existence of redux. And if you want to swap it out or use it in a test suite or anything along those lines, but just approve the dispatch does get passed in.

[00:02:41]
We will take this dispatch, and we'll say, whenever they submit the form, will dispatch and I'm going to just hard coded in because we're gonna delete this in a second. I don't need any more imports than we already have. So we'll say type is item added I believe it was, and the payload will be.

[00:03:06]
Name and price, that should do the trick. So I'm gonna go ahead and we'll say. We'll get the price of 500 bucks. You can see that it was added there as well. So dispatch does get passed in. If you pass nothing, you just connect a, any old react component to Redux using the connect API.

[00:03:34]
Dispatch gets handed in, just as if you would use to use dispatch hook. But if we want to say like, hey, if you look at this component, the API for this component, is that it has a onSubmit, props is expecting. If you want to be like say, hey, I want to create my state management in a way, that doesn't even touch any of the UI components that are being created.

[00:03:55]
This is where that map dispatch props can take that dispatch and, kind of work with it to get in a way that component is expecting, on your behalf. So I'll just remove everything we did just now. I'll save that, and let's actually go into this NewItemFormContainer, and we'll get it working, which is just review.

[00:04:20]
The NewItemForm is expecting a prop called onSubmit. And it's going to call that onSubmit function, whenever the form is submitted. So really all we want to do is, give it an onSubmit prop, that comes from our Redux dispatch. So this is what we'll do this const MapDispatchToProps. And that is a function that will take Dispatch.

[00:04:43]
Just as what was getting passed in, but it lets us modify it first. So I could say something like cool, actually return an object which has a onSubmit prop. And that's going to be a function. It's going to be name and price, basically conforming to the API, of the existing function.

[00:05:02]
That will go ahead and dispatch[addnewitem], with the name and the price, right? This is very similar to what we wrote in line with the hooks, example from before. And then, the first argument is connect is map states of props. The second item of connect is map dispatch to props.

[00:05:20]
So you don't have to map any state in there. You can always just say null for the first argument. And then pass map dispatch to props as the second argument. All right, let's go verify that this works as well. And you can see that we have something delicious added as well.

[00:05:46]
So, [COUGH] now we saw before the, you can imagine, like let's say we had a whole bunch of different props of this thing, this took, you could theoretically use dispatch every time. We saw some things we did with the hooks earlier to just try to, make our own lives easier.

[00:06:04]
We can do that with bind action creators as well. So we could say instead of, just returning we'll say, bindactioncreators. And imagine this was a much larger object, you could say, and pass and dispatch as the second argument. And now none of the small, none of the values inside the object.

[00:06:30]
Need to know about dispatch, let's go verify that. We'll make a $700 sandwich. I'm from New York City, it's fine. And so we've got our $700 sandwich in there, and that works as well. But, even this is tedious, right? Nobody wants to do this, nobody wants to live like this.

[00:06:55]
So if you give map dispatch to props of a function, it will call the function and pass in dispatch, but this is a common enough pattern. Right, and one of the things that always like to say is, if you have to do something and it feels tedious, other people probably think it's tedious too.

[00:07:12]
And there might be a better way to do it, which is if you simply don't give map dispatch to props a function, but you just give it an object. In this case, the props is expecting, and the functions that it should call. It will automatically map dispatch to props for you.

[00:07:32]
Right, so generally, if your just making very simple props that are going to fire your actions, you can just use syntax. It will automatically pass this dispatching, it will bind them all to a store dispatch, and just set everything for you. You don't need to do any of that.

[00:07:49]
If you need to do something a little bit more complicated, like work with the functions before you send them off or something along those lines. Or if you need to know other props about the component that were passed in, well then you are going to need to use the function, so you've got a very simple and easy API that you can use.

[00:08:05]
And then if you need to drop down, and have a little bit more control of what you're doing, then you can use the function as well. And we'll see that like a few other times, it just various places throughout using Redux with react. So now I'll make a salad, and I'll make this $1,000 salad.

[00:08:20]
And you can see that this works still as well. So there's a bunch of different ways to doing the same thing. One of the things that you can kind of see is that, you can either just use connect, and not like think about it at all. Or you can pass a function that will receive dispatch, where you can work with dispatch and do whatever you need to do.

[00:08:46]
Or you can just give it an object and it will figure out all the rest on your behalf. You have lots of options are each like, simple, but it's hands off, versus a little more involved, but you have full control of what's going on. Right, and that is, one of the great things about this API.