Updating Nested State

[00:00:00]
>> Steve Kinney: So let's go ahead and we're going to try that out. We'll import set from lodash/fp/set. So you'll need the functional programming version, for reasons of backwards compatibility, the regular version of set mutates the object, so it's not acceptable for our uses. You could also write this yourself from scratch, it's just, since it's not totally on topic I'm not going to, I'm just gonna use this helper.

[00:00:32]
And so the set takes a kind of, this is pseudo-code, chain of properties, cuz we need lists, and we need the list, then the entities, then the list ID we're looking for, then the cards, right? So it takes the chain of properties.
>> Steve Kinney: It will take then what you're trying to replace, so in this case.

[00:01:01]
>> Steve Kinney: And then the object you wanna replace it on. And the cool thing about, so like.
>> Steve Kinney: Then the object. The cool thing about this is, you can with, load as the functional programing one, you can only give it one argument and it'll return you a function, waiting for the second argument, which will return you a function, waiting for the third, or you can give it all three arguments at once.

[00:01:25]
So if there's a piece you're constantly typing over and over again, just give it that first argument, and it'll give you a function, waiting for the second and the third, functional programming is fun, you should watch the other course on it. We're just gonna have you use the simplest version right now, which is, we can basically say that, const cards is this list.entities, with the listId that we're looking for.

[00:01:53]
This is effectively what I have on what's on currently line 14.
>> Steve Kinney: So list, plural. So this will go ahead and give me back a new array, which was all of the cardIds for that list with our new additional one. And then what we can do is, we can just basically return, I can store this in a variable too, the set helper, and we'll say, okay, I need the entities, cuz it's list.entities, and we'll pass in the listId that we're looking for.

[00:02:28]
And then we'll pass in the cards. And then the new cards we just created, and the overall state of our object. We can get rid of all of this.
>> Steve Kinney: So far a lot cleaner, it's three lines of code. Guys, I'll leave this is an excercise to the reader, you could take this one step farther, you could either create a, add car to list function and never think about this again.

[00:03:00]
Or even, you can create a add entities and add child ID, which is just gonna ask for, effectively, what's the property you wanna change, any of that stuff, but you can continue building abstractions here. I would probably, yeah, I might make a reusable add entity and add child ID to entity function.

[00:03:20]
And then I might take the versions of that, that are ready for just the list object, I might say like, add list, add card ID to list, and unit test it, and never think about it again. Cuz then, the hard part of the of the Redux reducer here was not necessarily Redux, it was trying to create a new object.

[00:03:41]
If we can just abstract that away, it's even better. So we'll actually pull out an add entity, like I'll pull one out that we can look at in a little bit, and it's just going to be waiting for this property. And these two kind of fill in the rest for us.

[00:03:54]
So definitely have an eye on taking the parts of your code that make you the most sad, and thinking, can you abstract them? So I can do this.
>> Steve Kinney: And let's go take it for a spin to make sure I haven't made any fatal mistakes. And it's added as well.

[00:04:13]
So we took an otherwise gnarly function, made it three lines, figured out a way that we could probably, we're not gonna make it fewer lines, but we can make future us understand what this line does by calling a function like add card ID to list. [LAUGH] Right? The act of naming the function will make it a little bit easier.

[00:04:31]
So, effectively, adding a list and an user is even simpler, because instead of having to do it, the way we just added a card in the card reducer, is effectively the same code that we're gonna write. And we could use a helper here as well, as the same code that we're gonna write for users and list.

[00:04:49]
So I'm gonna kind of pull those out, so we don't watch me do the same thing three times. And then, once we have that in place, we should have an interesting challenge to solve.