1 00:00:02,240 --> 00:00:09,390 Let's work on the total price which right now, we still store in the burger builder state but there 2 00:00:09,410 --> 00:00:11,720 of course, we don't really update it, 3 00:00:11,780 --> 00:00:14,080 therefore it's always four. 4 00:00:14,330 --> 00:00:18,290 We already set it up in the reducer but we're not changing it here. 5 00:00:18,380 --> 00:00:25,100 Now the price changes whenever we add or remove ingredients, now there are two routes you can take, 6 00:00:25,490 --> 00:00:30,440 you can define a new action type for the price change, 7 00:00:30,440 --> 00:00:38,180 you could call it update ingredients or update price. And then, we could also of course bind this in 8 00:00:38,180 --> 00:00:45,350 the burger builder at the bottom to a property which we execute to dispatch this action and this action 9 00:00:45,350 --> 00:00:53,510 would then simply be called by the reducer and then recalculate the price. This would be fine and it 10 00:00:53,510 --> 00:01:02,150 would ensure that every action leads to just one piece of your state being manipulated in your reducer. 11 00:01:02,600 --> 00:01:09,350 On the other hand, we already got the only two action types which change our price, add ingredient and 12 00:01:09,350 --> 00:01:10,520 remove ingredient, 13 00:01:11,120 --> 00:01:18,000 so it would also to be fair to not only update ingredients here but also update the price. 14 00:01:18,060 --> 00:01:20,790 And again it's totally up to you which route you take, 15 00:01:20,820 --> 00:01:26,730 do you only want to change one part of your state per case, then you need to extra action, 16 00:01:26,730 --> 00:01:32,220 are you fine with manipulating multiple pieces of your state? Well then you can take one action, I'll 17 00:01:32,280 --> 00:01:33,860 go with the latter route here. 18 00:01:34,050 --> 00:01:36,540 So here we already update ingredients, 19 00:01:36,540 --> 00:01:42,870 now we also want to recalculate the price. So I'll also overwrite total price here 20 00:01:42,900 --> 00:01:49,330 when returning a new state, again we first of all copied all the old state and all the properties, 21 00:01:49,350 --> 00:01:55,110 now I'm not only overwriting ingredients but also the old price and they are of course, the value 22 00:01:55,110 --> 00:02:01,070 now is the state or the total price of the old state, I should say, 23 00:02:01,210 --> 00:02:08,350 so the state we're receiving when this reducer is called and now adjust it by the price for the ingredient which 24 00:02:08,350 --> 00:02:09,670 was added. 25 00:02:10,150 --> 00:02:14,080 Now we get this price map for this in the burger builder, here 26 00:02:14,080 --> 00:02:19,390 we got the ingredient prices, I'll copy that, or I'll cut it 27 00:02:19,390 --> 00:02:23,740 actually, I don't need it here anymore and move it into my reducer. 28 00:02:24,040 --> 00:02:31,780 So there I will now not only define my initial state but also my ingredient prices, we could define this anywhere 29 00:02:31,780 --> 00:02:36,000 in our application, we could fetch this from a database or from a server, though 30 00:02:36,040 --> 00:02:40,850 right now we couldn't because we don't know how to handle asynchronous code but in the future, we will 31 00:02:41,130 --> 00:02:43,680 but I'll simply hardcode it in there. 32 00:02:43,930 --> 00:02:49,550 And there again, we've got the same ingredient property names as we use everywhere in our application 33 00:02:49,690 --> 00:02:59,020 so now we can simply set the total price equal to the old total price plus and now access the ingredient prices 34 00:02:59,290 --> 00:03:04,110 for the ingredient we get here in our action, the ingredient name. 35 00:03:04,450 --> 00:03:12,100 This will for example access salad here and give us .5 which is then added to the old price and 36 00:03:12,100 --> 00:03:22,380 set as the new price here. This is how we can manipulate and update the price for adding ingredients, for removing 37 00:03:22,380 --> 00:03:22,860 ingredients, 38 00:03:22,860 --> 00:03:28,610 I'll copy that code and also add it to the remove ingredient case, to the state update, 39 00:03:28,620 --> 00:03:33,670 there of course we deduct the price of the ingredient that we removed. 40 00:03:33,930 --> 00:03:40,290 With that if we now save everything, we have to go back to the burger builder because we get some errors 41 00:03:40,290 --> 00:03:47,010 down there that we still refer to that old code for updating the price, ingredient prices. 42 00:03:47,340 --> 00:03:49,630 We do this in the ADD_INGREDIENT handler 43 00:03:49,830 --> 00:03:57,480 and actually, what we can do now is we can get rid of the add and remove ingredient handler methods here, 44 00:03:57,540 --> 00:03:58,860 cleaning up this file 45 00:03:58,860 --> 00:04:06,470 a lot of course. Now with that, if we save that file, save all the files and go back to the application, 46 00:04:06,630 --> 00:04:08,650 we should see that if we now, 47 00:04:09,010 --> 00:04:12,420 let me shrink this little bit to bring it closer together, 48 00:04:12,420 --> 00:04:18,740 if we now update salad and bacon, the price doesn't change, 49 00:04:19,020 --> 00:04:28,100 why? Well because we now do update it in our global state through the reducer 50 00:04:28,440 --> 00:04:36,360 but of course in the burger builder container at the bottom, we still only fetch the ingredients from our 51 00:04:36,600 --> 00:04:41,740 global state, where we simply have to make sure to also fetch the price here. 52 00:04:41,790 --> 00:04:48,000 So from state and there, the property was named total price. With that, 53 00:04:48,020 --> 00:04:54,840 we can use price on the props in the burger builder container and we can also remove the total price 54 00:04:54,890 --> 00:04:59,910 from the state there because we're not managing it through the state in the burger builder anymore. 55 00:05:00,440 --> 00:05:08,930 So now let's simply use the total price there and everywhere in this part where we use the old total 56 00:05:08,930 --> 00:05:10,960 price on the state, like here, 57 00:05:11,210 --> 00:05:15,500 we should replace it, though for the purchaseContinueHandler, 58 00:05:15,740 --> 00:05:19,510 I won't for now because I'll soon get rid of all this code anyways. 59 00:05:19,610 --> 00:05:24,060 So let's go to the render method and let's make sure to update the price there, 60 00:05:24,170 --> 00:05:28,010 here I want to update it on our build controls where we pass it, 61 00:05:28,100 --> 00:05:36,680 we simply now pass this.props.price and in the orderSummary, where we also use the price, this should also 62 00:05:36,700 --> 00:05:44,430 be this.props.price, like this, this should be all the places where we use the price. 63 00:05:44,420 --> 00:05:51,670 Let's now save this component, go back to the application and start adding ingredients and you see that 64 00:05:51,670 --> 00:05:56,180 we are updating the price now, of course in both directions. 65 00:05:56,320 --> 00:06:01,890 Now one thing we still don't see is that the order now button won't get enabled, 66 00:06:01,900 --> 00:06:03,950 so this is what we'll work on next.