Handling Dispatched Actions

[00:00:00]
>> Steve Kinney: And you can see that this action is flowing through. And it's actually flowing through the list reduce, cuz that's where we have the console log. Luckily we're gonna need to actually deal with it there. We're gonna need to deal with this action in two places, the card reducer and the list reducer.

[00:00:13]
But you're gonna see it's flowing through that one, we have our payload. Everything's kind of like hooked up. We're done with the react portion of this. The rest of this all happens now in Redux land, because React is already made aware of when any of the state changes.

[00:00:26]
It's been able to tell Redux, we just need to tell Redux, hey, a thing happened, can you update the state of our application to reflect that? And I'll be like, yeah, sure can if you just tell me how to do it. So go into the card reducer first.

[00:00:47]
>> Steve Kinney: Instead of just console logging for funsies, let's go ahead and check. All right, we'll say,
>> Steve Kinney: If the action.type is CARD_CREATE, and we will refactor this to a constant in a second, but let's just get it working first. We'll grab the card and the cardId from the payload,

[00:01:18]
>> Steve Kinney: And then we'll return,
>> Steve Kinney: Entities, right, cuz card has entities and it has IDs, right. Return entities is all of the other cards.entities, right, that was already in state. And we'll add a new one with the cardId, and that will be our new card, right. So previously we had keys that were the IDs of each card and the values.

[00:01:44]
We're just adding a new key for the new card ID and a new value as the card data, right. This syntax effectively just allows you to have a variable in an object, as an object key rather.
>> Steve Kinney: Right, and then we also just need to add it to the array of IDs.

[00:02:05]
>> Steve Kinney: This isn't actually used in our current version of the application. We can either spread it, but if we wanna have an all cards view, we would need this, right. And so we're just kinda being forward thinking for our friends, which would be cards.ids plus this new cardId.

[00:02:21]
You also could use a radar concate and just concate it on as well. I like the consistency of this syntax. I don't have to think about object out of sign versus the radar concate between the two of them, I just spread stuff and it works in both. But depending on your babel settings and what browsers you're targeting, this is still relatively new syntax.

[00:02:41]
So for a while we weren't able to use it cuz we just didn't have the right setup for it, but we do now so we're ready to rock and roll. Now this will go ahead and create a card, we should be able to see that. Let's just verify before we get too deep in here.

[00:02:57]
We'll see more done. And this is very important. Now you'll notice it didn't show up, right, cuz it's been added to our state.
>> Steve Kinney: If we go to the cards, you can see that there's now four different IDs. We've got the, let's just go to the state, go cards, entities, I don't know which one is the newest one, pretty sure it's this one.

[00:03:28]
More done, this is very important. It's added to the state, but it's not on the list yet because we just have to, the list goes through its array of card IDs and does each one of them. So we actually need to listen to this action in two places, which is totally doable.

[00:03:44]
>> Steve Kinney: So we'll go into the list reducer, and what we're gonna say is, all right.
>> Steve Kinney: Actual, spellcheck was helpful there for my typo. CARD_CREATE, and we'll say we need a few things. We need the,
>> Steve Kinney: Card ID from the, actually we can grab this separately, we'll say, grab the card ID.

[00:04:14]
We'll go and grab the list ID from the action.payload.
>> Steve Kinney: We'll grab the, we got a new set of entities. So remember, we can't just modify the list.entities, right. We need to return a new object so that when Redux says, here's the new state of the world, React goes, this is a different object.

[00:04:38]
So we're basically gonna make a copy of list.entities. Effectively it's just a clone.
>> Steve Kinney: Call this entities.
>> Steve Kinney: And then we'll say on this new one,
>> Steve Kinney: Find the list ID.
>> Steve Kinney: Spread out that entire singular list. And if this makes you wanna cry, we'll talk about how to abstract this in a second.

[00:05:09]
Take all the other properties, but replace the cards.
>> Steve Kinney: I'll use concat this time.
>> Steve Kinney: Right, so this is basically creating a new list that is going to a new set of lists. And then what we're able to do in here is we'll just say return all the other lists or the list, the IDs effectively.

[00:05:41]
>> Steve Kinney: So honestly, I'm confused by this. Also that semi colon is not gonna make us happy later. Go ahead and we should see it show up on the page.
>> Steve Kinney: Great, now the fact of the matter is, we're gonna have to write gnarly code like that all the time.

[00:06:01]
You have a choice, you can use mutable JS, totally, or Mori or any of those libraries. Again, you pay the cost of not necessarily having regular JavaScript objects anymore, which might be scary, might just be too big a refactor for you. The other option is to create yourself some helper functions that make this effectively less bad.

[00:06:20]
They basically abstract this away, cuz we're gonna be doing this all over the place. It'd be cool to just say, hey, I'd love to just be able to go ahead and change this property and give, do all the making of the new objects for me, right. Sometimes you can't avoid gnarly code, but if you can abstract your way it's not as bad.

[00:06:39]
Low dash has a separate version for functional programming. Functional programming is all about immutability. And there's a version of that, of their set helper, where basically you give it the property chain that you're looking for in the new value. And it basically creates the new objects along the way for you.