1 00:00:01,110 --> 00:00:02,370 ‫Welcome back. 2 00:00:02,370 --> 00:00:06,000 ‫So let's now also incorporate the step state 3 00:00:06,000 --> 00:00:08,763 ‫into the Reducer that we have been building. 4 00:00:10,440 --> 00:00:12,870 ‫So usually we use Reducers 5 00:00:12,870 --> 00:00:16,170 ‫when we have some more complex state to manage. 6 00:00:16,170 --> 00:00:20,100 ‫So not just one single value as we have been doing here. 7 00:00:20,100 --> 00:00:22,560 ‫So what this means is that usually 8 00:00:22,560 --> 00:00:25,200 ‫the state is going to be an object 9 00:00:25,200 --> 00:00:27,633 ‫and not just one single value. 10 00:00:28,710 --> 00:00:32,100 ‫So let's now comment out this here as well, 11 00:00:32,100 --> 00:00:37,100 ‫and then let's define an object called initial state. 12 00:00:39,000 --> 00:00:41,880 ‫And this again is a pretty common name. 13 00:00:41,880 --> 00:00:46,770 ‫And so here let's define our count as zero 14 00:00:46,770 --> 00:00:50,010 ‫and then the step as one. 15 00:00:50,010 --> 00:00:54,207 ‫So exactly the same default values that we had before. 16 00:00:54,207 --> 00:00:58,500 ‫And then here we will now pass in that initial state 17 00:00:58,500 --> 00:01:01,680 ‫instead of just the zero. 18 00:01:01,680 --> 00:01:05,880 ‫And then here now our state will no longer be called count, 19 00:01:05,880 --> 00:01:09,780 ‫but, well, let's call it "Just state". 20 00:01:09,780 --> 00:01:12,540 ‫And we could also immediately destructure 21 00:01:12,540 --> 00:01:15,873 ‫that state object error, but let's do that here. 22 00:01:16,740 --> 00:01:21,740 ‫So let's say count and step destructuring from state. 23 00:01:25,940 --> 00:01:30,150 ‫And so now again, we have this function here 24 00:01:30,150 --> 00:01:34,143 ‫that we had before, which now no longer exist. 25 00:01:35,760 --> 00:01:37,170 ‫Okay. 26 00:01:37,170 --> 00:01:39,119 ‫And now also what we have here is not 27 00:01:39,119 --> 00:01:41,500 ‫going to make a lot of sense anymore. 28 00:01:41,500 --> 00:01:43,320 ‫And so let's just go back 29 00:01:43,320 --> 00:01:45,903 ‫for now to our console.log here. 30 00:01:47,340 --> 00:01:49,560 ‫Also don't need this anymore. 31 00:01:49,560 --> 00:01:53,310 ‫And so let's just quickly reload and click on one 32 00:01:53,310 --> 00:01:57,390 ‫of these buttons here, which will then dispatch an action. 33 00:01:57,390 --> 00:02:00,120 ‫And here we have our first problem. 34 00:02:00,120 --> 00:02:04,500 ‫For some reason, maybe we actually need to return something 35 00:02:04,500 --> 00:02:07,380 ‫from there, but let's just try that again. 36 00:02:07,380 --> 00:02:09,510 ‫Yeah, so that doesn't really work. 37 00:02:09,510 --> 00:02:13,893 ‫So let's just try to return some object from there. 38 00:02:17,580 --> 00:02:19,863 ‫So you maybe don't have to even do this. 39 00:02:21,180 --> 00:02:23,990 ‫So this is just to avoid that error. 40 00:02:23,990 --> 00:02:26,700 ‫And so yeah, now that works. 41 00:02:26,700 --> 00:02:30,600 ‫So all I wanted to do here is to now show you the state 42 00:02:30,600 --> 00:02:32,730 ‫and the action again. 43 00:02:32,730 --> 00:02:36,570 ‫So the state that we now get in the Reducer is the same 44 00:02:36,570 --> 00:02:40,870 ‫as this initial step that we passed into use Reducer. 45 00:02:40,870 --> 00:02:44,670 ‫And so then we need to return an object with the same shape. 46 00:02:44,670 --> 00:02:47,943 ‫So it also contains the count and the step. 47 00:02:48,810 --> 00:02:53,043 ‫And so let's now adapt our Reducer function here for that. 48 00:02:54,900 --> 00:02:59,000 ‫Now actually it is very common to use a switch 49 00:02:59,000 --> 00:03:02,553 ‫statement inside of a Reducer function like this. 50 00:03:04,125 --> 00:03:06,360 ‫So instead of multiple ifs, 51 00:03:06,360 --> 00:03:08,763 ‫we just do usually a switch. 52 00:03:09,635 --> 00:03:12,930 ‫And the value that we want to evaluate is 53 00:03:12,930 --> 00:03:15,423 ‫of course the action type. 54 00:03:16,400 --> 00:03:18,870 ‫And then we just do one case 55 00:03:18,870 --> 00:03:22,773 ‫for well all the possible cases that we can have. 56 00:03:26,700 --> 00:03:28,530 ‫So what do we want to return 57 00:03:28,530 --> 00:03:32,940 ‫in the case that the action type is decreased? 58 00:03:32,940 --> 00:03:37,270 ‫Well, before we were just returning the state plus one 59 00:03:38,520 --> 00:03:40,800 ‫but now we can no longer do that. 60 00:03:40,800 --> 00:03:43,450 ‫So now we need to return an object 61 00:03:43,450 --> 00:03:45,930 ‫with this shape, remember? 62 00:03:45,930 --> 00:03:47,820 ‫So how do we do that? 63 00:03:47,820 --> 00:03:49,290 ‫Well, first of all, 64 00:03:49,290 --> 00:03:54,290 ‫let's set the count based on state.count plus one 65 00:03:58,600 --> 00:04:01,350 ‫and then we also need to set the step. 66 00:04:01,350 --> 00:04:04,140 ‫But instead of writing it out explicitly, 67 00:04:04,140 --> 00:04:06,060 ‫what we do is to spread 68 00:04:06,060 --> 00:04:08,840 ‫out the entire current state object here. 69 00:04:08,840 --> 00:04:10,530 ‫And then with this part here, 70 00:04:10,530 --> 00:04:13,760 ‫we basically override the count property there. 71 00:04:13,760 --> 00:04:16,890 ‫And so this is exactly the way that we have been 72 00:04:16,890 --> 00:04:19,319 ‫updating objects in the past as well. 73 00:04:19,319 --> 00:04:22,680 ‫So basically creating a brand new object 74 00:04:22,680 --> 00:04:27,270 ‫which contains all the information of the previous object 75 00:04:27,270 --> 00:04:29,643 ‫and then whatever we want to override. 76 00:04:31,139 --> 00:04:32,750 ‫Now here I'm getting this warning 77 00:04:32,750 --> 00:04:35,820 ‫because we need also a default. 78 00:04:35,820 --> 00:04:40,480 ‫And so here in case we basically get an action 79 00:04:40,480 --> 00:04:43,200 ‫that is not recognized by our switch 80 00:04:43,200 --> 00:04:48,200 ‫we just throw a new error which says unknown action. 81 00:04:52,010 --> 00:04:54,270 ‫Well, this is still not happy, 82 00:04:54,270 --> 00:04:57,543 ‫but well, let's just keep going here for now. 83 00:04:58,550 --> 00:05:00,963 ‫So don't really see what the problem there is. 84 00:05:02,920 --> 00:05:05,490 ‫So let's do the other case as well. 85 00:05:05,490 --> 00:05:08,940 ‫So to increment is minus one 86 00:05:08,940 --> 00:05:11,730 ‫and the error is still not disappearing. 87 00:05:11,730 --> 00:05:13,050 ‫But the reason for that is 88 00:05:13,050 --> 00:05:15,060 ‫that here we are already returning 89 00:05:15,060 --> 00:05:18,273 ‫and so then this code here would be unreachable. 90 00:05:20,100 --> 00:05:25,100 ‫Okay, and finally we have this other set count case. 91 00:05:26,200 --> 00:05:29,570 ‫So here I'm basically just converting the code 92 00:05:29,570 --> 00:05:32,880 ‫that we already had into a switch statement 93 00:05:32,880 --> 00:05:34,800 ‫and also to returning an object 94 00:05:34,800 --> 00:05:38,673 ‫with the shape again of count and step. 95 00:05:39,990 --> 00:05:43,460 ‫All right, so spreading out the state 96 00:05:43,460 --> 00:05:48,460 ‫and then the count will be equal to action payload. 97 00:05:52,290 --> 00:05:56,550 ‫Okay, so for now, this is going to work exactly 98 00:05:56,550 --> 00:05:58,353 ‫the same way as before, 99 00:06:00,030 --> 00:06:03,510 ‫except that I did switch here. 100 00:06:03,510 --> 00:06:07,293 ‫So here it is, the plus and here the minus. 101 00:06:08,850 --> 00:06:10,889 ‫So let's, yeah, now that works. 102 00:06:10,889 --> 00:06:14,523 ‫And if I type here, then that also updates the state. 103 00:06:15,360 --> 00:06:20,040 ‫Great, and now let's actually do the same thing here 104 00:06:20,040 --> 00:06:21,033 ‫for the step. 105 00:06:22,560 --> 00:06:27,220 ‫So here we now also want to dispatch an action 106 00:06:30,329 --> 00:06:35,329 ‫with a type of set step, right? 107 00:06:37,090 --> 00:06:40,203 ‫And the payload is going to be exactly the same. 108 00:06:42,330 --> 00:06:46,903 ‫So again, we convert to a number E target value, okay? 109 00:06:50,730 --> 00:06:51,960 ‫So set step. 110 00:06:51,960 --> 00:06:55,893 ‫And so now here we need to then add a new case for that. 111 00:07:00,150 --> 00:07:05,150 ‫And so in this case, we want to return the entire state 112 00:07:05,940 --> 00:07:10,940 ‫and set the step this time to action.payload. 113 00:07:14,610 --> 00:07:18,993 ‫So that's state, let's reload. 114 00:07:19,860 --> 00:07:23,080 ‫And yeah, beautiful. 115 00:07:23,080 --> 00:07:24,070 ‫That works. 116 00:07:24,070 --> 00:07:27,180 ‫And so now the only thing that we have to do is to 117 00:07:27,180 --> 00:07:29,100 ‫actually take this step here 118 00:07:29,100 --> 00:07:33,633 ‫into account when we increase and decrease here. 119 00:07:34,650 --> 00:07:36,750 ‫So that's easy enough. 120 00:07:36,750 --> 00:07:40,383 ‫So that's just state step. 121 00:07:42,710 --> 00:07:45,803 ‫And then here of course the same thing. 122 00:07:47,880 --> 00:07:51,840 ‫And so now this should become two, yes 123 00:07:51,840 --> 00:07:54,930 ‫eight and so on and so forth. 124 00:07:54,930 --> 00:07:59,880 ‫Now, okay, let's just get rid of this here. 125 00:07:59,880 --> 00:08:02,430 ‫And well, up until this point 126 00:08:02,430 --> 00:08:05,840 ‫maybe all of this still doesn't seem so interesting. 127 00:08:05,840 --> 00:08:08,860 ‫So everything that we did so far could easily 128 00:08:08,860 --> 00:08:13,860 ‫have been achieved with the use data hooks as well, right? 129 00:08:14,010 --> 00:08:16,503 ‫But now let's actually do something different. 130 00:08:17,790 --> 00:08:19,503 ‫Also, get rid of these here. 131 00:08:24,240 --> 00:08:29,240 ‫Okay, so as I was saying, 132 00:08:29,550 --> 00:08:31,680 ‫let's do something different. 133 00:08:31,680 --> 00:08:34,710 ‫So which is this reset function. 134 00:08:34,710 --> 00:08:37,860 ‫So what we did before was to simply take the two 135 00:08:37,860 --> 00:08:41,940 ‫state setters and then call both of them 136 00:08:41,940 --> 00:08:44,940 ‫but now we can do one big state transition 137 00:08:44,940 --> 00:08:48,240 ‫which does all that at the same time. 138 00:08:48,240 --> 00:08:50,430 ‫And so that's going to be one 139 00:08:50,430 --> 00:08:54,330 ‫of the huge advantages of the use Reducer hook. 140 00:08:54,330 --> 00:08:55,740 ‫So especially of course 141 00:08:55,740 --> 00:08:59,523 ‫if we had even more states than just these two. 142 00:09:00,359 --> 00:09:03,330 ‫So let me show what I mean in practice. 143 00:09:03,330 --> 00:09:05,570 ‫So here we can just dispatch an action 144 00:09:05,570 --> 00:09:09,500 ‫with a type, for example, reset. 145 00:09:09,500 --> 00:09:13,940 ‫And here we don't need to pass any data into the Reducer 146 00:09:13,940 --> 00:09:17,190 ‫and therefore we don't need to specify the payload 147 00:09:17,190 --> 00:09:22,190 ‫because we can do that right inside the Reducer function. 148 00:09:24,450 --> 00:09:27,810 ‫So let's then add that case here as well. 149 00:09:27,810 --> 00:09:29,469 ‫So reset. 150 00:09:29,469 --> 00:09:31,290 ‫And so then here 151 00:09:31,290 --> 00:09:34,590 ‫all we need to do is to return a new object 152 00:09:34,590 --> 00:09:39,060 ‫where the count is reset to zero 153 00:09:39,060 --> 00:09:41,580 ‫and to step is reset to one. 154 00:09:41,580 --> 00:09:45,090 ‫And so here we can essentially update these two pieces 155 00:09:45,090 --> 00:09:47,970 ‫of state at the same time, 156 00:09:47,970 --> 00:09:49,320 ‫and we can do even better. 157 00:09:49,320 --> 00:09:51,153 ‫Let's cut this from here. 158 00:09:52,910 --> 00:09:55,090 ‫So this can actually live outside that. 159 00:09:55,090 --> 00:09:59,553 ‫Then here we can just return the initial state. 160 00:10:00,450 --> 00:10:01,620 ‫All right. 161 00:10:01,620 --> 00:10:03,960 ‫And so if I click on reset, 162 00:10:03,960 --> 00:10:06,630 ‫then bam, there we go. 163 00:10:06,630 --> 00:10:11,400 ‫So our entire state just got reset to its initial state. 164 00:10:11,400 --> 00:10:16,263 ‫So all in one go just with one dispatch right here. 165 00:10:17,550 --> 00:10:19,590 ‫So all we're doing here actually 166 00:10:19,590 --> 00:10:23,760 ‫in these event handlers is to just dispatch. 167 00:10:23,760 --> 00:10:25,590 ‫And so we could just move all 168 00:10:25,590 --> 00:10:27,360 ‫of these dispatches then here, 169 00:10:27,360 --> 00:10:29,250 ‫right into the JSX. 170 00:10:29,250 --> 00:10:31,530 ‫So that would actually make a lot of sense 171 00:10:31,530 --> 00:10:32,979 ‫but I won't do that right now. 172 00:10:32,979 --> 00:10:36,320 ‫But yeah, we could just replace all these event handlers 173 00:10:36,320 --> 00:10:39,090 ‫that we have here because all of them 174 00:10:39,090 --> 00:10:43,800 ‫all they do is to dispatch actions, the logic itself. 175 00:10:43,800 --> 00:10:48,630 ‫So the real logic of what they do is now all centralized 176 00:10:48,630 --> 00:10:50,670 ‫in this one Reducer function. 177 00:10:50,670 --> 00:10:52,350 ‫And so that is the beauty 178 00:10:52,350 --> 00:10:56,730 ‫and the big advantage of the Reducer function. 179 00:10:56,730 --> 00:10:59,430 ‫So basically we have all the possible state 180 00:10:59,430 --> 00:11:01,170 ‫updates that can happen 181 00:11:01,170 --> 00:11:05,670 ‫in our application in this one central place here. 182 00:11:05,670 --> 00:11:08,220 ‫And so this makes it really easy to understand 183 00:11:08,220 --> 00:11:10,900 ‫the entire application without having to go 184 00:11:10,900 --> 00:11:13,590 ‫into all the different components 185 00:11:13,590 --> 00:11:15,810 ‫and all the different functions. 186 00:11:15,810 --> 00:11:19,410 ‫I mean, of course here we only have one component 187 00:11:19,410 --> 00:11:21,420 ‫and it's all really simple 188 00:11:21,420 --> 00:11:24,630 ‫but maybe you can start seeing how nice this can be 189 00:11:24,630 --> 00:11:26,430 ‫in a bigger application. 190 00:11:26,430 --> 00:11:29,120 ‫And in fact, we will see that in action 191 00:11:29,120 --> 00:11:33,870 ‫once we start building the big application for this section. 192 00:11:33,870 --> 00:11:37,860 ‫But all these advantages will become more clear later on. 193 00:11:37,860 --> 00:11:39,630 ‫For now in these two lectures. 194 00:11:39,630 --> 00:11:40,950 ‫I just wanted to focus 195 00:11:40,950 --> 00:11:44,040 ‫on the mechanics of the use Reducer hooks. 196 00:11:44,040 --> 00:11:45,840 ‫So really how it works 197 00:11:45,840 --> 00:11:49,410 ‫and especially how this Reducer function here works. 198 00:11:49,410 --> 00:11:53,430 ‫But I know that this all looks very confusing right now 199 00:11:53,430 --> 00:11:58,020 ‫because I perfectly remember how I felt when I first learned 200 00:11:58,020 --> 00:12:01,260 ‫about this quite complex hook. 201 00:12:01,260 --> 00:12:04,110 ‫But since we are in the advanced React part 202 00:12:04,110 --> 00:12:08,670 ‫now it's time to learn about these more difficult things. 203 00:12:08,670 --> 00:12:11,790 ‫But anyway, in the next lecture we will have 204 00:12:11,790 --> 00:12:15,660 ‫some nice diagrams that will really illustrate the flow 205 00:12:15,660 --> 00:12:18,030 ‫of the data and of the state here. 206 00:12:18,030 --> 00:12:20,133 ‫And so stay tuned for that.