Action Creator Helpers

[00:00:00]
>> Steve Kinney: All right, I wanna show just kind of some of those abstractions in action. I created just a quick utilities file, which is taking all the parts that could change in that set function, right? Again, okay, what is the thing that we're trying to set, right? What is the property we need to go find?

[00:00:18]
And then what is the new value of that property? So pipe is exactly same as redux.compose. In fact, I could've used redux.compose, I just used another Lodash one. We know that they all have entities. And we know theyhave ids. So creating a new card, or creating a new list involves putting that data onto the entities And also adding the ID to the array of IDs.

[00:00:39]
So now I can say add entity and this will do it both places. I never think about that abstraction again. I just say, all right, what state are we using, what's the thing I want to put on, and what's the ID? And then basically solely for adding cards to a list, I also have addIdToChildren.

[00:00:56]
Which is figuring, it just does the same thing we just implemented with adding that card ID to list card array. So now, if I go in here, I can effectively just say, all right, if card create, addEntity to all of your cards, this new card at the cardId, right.

[00:01:16]
If I go into listsReducer, these become one liners that I can use both places, right. And so like that squirrelyness that we saw that was a little bit confusing with setting that state. I just have some helpers that I can use. There is a refactor that we can do and that we should do.

[00:01:33]
And that is, if you remember that create card container, I made this big stink before about how if we can just use an object for mapDispatchToProps that we should totally do that. And I made a big stink before about like using strings everywhere. It's just asking yourself for a typo to waste a morning of yours.

[00:01:49]
Right, or worse, it's like four o'clock and you really just want to ship that thing because the sprint ends tomorrow, right, and that's what I make my stupidest mistakes. Let's go ahead and let's separate out the actions. So I've got right now this idea of card actions. And I'm just going to, again, the layout is all up to you.

[00:02:08]
But what I'll do is I'll say const CREATE_CARD. And you can use ES6 symbols if you want to. I don't. I always think about it and then I decide like, not today. And then what am I doing here is kind of take the things that I need out of that function from card actions, or from the mapDispatchToProps.

[00:02:35]
Create card container. And I'll take this. And I'm going to pull it all out. Remember I said before. Hey, you can totally use own props. And I was like, you shouldn't. And y'all just nodded and it was cool. You're like, he must know what he's talking about. They let him sit up here.

[00:02:58]
Like, if you used the own props and you have to do it in this function, right. But in our component, we let react hand us the list ID. Right, we passed it through React, which means that the function is getting the list ID and the card data. It doesn't need anything separate.

[00:03:15]
Which allows us to take this code and do my favorite thing in the world, which is copy paste. But copy paste is only good if it's followed by deleting, right. You could argue, can't you just cut? I don't need to hear it.
>> Steve Kinney: And we'll say export const createCard.

[00:03:34]
So = just make this a function. I need to get that default card data. We're gonna see a otherwise too big container get nice and small. Bring that here as well, cuz it's just a thing that we need. And then instead of dispatching, because we don't have access to dispatch, we'll just take this object and return it.

[00:04:03]
Now, remember, I said before, it's, React-Redux has a way to automatically bind your action creators with dispatch. So that's why we don't need to worry about it. We just need to return the correct thing. And we'll go ahead and go back here. Are you ready for it? We will just do some deleting.

[00:04:31]
>> Steve Kinney: That feels good.
>> Steve Kinney: Actually, I think I can do this auto import, cool.
>> Steve Kinney: Okay, so I write it, createCard.
>> Steve Kinney: Look at that. I could even not store it in a variable. I could, watch this.
>> Steve Kinney: Yeah. Future me when I come across this container is going to be pleased with past me.

[00:05:10]
Right, and future me is the most important engineer that I know.
>> Steve Kinney: Right, and we're adding it to the page. Great. All right, so we can assume that adding users is not dissimilar. So we'll kind of pull that out. And what I want to talk about is, we have one giant object that we're replacing.

[00:05:40]
Right, that doesn't mean that we necessarily want to rerender stuff. So we'll kind of go and visit that in a moment. I'm going to come right back with another branch for us.