Computing Data Solution

[00:00:00]
>> One of the things that we noticed is that in the original implementation, I made sure to divide that whole number of 20 by 100, just multiplying your price by 20 makes you an incredibly generous tipper. So we're gonna fix that slight bug. Luckily, the biggest bugs so far have been my spelling and my math.

[00:00:19]
So that's really encouraging. So we've got that in place. If you think about the menu item component, we have a way to get the subtitle of all of the items. But we don't have a way to get one item out or also the ability to get the subtotal or the total price of just one item, so we can do that as well.

[00:00:42]
And again, it's just a little bit more of the same just to kinda get some muscle memory in place so we can select an item which is gonna take our state, and it's gonna return just state really, I guess which one that we're looking for. So in our case, it's gonna be state.

[00:01:00]
We'll pass in the props coz we'll get that from own props from match dispatch to props. So we'll go ahead and we'll say return state.items.find. And go through all of them and find me the one where the item.uuid equals the props.uuid, right. And so we can pass that in, this will get us a particular item.

[00:01:31]
And then, based on that, based on the ability to find an item, we wanna go ahead and look for the select item total. Actually, this is going to be a selector. Create selector, we'll do select item, right, which we just made and that is going to get the item that we found.

[00:02:02]
And then from there we wanna do the item.price times item.quantity. All right, so we've got all of that in place, now we have our singular menu item. So really what we'd like to do there is go and figure out how to get a total and pass it in as a prop that I was looking for.

[00:02:28]
So right now just has a map dispatch to props, but like yeah, we're trying to make a new state, right. We want to take the fact that we know this item has a subtotal and we know that this item has a, it has a price and a quantity, and we want to derive that and pass it in as the total, instead of doing it in the component itself.

[00:02:50]
So here we're gonna say, come match dispatched props. And that's gonna get a copy of the state. And all we really need to do here is we need to return an object that has a total. And this is going to be select item total, it will take the state, I guess, the props as well, so you can pull off the quantity and the price.

[00:03:23]
We'll have that in place. Total. Why are you angry? Called a map state to props. Well, we want to call it map state to props and then we'll pass it in as a first argument. And let's see what we got. All right, we have it all wired up.

[00:03:48]
Right, you'll notice that we didn't have to find the given item coz select item total relies on select item. So it will go ahead and use that selection find right item it will get the total for us just based on passing it the state, and it will only run if it absolutely needs to.

[00:04:04]
So now you don't have to like performance tweak everything insight. You basically these are the rules in which I need to compute new data. Should be underlying pieces change, you'll get new data. If they have not changed, you can call this like a whole bunch of times, it's only going to run when the state or the props change, right?

[00:04:25]
So you'll get it, you'll get, you're basically automatically getting like the bare minimum that you need to do in order to drive this data to hopefully save particularly on. There's a difference between a particularly expensive computation or a cheap one just so many times. This will allow you to save for that.