1 00:00:01,140 --> 00:00:03,960 ‫So, let's now model and implement 2 00:00:03,960 --> 00:00:08,070 ‫the more complex cart state and by doing this, 3 00:00:08,070 --> 00:00:11,670 ‫we will then be able to implement or to finish 4 00:00:11,670 --> 00:00:15,513 ‫all of these features over the next few lectures. 5 00:00:17,220 --> 00:00:21,870 ‫So, let's start by creating a new Redux state slice 6 00:00:21,870 --> 00:00:25,227 ‫right here in the Cart Features folder. 7 00:00:25,227 --> 00:00:29,160 ‫And so this is the beauty of having this features folder 8 00:00:29,160 --> 00:00:31,680 ‫in the first place because it allows us 9 00:00:31,680 --> 00:00:36,680 ‫to nicely co-locate all of these files that are necessary 10 00:00:37,320 --> 00:00:41,790 ‫to implement one of the features all in one folder. 11 00:00:41,790 --> 00:00:44,700 ‫And so, again, we then could close 12 00:00:44,700 --> 00:00:46,740 ‫all of these other folders here 13 00:00:46,740 --> 00:00:49,920 ‫and then while we are implementing a certain feature, 14 00:00:49,920 --> 00:00:53,700 ‫all we have to worry about is that particular folder. 15 00:00:53,700 --> 00:00:56,433 ‫So no jumping around all the time. 16 00:00:57,720 --> 00:01:02,703 ‫But anyway, let's again start with the initial state. 17 00:01:04,890 --> 00:01:07,920 ‫And then all we will need in the state 18 00:01:07,920 --> 00:01:10,743 ‫is actually one cart array. 19 00:01:11,970 --> 00:01:16,140 ‫So this is where we will store all the items in the carts. 20 00:01:16,140 --> 00:01:19,590 ‫And actually this is a property, of course. 21 00:01:19,590 --> 00:01:22,830 ‫So, many of the state management principles 22 00:01:22,830 --> 00:01:25,410 ‫that we have learned throughout this course 23 00:01:25,410 --> 00:01:29,430 ‫still apply here to modeling state in Redux. 24 00:01:29,430 --> 00:01:32,520 ‫For example, the fact that whenever possible, 25 00:01:32,520 --> 00:01:35,070 ‫we should always derive state. 26 00:01:35,070 --> 00:01:38,250 ‫And so that's the reason why we are not storing, 27 00:01:38,250 --> 00:01:42,180 ‫for example, the total cart price here. 28 00:01:42,180 --> 00:01:46,980 ‫So we could store the total price here also 29 00:01:46,980 --> 00:01:51,980 ‫and maybe even the number of items, right? 30 00:01:52,380 --> 00:01:54,840 ‫However, we can easily derive these 31 00:01:54,840 --> 00:01:56,850 ‫from the cart array itself 32 00:01:56,850 --> 00:01:59,580 ‫and so then we don't need to create these 33 00:01:59,580 --> 00:02:02,520 ‫because that would just create more problems 34 00:02:02,520 --> 00:02:05,340 ‫because then we would have to keep them in sync 35 00:02:05,340 --> 00:02:07,143 ‫while we are updating the cart. 36 00:02:08,490 --> 00:02:12,093 ‫All right, and so this really is all that we will need. 37 00:02:14,460 --> 00:02:16,770 ‫So, let's create our cartSlice here 38 00:02:16,770 --> 00:02:21,383 ‫again by calling create slice. 39 00:02:23,490 --> 00:02:26,493 ‫The name here is of course Cart, 40 00:02:27,450 --> 00:02:30,573 ‫the initial state, and then our reducers. 41 00:02:32,940 --> 00:02:37,940 ‫So let's think exactly what operations we need for the cart. 42 00:02:38,010 --> 00:02:39,990 ‫So, first of all, we need to be able 43 00:02:39,990 --> 00:02:44,190 ‫to add a new item to the cart, right? 44 00:02:44,190 --> 00:02:47,160 ‫So, that's our first reducer here. 45 00:02:47,160 --> 00:02:51,033 ‫So, as always, that takes the state and the action. 46 00:02:51,990 --> 00:02:54,033 ‫And now let's do a couple of more. 47 00:02:54,930 --> 00:02:57,330 ‫So let's just duplicate this here a few times 48 00:02:57,330 --> 00:03:01,110 ‫and then let's think about what else we need. 49 00:03:01,110 --> 00:03:04,470 ‫So we need to add an item, we need to be able 50 00:03:04,470 --> 00:03:06,423 ‫to also delete an item, 51 00:03:08,700 --> 00:03:12,660 ‫and maybe we might want to update an item. 52 00:03:12,660 --> 00:03:15,600 ‫However, we don't really want to go that way. 53 00:03:15,600 --> 00:03:19,590 ‫So we don't want to be able to update one entire item. 54 00:03:19,590 --> 00:03:22,230 ‫The only thing that we will want to update 55 00:03:22,230 --> 00:03:25,020 ‫about the item is the quantity. 56 00:03:25,020 --> 00:03:27,660 ‫So according to the application requirements, 57 00:03:27,660 --> 00:03:32,520 ‫the users should be able to add multiple pizzas to the cart. 58 00:03:32,520 --> 00:03:35,970 ‫And so, for example, they might want to add five pizzas 59 00:03:35,970 --> 00:03:38,340 ‫of a certain type and so to do that, 60 00:03:38,340 --> 00:03:41,730 ‫they will then click some button that will always increase 61 00:03:41,730 --> 00:03:44,790 ‫the item quantity, which I'm sure you have seen 62 00:03:44,790 --> 00:03:48,090 ‫in many online shops around the web. 63 00:03:48,090 --> 00:03:53,073 ‫And so let's simply implement one reducer for this activity. 64 00:03:53,940 --> 00:03:58,940 ‫So for increasing, so increase the item quantity 65 00:04:01,230 --> 00:04:03,960 ‫and then also one for decreasing. 66 00:04:03,960 --> 00:04:07,743 ‫So decrease item quantity. 67 00:04:11,047 --> 00:04:14,640 ‫And then finally, right in our cart page, 68 00:04:14,640 --> 00:04:18,120 ‫we also have this button here to clear the cart. 69 00:04:18,120 --> 00:04:21,300 ‫And so we need then also a reducer 70 00:04:21,300 --> 00:04:23,163 ‫and an action creator for that. 71 00:04:24,630 --> 00:04:27,150 ‫So clear cart and now, let's implement 72 00:04:27,150 --> 00:04:29,700 ‫the code here for all of them. 73 00:04:29,700 --> 00:04:31,920 ‫And to make this a little bit easier, 74 00:04:31,920 --> 00:04:35,073 ‫let's add a fake pizza right here. 75 00:04:35,970 --> 00:04:37,770 ‫So let's comment this one out here 76 00:04:37,770 --> 00:04:40,170 ‫and then for development purposes, 77 00:04:40,170 --> 00:04:45,170 ‫we will already add one pizza here to this cart array. 78 00:04:45,450 --> 00:04:50,283 ‫So one object which will always have the pizza ID, 79 00:04:51,570 --> 00:04:54,330 ‫set that to 12, then the name, 80 00:04:54,330 --> 00:04:57,183 ‫this one is the Mediterranean, 81 00:05:00,000 --> 00:05:05,000 ‫then we also have the quantity, which is two, 82 00:05:06,450 --> 00:05:10,650 ‫the unit price of 16 and then, 83 00:05:10,650 --> 00:05:13,410 ‫even though we could also always compute it, 84 00:05:13,410 --> 00:05:17,760 ‫let's also include the total price. 85 00:05:17,760 --> 00:05:21,240 ‫So that's basically just the quantity times the unit price, 86 00:05:21,240 --> 00:05:23,460 ‫but let's just edit here anyway. 87 00:05:23,460 --> 00:05:26,940 ‫So even though this is technically a derived state again, 88 00:05:26,940 --> 00:05:30,690 ‫it's nice to not always have to compute it on the fly. 89 00:05:30,690 --> 00:05:33,255 ‫So you need to decide these kinds of things 90 00:05:33,255 --> 00:05:35,010 ‫really case by case. 91 00:05:35,010 --> 00:05:38,580 ‫And this is really just a small thing, so let's, 92 00:05:38,580 --> 00:05:41,430 ‫as I was just saying, add it there. 93 00:05:41,430 --> 00:05:45,990 ‫And by the way, the reason why this is the shape of the data 94 00:05:45,990 --> 00:05:49,440 ‫is because what we get from the API in the menu 95 00:05:49,440 --> 00:05:51,393 ‫is very similar to this. 96 00:05:52,320 --> 00:05:54,123 ‫So let's actually inspect that. 97 00:05:57,403 --> 00:06:00,150 ‫So let's do that right here in the network tab. 98 00:06:00,150 --> 00:06:02,250 ‫So this is a really helpful tab 99 00:06:02,250 --> 00:06:05,370 ‫and so let's use it here from time to time. 100 00:06:05,370 --> 00:06:09,660 ‫And so when we go to the menu, this will then show us 101 00:06:09,660 --> 00:06:12,183 ‫exactly the data that has been received. 102 00:06:14,220 --> 00:06:17,370 ‫So let's filter here by fetch requests. 103 00:06:17,370 --> 00:06:19,893 ‫Then here, we need a bit more space. 104 00:06:21,840 --> 00:06:22,950 ‫And so here it is. 105 00:06:22,950 --> 00:06:26,880 ‫So as we click here, we can then preview the response. 106 00:06:26,880 --> 00:06:28,863 ‫And so here we have the data. 107 00:06:30,000 --> 00:06:33,390 ‫So we have the ID, we have the name, 108 00:06:33,390 --> 00:06:35,400 ‫and we have the unit price. 109 00:06:35,400 --> 00:06:38,550 ‫Of course, we don't have the quantity and the total price 110 00:06:38,550 --> 00:06:42,003 ‫because that just doesn't make sense here in the menu. 111 00:06:43,620 --> 00:06:46,230 ‫Right? But we do actually have that data 112 00:06:46,230 --> 00:06:50,340 ‫when we fetch one single order, 113 00:06:50,340 --> 00:06:52,560 ‫but let's not do that right now. 114 00:06:52,560 --> 00:06:55,800 ‫So this is just the shape that the data has. 115 00:06:55,800 --> 00:06:59,700 ‫And if you are really interested in modeling this data, 116 00:06:59,700 --> 00:07:03,060 ‫so basically deciding what exactly all the data 117 00:07:03,060 --> 00:07:05,220 ‫in our application should look like, 118 00:07:05,220 --> 00:07:09,060 ‫we will do something like that in our next application 119 00:07:09,060 --> 00:07:12,750 ‫because there we will even create the backend ourselves. 120 00:07:12,750 --> 00:07:15,390 ‫So we will create all the data from scratch 121 00:07:15,390 --> 00:07:19,470 ‫and by then, we will really learn about how to think 122 00:07:19,470 --> 00:07:22,320 ‫about what data we really need. 123 00:07:22,320 --> 00:07:27,320 ‫But anyway, having now this fake cart right here, 124 00:07:27,330 --> 00:07:30,630 ‫it's a bit easier to implement these different reducers, 125 00:07:30,630 --> 00:07:33,153 ‫at least some of those right there. 126 00:07:34,020 --> 00:07:37,890 ‫So, whenever a new item should be added to the cart, 127 00:07:37,890 --> 00:07:40,770 ‫how do we do that with our code? 128 00:07:40,770 --> 00:07:44,820 ‫Well, remember that here we can actually mutate the state. 129 00:07:44,820 --> 00:07:49,627 ‫And so we can just say state.cart.push 130 00:07:51,750 --> 00:07:54,930 ‫and then push the newly received item in there, 131 00:07:54,930 --> 00:07:59,883 ‫which in this case is going to be action.payload. 132 00:08:00,840 --> 00:08:02,590 ‫So let's just write that down here. 133 00:08:05,594 --> 00:08:08,190 ‫So the payload here needs to be equal 134 00:08:08,190 --> 00:08:11,880 ‫to a new item, basically. 135 00:08:11,880 --> 00:08:16,080 ‫So just so we know what exactly that payload always will be. 136 00:08:16,080 --> 00:08:18,870 ‫And remember that the payload is going to be 137 00:08:18,870 --> 00:08:22,200 ‫simply what we pass into the action creator. 138 00:08:22,200 --> 00:08:24,093 ‫So when we dispatch an action. 139 00:08:25,530 --> 00:08:30,480 ‫All right, next up, when we delete an item, 140 00:08:30,480 --> 00:08:33,030 ‫here the payload that we will need 141 00:08:33,030 --> 00:08:37,650 ‫will be the ID of the item, right? 142 00:08:37,650 --> 00:08:42,000 ‫So basically the pizza ID because that's the name 143 00:08:42,000 --> 00:08:44,100 ‫that they have here in the cart. 144 00:08:44,100 --> 00:08:47,610 ‫So when we delete, we will try to find the item 145 00:08:47,610 --> 00:08:50,433 ‫with that ID and then delete it. 146 00:08:51,600 --> 00:08:54,180 ‫Now, since here we are actually allowed 147 00:08:54,180 --> 00:08:58,680 ‫to directly mutate the state, we could use the splice method 148 00:08:58,680 --> 00:09:01,710 ‫and then directly mutate the array. 149 00:09:01,710 --> 00:09:04,950 ‫However, I find it a lot easier to still use 150 00:09:04,950 --> 00:09:08,220 ‫the filter method like we have been doing all along 151 00:09:08,220 --> 00:09:12,030 ‫because it actually requires a lot less code. 152 00:09:12,030 --> 00:09:17,030 ‫So what we can do here is to do state.cart 153 00:09:17,460 --> 00:09:22,460 ‫and then set it to state.cart and then filter. 154 00:09:24,000 --> 00:09:26,073 ‫So let's call each one an item. 155 00:09:26,970 --> 00:09:31,970 ‫And then whenever the pizza ID is different 156 00:09:34,230 --> 00:09:38,280 ‫from the one that we passed in, so action.payload, 157 00:09:38,280 --> 00:09:42,603 ‫it will still be part of the new cart. 158 00:09:44,340 --> 00:09:47,190 ‫So of the updated cart, right? 159 00:09:47,190 --> 00:09:50,940 ‫But in case that the action payload is equal 160 00:09:50,940 --> 00:09:54,180 ‫to the pizza ID, so for example, number 12, 161 00:09:54,180 --> 00:09:57,720 ‫then that item would be removed from the cart. 162 00:09:57,720 --> 00:10:01,500 ‫So this filter is exactly what we have been doing all along 163 00:10:01,500 --> 00:10:05,970 ‫with the difference that now we assign this new array here 164 00:10:05,970 --> 00:10:08,073 ‫then to state.cart. 165 00:10:11,280 --> 00:10:14,490 ‫All right, next up we want to increase 166 00:10:14,490 --> 00:10:17,400 ‫the quantity of a certain item. 167 00:10:17,400 --> 00:10:22,020 ‫So the way we can do that is to first find that item 168 00:10:22,020 --> 00:10:25,143 ‫and then we can mutate the quantity on that item. 169 00:10:27,330 --> 00:10:30,960 ‫So that's state.cart.find. 170 00:10:34,080 --> 00:10:34,913 ‫And then 171 00:10:37,560 --> 00:10:42,460 ‫we are again looking for or we are actually passing in 172 00:10:45,780 --> 00:10:48,783 ‫a pizza ID as the action's payload. 173 00:10:50,040 --> 00:10:52,383 ‫So just like we have here. 174 00:10:56,340 --> 00:10:59,850 ‫So with this, we selected our item basically 175 00:10:59,850 --> 00:11:02,190 ‫and now we can just mutate it. 176 00:11:02,190 --> 00:11:06,390 ‫So we can do itemquantity++. 177 00:11:06,390 --> 00:11:10,470 ‫And then from here on, this value has already been updated. 178 00:11:10,470 --> 00:11:11,790 ‫And so then we can calculate 179 00:11:11,790 --> 00:11:16,590 ‫item.totalprice from that value. 180 00:11:16,590 --> 00:11:20,080 ‫So item.quantity 181 00:11:21,210 --> 00:11:24,927 ‫times item.unitprice. 182 00:11:26,880 --> 00:11:31,110 ‫So since we have both the quantity and the total price, 183 00:11:31,110 --> 00:11:34,380 ‫which depends on the quantity, we need to not only 184 00:11:34,380 --> 00:11:37,950 ‫update the quantity, but also the total price. 185 00:11:37,950 --> 00:11:40,830 ‫So basically keeping them in sync here. 186 00:11:40,830 --> 00:11:42,840 ‫But since we are using reducers, 187 00:11:42,840 --> 00:11:46,230 ‫we have all the state updating logic in one place 188 00:11:46,230 --> 00:11:49,024 ‫and so then that's pretty easy to do. 189 00:11:49,024 --> 00:11:54,024 ‫So to decrease the quantity, we will just copy and paste 190 00:11:54,060 --> 00:11:59,060 ‫this code here and just need to change this line right there 191 00:11:59,250 --> 00:12:04,140 ‫and then finally here, we need to clear the cart 192 00:12:04,140 --> 00:12:08,250 ‫and clearing the cart is as easy as setting the cart 193 00:12:08,250 --> 00:12:11,550 ‫back to the initial state or in other words, 194 00:12:11,550 --> 00:12:15,333 ‫doing state.cart= this. 195 00:12:16,320 --> 00:12:19,893 ‫And so here we actually don't even need the action. 196 00:12:21,510 --> 00:12:24,780 ‫All right, so these are our four reducers 197 00:12:24,780 --> 00:12:28,800 ‫and so let's now grab the five action creators. 198 00:12:28,800 --> 00:12:33,060 ‫So five reducers and therefore, five action creators 199 00:12:33,060 --> 00:12:36,933 ‫from cartSlice.actions. 200 00:12:37,800 --> 00:12:39,000 ‫So we have our actions 201 00:12:39,000 --> 00:12:42,060 ‫and then we can immediately destructure them. 202 00:12:42,060 --> 00:12:42,893 ‫So addItem, 203 00:12:45,228 --> 00:12:46,145 ‫deleteItem, 204 00:12:47,790 --> 00:12:49,293 ‫increase quantity, 205 00:12:53,190 --> 00:12:58,190 ‫decrease quantity, and clear the cart. 206 00:12:59,610 --> 00:13:02,073 ‫And then we export all of those. 207 00:13:05,400 --> 00:13:08,370 ‫And here we go, we forgot the assignment, 208 00:13:08,370 --> 00:13:13,370 ‫and finally, let's also default export cartSlice.reducer. 209 00:13:16,980 --> 00:13:21,300 ‫Great. So this is what our cart slice looks like 210 00:13:21,300 --> 00:13:24,420 ‫and we will come back to this as we actually use it 211 00:13:24,420 --> 00:13:28,350 ‫because we will even need to change something here later. 212 00:13:28,350 --> 00:13:32,670 ‫But for now, let's come to our store.js because, of course, 213 00:13:32,670 --> 00:13:37,627 ‫we also need to now connect this new slice to our store. 214 00:13:40,740 --> 00:13:45,740 ‫So cartReducer from features cart, and then cartSlice 215 00:13:49,380 --> 00:13:54,380 ‫and then here, cart and cartSlice again. 216 00:13:55,590 --> 00:13:57,180 ‫Or actually that's not true. 217 00:13:57,180 --> 00:13:58,503 ‫It's a cartReducer. 218 00:13:59,670 --> 00:14:01,743 ‫So here, let's remove that. 219 00:14:03,090 --> 00:14:04,323 ‫And there we go. 220 00:14:08,670 --> 00:14:11,400 ‫Nice. So we can close this up. 221 00:14:11,400 --> 00:14:14,220 ‫And so in the next lecture, we can start adding 222 00:14:14,220 --> 00:14:17,763 ‫some of these pizza items here to the user's cart.