Implementing Map Dispatch to Props

[00:00:00]
>> Steve Kinney: What I'm gonna do is I'm gonna implement the ability to create a card, because it's a more complicated one, right? Because cards have a relation to list. It's always slightly more tricky than being able to add a list, or being able to add a user. But once we can do cards, it's like lists and users are easy.

[00:00:17]
So the ability to create a card together and once we have that will kind of just pull in the ability to create a list and users, it'll be kind of repetitive. But let's go ahead and we'll implement that. If we look at the UI, you can see that I've got the ability to add a title, a description, and then we'll hit Create card.

[00:00:38]
So this is what's new in this case is we're gonna have to do a map dispatched props in this application now. Also there's two schools of thought. Could you store each and one of these input fields in Redux state? I guess you could, right? You can probably say, all right, for every list there's going to be create card form, so I'm gonna make more properties on that global state object.

[00:01:08]
And I will then fire of actions and yeah you could do all that. But like these input fields are getting used anyway. I'm not that sharing that state anywhere. I'm not persisting it to a date, I'm not doing anything with the state other than populating the input fields on change, and then using that data.

[00:01:24]
So I might opt for react state at this point, I might choose not to use Redux state. In fact, spoiler alert, I'm not going to choose to use [LAUGH] Redux state, right, cuz that is adding unnecessary complexity with no benefit. Right and I don't like to do that, right?

[00:01:43]
So, we'll go ahead and implement the ability to create a card and then we're gonna start out and we'll like with a little bit of a hurt our head a little bit and then I'll show you a better approach that will help us refactor it. As we'll see, like some of the hard parts of working with an immutable object and why you might consider doing something else.

[00:02:03]
So, when this happens we need to put a new card in two places. We need to take the card itself and put it into that cards part of the tray, but then the list also needs to know, hey, that new card that belongs to me, right. So we need to put it in two places for listeners, we're only gonna need to really put them one place.

[00:02:27]
So we'll go back over. We're gonna a create card container. This one's gonna be different because it's not gonna have any state props. That'll all be stored in the actual react state local component, but we will map dispatched props which is when they hit Create card, all right, tell Redux we need to put a new card into our store.

[00:02:47]
So go ahead and we'll create a CreateCardContainer.js. Then we'll import
>> Steve Kinney: Create.card.
>> Steve Kinney: Nice, well, we'll just populate some like default card data that will use, which is we know that cards have titles, descriptions and they're assigned to somebody. So I'm just here to create an object I can use.

[00:03:32]
>> Steve Kinney: Just title that'll be an empty string.
>> Steve Kinney: Description.
>> Steve Kinney: That'll be an empty string assigned to just be an empty string. All right, now we're only gonna create that mapDispatchToProps.
>> Steve Kinney: We'll do the kind of original version, and we'll see if we can refactor a little bit.

[00:04:05]
>> Steve Kinney: So we'll return a createCard.
>> Steve Kinney: Lowercase. Make this on an object, right. Cuz the mapDispatchToProps always has to return an object, cuz these are the props, right? This will get combined with the nonexistent map state props. And become the set of props that go to that component.

[00:04:34]
>> Steve Kinney: It'll take some kinda list Id, white list is this going on, and effectively, what is, what's the details, is the title and description of the card and stuff along those lines? So make a new cardID. We're just gonna cheat and just use add known, hopefully unique string identifier and then the card is going to be the Id that we just made.

[00:05:02]
Anything that came from the dispatch cardData. And then,
>> Steve Kinney: We'll do actually, we'll start with the default data.
>> Steve Kinney: Let's start with the cardId we know we want. Any default data and then because this one comes last it overrides the previous properties. So the Id will be the first property, then it's going to basically create a title, description, assigned to that are all be empty strings.

[00:05:47]
And then whatever we got in there will override those, right. That is how that kind of spread operator works that we saw earlier. All right, and then once we have the listId, because we need to know what list added to and the new cardData, we're kind of done here.

[00:06:02]
We just say dispatch.
>> Steve Kinney: We'll start with this, we'll have to replace this. CARD_CREATE and we'll say the payload is the son in the card that we just made the listId, and the cardId. As well now could I get it off the card? Sure, I could totally do that but it's easier for me later.

[00:06:29]
So we've got an action. That's it, that's all we need for this component the rest now goes to back to pure Redux as we saw before. And we will make sure to export default.
>> Steve Kinney: Connect, now we don't have any map stage props. So (null, mapDispatchToProps), and we'll give it that CreateCard component.

[00:06:52]
So this is now a component we can put anywhere in our application. Now when it gets called we're gonna need to give it a listId and some card data, but it is, we can put it anywhere we want, and it is hooked into Redux, and it's able to dispatch those actions from anywhere.

[00:07:06]
All right, that's super cool, so now we'll go back into our card.
>> Steve Kinney: Or it's actually in our list, and we're gonna replace CreateCard with CreateCardContainer, right? And we know that the only thing it's really gonna need is to know what list it's currently in, right? So we'll say listId is this list.id.

[00:07:33]
>> Steve Kinney: Great.
>> Steve Kinney: So let's look at that CreateCard real fast. Make sure we're getting in the listId.
>> Steve Kinney: Actually, we don't need to do in the render because we don't need to show it. We just need to do it here onCreateCard. This state will be the title and the description.

[00:07:57]
So we'll also just get the listId here.
>> Steve Kinney: We'll pass it in.
>> Steve Kinney: All right, now, you're like, could I use own props in mapDispatchToProps? You totally could. Right, you could totally go back over into this CreditCard container and dispatch just like mapStatesToProps.
>> Steve Kinney: Could take the own props and we do ownProps.listId.

[00:08:36]
When we refactor this, I'm gonna show you why you might not want to do that. But you absolutely could, and there might be cases where you need to. But we'll start with it like this. All right, so we've got in there, we've got it in the list component.

[00:08:50]
Now, it's the eternal problem of events in JavaScript which is if an action is dispatched or an event fires and nobody is listening for it, does it really even matter? If I'm not mistaken, in our list reducer the number of files is a common criticism. How about that?

[00:09:13]
Redux, but you start to get into flow again. Likely infrastructure gets put into place at one point. And having sub separated out is sometimes really helpful. All right, so I misspelled the word components in the container. So I fix that. Great and hopefully I can do more done.

[00:09:36]
This is very important, right? I'm not seeing it show up just yet. So let's take a look and see what's happening. First place I might look is it was called onCreateCard. So let's just switch that I mean, I can either name it both ways. Either way, I'm refactoring a traditional react application here.

[00:09:57]
So let's go with the flow instead of onCreditCard. We don't need to do that anymore cuz it's coming from Redux. And do createCard.
>> Steve Kinney: Great.