Updating Item Data

[00:00:00]
>> The next thing that we're gonna kind of do is I'm going to have it set to update the price just to show you how that might work in the reducer. And if this stresses you out, don't worry it stresses me out too. We're gonna make it better first, we'll show how to do without any libraries to deal with the mutable state.

[00:00:17]
Which is playing on JavaScript and then I think somebody brought up a library called MR before and why don't we use that we totally will. We'll kind of see what that gives us by doing it by hand first and then making it a little bit better for ourselves.

[00:00:29]
So what I'm gonna do is I am gonna go ahead and implement the ability to update the price. And then you are going to implement the ability to update the quantity. And then we will pull those all together start figuring out how to actually get the derived and computed data from this project into place.

[00:00:46]
So some of this will be somewhat similar for us, let's go and create the actions first. In actions, so we've got Export const, let's call it item price updated. We got 'ITEM_PRICE_UPDATED', and What do we need to know about what are the two? What are the pieces of information that we need to know in order to update the price of an item?

[00:01:20]
>> The ID and the price?
>> Yeah, what item and what price? Right, removing all we need to know is once you want to remove, we're gonna update we need at least one other piece of information. We don't care about the rest of it, so we can say export for const and we'll call it update price.

[00:01:35]
Consti update price and really so that what needs uuid and it needs the new price, right? I'll say of the type, Let's do past tense here as well, item price updated, great and like I said before, the payload is pretty simple. It's simply, Uuid and price, again like I really feel strongly about what is the bare minimum you get away with in your actions.

[00:02:18]
And then bringing this into our, we need to put in the reducer as well, so let's do that. All right, so this is tricky, think about this as I type, I'm gonna ask somebody in a second. How do I return an array with mostly the same objects, just updating the one that I'm looking for?

[00:02:38]
Cuz I can't mutate the array again, I can't just like find the index and mutate it myself. I need to return a brand new array with everything else the same. So as I type for a little bit, you think about that and then we'll discuss it as a team.

[00:02:52]
>> Map,
>> Map and then what happens when I'm in the map? So all right, let me get there and then you're gonna talk me through this. All right, so we're gonna return state dot map with the item, all right what's my logic?
>> We need to check uuid.

[00:03:14]
>> All right, so
>> And if there is a match, then update the price otherwise return item.
>> Cool, so item uuid equals look equals equals equals action dot payload dot uuid. So it's the one that we're looking for, then we're going to return but we can't just mutate the object, right.

[00:03:37]
We have to create a brand new object for a new version of the object of that given item where the price is action dot payload dot price. Otherwise just return the original item on modified, I don't love it, it works well, it should work. We'll find out when we get it completely wired up, but this should work.

[00:04:00]
But you can see where JavaScripts lack of immutable data types starts to get a little bit tedious for us cuz we have to spread everything. And again, I'm highlighting this problem cuz we're looking at solutions to it in a little bit. Let's actually get over to our menu item container.

[00:04:20]
And we'll say update price, really this point just needs the price and it should be, We want to dispatch, Update price with whatever price has passed them and the own props that uuid. Right, so again we're taking these action creators and we're just trying to like both, like reformat them to whatever props this company is expecting.

[00:04:54]
And do whatever ceremony that we need to do with them to get them ready for this component to take them as is. The nice part about this is it does provide a separation of concerns, we're separating all of our presentational component does not have to change at all.

[00:05:08]
Other than the example of dispatch going and we haven't touched a presentation component other swap in the menu item container. All right, that should do the trick but I don't believe anything. Tofu salad, it's gonna cost $13 and then it's gonna cost, whoop, it's not updating just yet.

[00:05:34]
Actually let me refresh, because again we changed the stuff with the actions. Let's go ahead, yeah, it does work so now I can update its value, so to show you, I couldn't do this before which is nice. Why did I have to refresh? Because again, I changed somethings that weren't connected to react which meant the hot mojo reloading didn't pick up on them.

[00:05:51]
So a quick refresh will get it working in those cases.