1 00:00:01,140 --> 00:00:03,180 ‫Let's now dive a little bit deeper 2 00:00:03,180 --> 00:00:06,240 ‫into the topic of Redux Selectors 3 00:00:06,240 --> 00:00:09,333 ‫by building the current overview component. 4 00:00:10,890 --> 00:00:14,400 ‫So let's open up that component right here. 5 00:00:14,400 --> 00:00:17,070 ‫And so basically what we want to do now 6 00:00:17,070 --> 00:00:21,090 ‫is to select the current state, and then from there, 7 00:00:21,090 --> 00:00:24,750 ‫compute the number of pizzas that are in the cart 8 00:00:24,750 --> 00:00:27,243 ‫and the total price as well. 9 00:00:29,520 --> 00:00:32,940 ‫So to read some state from the Redux store, 10 00:00:32,940 --> 00:00:37,533 ‫remember how we use the use selector hook. 11 00:00:41,700 --> 00:00:46,260 ‫Then here, let's just call the result of this X for now. 12 00:00:46,260 --> 00:00:48,210 ‫And so remember that in here, 13 00:00:48,210 --> 00:00:51,210 ‫we pass a so-called selector function. 14 00:00:51,210 --> 00:00:55,320 ‫That's why this hook is actually called a selector. 15 00:00:55,320 --> 00:00:57,540 ‫And so this time, let's actually write 16 00:00:57,540 --> 00:01:00,603 ‫a little bit of a more complex selector. 17 00:01:01,950 --> 00:01:06,950 ‫So as always, here, this function receives the state. 18 00:01:07,050 --> 00:01:12,050 ‫And then let's start by reading state.cart.cart. 19 00:01:14,130 --> 00:01:16,950 ‫So the reason for this double cart 20 00:01:16,950 --> 00:01:20,490 ‫is that, or state itself is called cart. 21 00:01:20,490 --> 00:01:23,643 ‫And then we have this cart property in there. 22 00:01:26,100 --> 00:01:28,680 ‫And here, we actually want right there. 23 00:01:28,680 --> 00:01:31,290 ‫And here we actually want to keep going 24 00:01:31,290 --> 00:01:34,410 ‫and immediately calculate the number of pizzas 25 00:01:34,410 --> 00:01:36,333 ‫that are currently in the cart. 26 00:01:37,290 --> 00:01:41,100 ‫So to do that, we can use the reduce method 27 00:01:41,100 --> 00:01:44,010 ‫which I hope you are familiar with. 28 00:01:44,010 --> 00:01:48,660 ‫So this gets access to the current accumulator value 29 00:01:48,660 --> 00:01:50,280 ‫which will just be the sum, 30 00:01:50,280 --> 00:01:53,220 ‫and then also the current element, 31 00:01:53,220 --> 00:01:54,960 ‫current element of the array 32 00:01:54,960 --> 00:01:57,420 ‫which we could also call item. 33 00:01:57,420 --> 00:01:59,403 ‫So let's do that, actually. 34 00:02:00,900 --> 00:02:02,520 ‫And so then in each iteration, 35 00:02:02,520 --> 00:02:05,370 ‫we will add to the current sum, 36 00:02:05,370 --> 00:02:08,973 ‫which starts at zero here as the second argument. 37 00:02:09,870 --> 00:02:12,360 ‫So to that sum, that starts at zero, 38 00:02:12,360 --> 00:02:13,560 ‫in each iteration, 39 00:02:13,560 --> 00:02:18,560 ‫we will add the item.quantity, 40 00:02:20,790 --> 00:02:22,560 ‫just like this. 41 00:02:22,560 --> 00:02:25,590 ‫And so then let's call this one here, actually, 42 00:02:25,590 --> 00:02:30,573 ‫the total cart quantity. 43 00:02:31,620 --> 00:02:34,260 ‫So Redux actually recommends 44 00:02:34,260 --> 00:02:37,080 ‫that we do this kind of data manipulation 45 00:02:37,080 --> 00:02:39,060 ‫that we just did here. 46 00:02:39,060 --> 00:02:40,650 ‫So selecting the cart, 47 00:02:40,650 --> 00:02:43,980 ‫and then immediately calculating the value that we want 48 00:02:43,980 --> 00:02:46,530 ‫right inside the selector function 49 00:02:46,530 --> 00:02:49,830 ‫and not out here in a component. 50 00:02:49,830 --> 00:02:52,770 ‫So doing it like this is a good practice 51 00:02:52,770 --> 00:02:55,260 ‫whenever we are using Redux. 52 00:02:55,260 --> 00:02:56,970 ‫And we will make this even better, 53 00:02:56,970 --> 00:02:59,883 ‫but for now, let's see if this actually worked. 54 00:03:01,110 --> 00:03:04,080 ‫So total cart quantity, 55 00:03:04,080 --> 00:03:06,933 ‫and indeed, we have now four pizzas. 56 00:03:07,860 --> 00:03:09,720 ‫So let's reload this. 57 00:03:09,720 --> 00:03:12,600 ‫And we already start with two. 58 00:03:12,600 --> 00:03:14,820 ‫So why do we have two? 59 00:03:14,820 --> 00:03:18,390 ‫Well, it's because here in the default cart, 60 00:03:18,390 --> 00:03:21,660 ‫we already have these two Mediterranean, 61 00:03:21,660 --> 00:03:24,480 ‫and so if we then add another one, 62 00:03:24,480 --> 00:03:27,420 ‫let's see, then we have three. 63 00:03:27,420 --> 00:03:28,920 ‫Beautiful. 64 00:03:28,920 --> 00:03:30,720 ‫Let's add another one. 65 00:03:30,720 --> 00:03:35,430 ‫And we could right now actually add this one again. 66 00:03:35,430 --> 00:03:37,050 ‫So then we would have five, 67 00:03:37,050 --> 00:03:41,040 ‫even though later on, this is not what we will want. 68 00:03:41,040 --> 00:03:42,303 ‫Because what this did, 69 00:03:43,380 --> 00:03:45,090 ‫if we check out the state, 70 00:03:45,090 --> 00:03:46,060 ‫was to add 71 00:03:47,520 --> 00:03:50,610 ‫basically this pizza here twice. 72 00:03:50,610 --> 00:03:54,660 ‫So the Diavola is now here twice with the quantity one 73 00:03:54,660 --> 00:03:55,830 ‫while in the future, 74 00:03:55,830 --> 00:03:59,163 ‫all we want is then to decrease the quantity here. 75 00:04:00,090 --> 00:04:02,880 ‫But again, let's leave that for later. 76 00:04:02,880 --> 00:04:06,690 ‫What matters is that this here is already working. 77 00:04:06,690 --> 00:04:10,470 ‫And so this selector function is doing its job. 78 00:04:10,470 --> 00:04:15,470 ‫However, Redux, again, recommends to take this function here 79 00:04:16,080 --> 00:04:21,030 ‫and actually place it right into the cart slice file. 80 00:04:21,030 --> 00:04:22,350 ‫So let's do that. 81 00:04:22,350 --> 00:04:23,823 ‫Let's cut it from here. 82 00:04:25,500 --> 00:04:27,840 ‫So then of course, we get an error. 83 00:04:27,840 --> 00:04:30,660 ‫And so let's place it right here. 84 00:04:30,660 --> 00:04:32,403 ‫So let's export then. 85 00:04:33,405 --> 00:04:35,155 ‫And then we need to give it a name. 86 00:04:36,120 --> 00:04:41,120 ‫So const get total cart price. 87 00:04:42,780 --> 00:04:44,760 ‫So here we are using an arrow function 88 00:04:44,760 --> 00:04:47,493 ‫because this is just a simple one liner. 89 00:04:48,540 --> 00:04:52,740 ‫So again, this is now a Redux selector function. 90 00:04:52,740 --> 00:04:55,890 ‫And the recommendation and the standard 91 00:04:55,890 --> 00:04:59,370 ‫is that these functions start with the get keyword 92 00:04:59,370 --> 00:05:02,520 ‫and that we have them all in the central place 93 00:05:02,520 --> 00:05:04,500 ‫in the cart slice file 94 00:05:04,500 --> 00:05:07,710 ‫because we will actually need this operation later on 95 00:05:07,710 --> 00:05:09,150 ‫in another component. 96 00:05:09,150 --> 00:05:11,520 ‫And so then all we will need to do 97 00:05:11,520 --> 00:05:14,763 ‫is to take this function here and just reuse it. 98 00:05:16,500 --> 00:05:17,463 ‫So here, 99 00:05:18,840 --> 00:05:21,870 ‫or actually here, let's now then import this. 100 00:05:21,870 --> 00:05:26,013 ‫So get total cart price. 101 00:05:28,800 --> 00:05:30,990 ‫Let's reload here 102 00:05:30,990 --> 00:05:33,330 ‫and let's check. 103 00:05:33,330 --> 00:05:35,970 ‫And indeed, it works. 104 00:05:35,970 --> 00:05:37,980 ‫Great, so let's keep going 105 00:05:37,980 --> 00:05:41,583 ‫and let's do something similar for the total price. 106 00:05:42,840 --> 00:05:45,210 ‫So coming here into our slice, 107 00:05:45,210 --> 00:05:48,030 ‫let's write another selector function. 108 00:05:48,030 --> 00:05:50,520 ‫I will just actually duplicate this here, 109 00:05:50,520 --> 00:05:52,923 ‫I'm just feeling a little bit lazy. 110 00:05:53,910 --> 00:05:55,890 ‫Just missing this part. 111 00:05:55,890 --> 00:05:58,530 ‫So get total cart. 112 00:05:58,530 --> 00:06:00,570 ‫And actually this one, 113 00:06:00,570 --> 00:06:03,060 ‫here's the one that should be called price 114 00:06:03,060 --> 00:06:05,433 ‫and this one was actually the quantity. 115 00:06:08,130 --> 00:06:09,780 ‫So this one is called quantity 116 00:06:09,780 --> 00:06:12,573 ‫and here also. 117 00:06:13,470 --> 00:06:16,230 ‫Well, we will also need this other one later, 118 00:06:16,230 --> 00:06:20,823 ‫but let's for now, just use the quantity. 119 00:06:23,280 --> 00:06:25,170 ‫And so here, all we have to do 120 00:06:25,170 --> 00:06:28,500 ‫is to change this from item.quantity 121 00:06:28,500 --> 00:06:30,320 ‫to item.totalprice. 122 00:06:33,120 --> 00:06:34,290 ‫And by the way, 123 00:06:34,290 --> 00:06:37,410 ‫having these selector functions here like this 124 00:06:37,410 --> 00:06:39,660 ‫might actually cause performance issues 125 00:06:39,660 --> 00:06:41,640 ‫in larger applications. 126 00:06:41,640 --> 00:06:44,640 ‫And so if you are really serious about Redux, 127 00:06:44,640 --> 00:06:47,370 ‫you can look into the Reselect library 128 00:06:47,370 --> 00:06:51,300 ‫which will allow us to optimize these selectors. 129 00:06:51,300 --> 00:06:56,300 ‫So that's this library right here. 130 00:06:58,530 --> 00:07:00,720 ‫Select like this. 131 00:07:00,720 --> 00:07:04,890 ‫But I will not go this deep into Redux here at this point, 132 00:07:04,890 --> 00:07:08,193 ‫'cause I think this is really not necessary right now. 133 00:07:10,140 --> 00:07:15,140 ‫But anyway, let's do total cart price here. 134 00:07:16,290 --> 00:07:18,510 ‫And so now the name of use selector 135 00:07:18,510 --> 00:07:20,763 ‫starts to make a little bit more sense. 136 00:07:24,600 --> 00:07:25,503 ‫Like this. 137 00:07:28,470 --> 00:07:30,840 ‫And then let's here use or help or function 138 00:07:30,840 --> 00:07:33,780 ‫called format currency. 139 00:07:33,780 --> 00:07:38,160 ‫And then here is where we use that total cart price. 140 00:07:38,160 --> 00:07:39,573 ‫And beautiful. 141 00:07:40,590 --> 00:07:42,210 ‫And as we keep adding here, 142 00:07:42,210 --> 00:07:45,873 ‫then the price increases and the number as well. 143 00:07:46,830 --> 00:07:47,663 ‫Nice. 144 00:07:47,663 --> 00:07:49,440 ‫And now just one final thing 145 00:07:49,440 --> 00:07:53,760 ‫which is that if we don't have any pizzas in our cart, 146 00:07:53,760 --> 00:07:57,900 ‫I guess we shouldn't even display this cart overview here 147 00:07:57,900 --> 00:07:59,043 ‫in the first place. 148 00:08:00,750 --> 00:08:05,750 ‫So let's get rid of this temporary cart. 149 00:08:06,510 --> 00:08:09,480 ‫Let's put it back to the actual empty cart. 150 00:08:09,480 --> 00:08:11,220 ‫And so then we get this. 151 00:08:11,220 --> 00:08:13,590 ‫So that doesn't make a lot of sense. 152 00:08:13,590 --> 00:08:16,140 ‫And so here we can easily say, 153 00:08:16,140 --> 00:08:21,140 ‫if there is no total cart quantity, 154 00:08:21,630 --> 00:08:25,650 ‫then have this component simply return null. 155 00:08:25,650 --> 00:08:27,453 ‫And so then it disappears. 156 00:08:28,560 --> 00:08:30,420 ‫So throughout the entire page, 157 00:08:30,420 --> 00:08:32,583 ‫now we no longer see the cart. 158 00:08:34,290 --> 00:08:36,390 ‫But then as we go back to the menu 159 00:08:36,390 --> 00:08:40,173 ‫and start adding our first pizza, then there it is. 160 00:08:41,430 --> 00:08:44,610 ‫And now as we move to our actual cart page, 161 00:08:44,610 --> 00:08:46,740 ‫we still have a problem. 162 00:08:46,740 --> 00:08:50,640 ‫So we still have this fake cart object right here 163 00:08:50,640 --> 00:08:53,820 ‫and we are not yet using the cart from the state. 164 00:08:53,820 --> 00:08:56,643 ‫And so let's fix that in the next video.