1 00:00:01,140 --> 00:00:02,567 ‫Let's start this section by getting 2 00:00:02,567 --> 00:00:06,000 ‫a first high level overview of 3 00:00:06,000 --> 00:00:09,390 ‫how to use the usereducer hook in practice 4 00:00:09,390 --> 00:00:12,003 ‫over this lecture and the next one. 5 00:00:13,530 --> 00:00:18,530 ‫And as always, it is time to create yet another project. 6 00:00:20,460 --> 00:00:23,241 ‫So let's move to our folder 7 00:00:23,241 --> 00:00:28,241 ‫and then let's run NPX Create-React-App at version five. 8 00:00:29,996 --> 00:00:34,890 ‫And then the app that we're going to build in this section 9 00:00:34,890 --> 00:00:38,583 ‫is gonna be called React Quiz. 10 00:00:40,080 --> 00:00:40,980 ‫Now, right? 11 00:00:40,980 --> 00:00:44,070 ‫And now let's wait until Create-React-App 12 00:00:44,070 --> 00:00:47,253 ‫finishes installing all the packages that we need. 13 00:00:49,710 --> 00:00:53,523 ‫Okay, and now it's time for our usual cleanup. 14 00:00:55,758 --> 00:00:59,340 ‫So first I'm gonna rename this here. 15 00:00:59,340 --> 00:01:02,580 ‫So we're already in our 10th project. 16 00:01:02,580 --> 00:01:06,663 ‫And now let's get rid of all this stuff here as always. 17 00:01:08,940 --> 00:01:12,780 ‫Okay, then getting our starters from here. 18 00:01:12,780 --> 00:01:16,080 ‫And this time we have five starter files 19 00:01:16,080 --> 00:01:18,393 ‫so I think that might be a record. 20 00:01:19,890 --> 00:01:22,655 ‫Then yes, replace the CSS file 21 00:01:22,655 --> 00:01:27,655 ‫and then let's just drag and drop our folder onto VS code. 22 00:01:32,250 --> 00:01:34,173 ‫And then as always, 23 00:01:35,589 --> 00:01:39,250 ‫let's also delete all the stuff we don't need from here 24 00:01:40,440 --> 00:01:43,020 ‫and the rest is okay. 25 00:01:43,020 --> 00:01:44,610 ‫So we need the Up component 26 00:01:44,610 --> 00:01:47,130 ‫and we need to include the CSS file 27 00:01:47,130 --> 00:01:51,993 ‫which as always, is part of the starter files right here. 28 00:01:53,503 --> 00:01:55,800 ‫So let's start by opening up the app file 29 00:01:55,800 --> 00:01:58,680 ‫and the date count file, 30 00:01:58,680 --> 00:02:00,810 ‫which we will need soon. 31 00:02:00,810 --> 00:02:03,190 ‫And then here, let's delete everything 32 00:02:04,155 --> 00:02:06,297 ‫and start the app component from scratch. 33 00:02:06,297 --> 00:02:10,597 ‫So export default function app. 34 00:02:14,070 --> 00:02:17,100 ‫And then here let's just create a div. 35 00:02:17,100 --> 00:02:20,099 ‫And in this div I will immediately call the 36 00:02:20,099 --> 00:02:22,413 ‫DateCounter component. 37 00:02:25,260 --> 00:02:26,580 ‫So DateCounter 38 00:02:26,580 --> 00:02:28,510 ‫and then I need to import that 39 00:02:34,440 --> 00:02:35,943 ‫from DateCounter. 40 00:02:37,335 --> 00:02:39,630 ‫So let's take a look. 41 00:02:39,630 --> 00:02:42,810 ‫So opening up our integrated terminal 42 00:02:42,810 --> 00:02:45,603 ‫and then NPM start. 43 00:02:46,710 --> 00:02:48,600 ‫And so this is what you should see 44 00:02:48,600 --> 00:02:52,380 ‫if you successfully started your application. 45 00:02:52,380 --> 00:02:54,150 ‫So let's also close the app 46 00:02:54,150 --> 00:02:56,700 ‫because in these first two lectures, 47 00:02:56,700 --> 00:03:00,090 ‫we will only be working with a DateCounter. 48 00:03:00,090 --> 00:03:04,080 ‫So this DateCounter is identical to what we implemented 49 00:03:04,080 --> 00:03:06,810 ‫in one of the previous challenges. 50 00:03:06,810 --> 00:03:10,890 ‫So basically here as we click on one of these values, 51 00:03:10,890 --> 00:03:13,050 ‫it will then increase the date. 52 00:03:13,050 --> 00:03:15,990 ‫We can also update that number here 53 00:03:15,990 --> 00:03:18,990 ‫and you see that then it also increases the date 54 00:03:18,990 --> 00:03:22,200 ‫and we can change the value on this slider, 55 00:03:22,200 --> 00:03:24,000 ‫which is basically the step. 56 00:03:24,000 --> 00:03:25,443 ‫So if we then click here, 57 00:03:27,196 --> 00:03:29,692 ‫it increments by whatever the step value is here. 58 00:03:29,692 --> 00:03:31,050 ‫Now, okay. 59 00:03:31,050 --> 00:03:33,030 ‫And so what we're going to do now 60 00:03:33,030 --> 00:03:36,690 ‫is to basically replace these two usestate hooks 61 00:03:36,690 --> 00:03:39,060 ‫with Usereducer hooks. 62 00:03:39,060 --> 00:03:41,460 ‫So it's very important that you understand 63 00:03:41,460 --> 00:03:44,850 ‫exactly what this code here does and how it works. 64 00:03:44,850 --> 00:03:46,972 ‫And so in case you didn't do the challenge 65 00:03:46,972 --> 00:03:49,140 ‫or don't really remember, 66 00:03:49,140 --> 00:03:51,090 ‫then please take a few minutes now 67 00:03:51,090 --> 00:03:53,880 ‫to really check out this code. 68 00:03:53,880 --> 00:03:56,238 ‫So all the event handlers that we have here 69 00:03:56,238 --> 00:03:59,550 ‫and how they update these two states 70 00:03:59,550 --> 00:04:02,400 ‫and how the states interact with one another. 71 00:04:02,400 --> 00:04:04,530 ‫So only proceed in this lecture 72 00:04:04,530 --> 00:04:08,490 ‫once you are really sure how everything works here. 73 00:04:08,490 --> 00:04:10,770 ‫Now, okay, but anyway, 74 00:04:10,770 --> 00:04:14,523 ‫let's now finally talk about the usereducer hook. 75 00:04:16,107 --> 00:04:18,030 ‫So the usereducer hook is basically 76 00:04:18,030 --> 00:04:22,200 ‫a more advanced and more complex way of managing state 77 00:04:22,200 --> 00:04:25,320 ‫instead of the usestate hook. 78 00:04:25,320 --> 00:04:27,660 ‫Now the usereducer hook works with 79 00:04:27,660 --> 00:04:29,880 ‫a so-called reducer function, 80 00:04:29,880 --> 00:04:31,480 ‫which is a pure function 81 00:04:34,012 --> 00:04:34,845 ‫that will always take in the previous state 82 00:04:34,845 --> 00:04:37,590 ‫and the so-called action as an argument 83 00:04:37,590 --> 00:04:40,011 ‫and will then return the next state. 84 00:04:40,011 --> 00:04:44,310 ‫But instead of talking about it, let's actually use it. 85 00:04:44,310 --> 00:04:46,230 ‫And I will start by replacing 86 00:04:46,230 --> 00:04:49,830 ‫this first count state right here. 87 00:04:49,830 --> 00:04:52,983 ‫So let's write again, count, 88 00:04:54,375 --> 00:04:55,208 ‫and then dispatch 89 00:04:56,365 --> 00:04:58,710 ‫and I will explain what these mean here in a minute. 90 00:04:58,710 --> 00:05:00,410 ‫And so then usereducer. 91 00:05:01,740 --> 00:05:05,280 ‫And so this hook takes in not only the initial state, 92 00:05:05,280 --> 00:05:09,780 ‫but also the reducer function that I was just talking about. 93 00:05:09,780 --> 00:05:12,090 ‫So let's already write that here 94 00:05:12,090 --> 00:05:14,523 ‫and I will then create dysfunction in a minute. 95 00:05:15,900 --> 00:05:17,430 ‫So that's the first argument. 96 00:05:17,430 --> 00:05:20,820 ‫And the second argument is again the initial state. 97 00:05:20,820 --> 00:05:22,833 ‫And so that's again zero. 98 00:05:23,970 --> 00:05:26,727 ‫So let's then comment out this state 99 00:05:26,727 --> 00:05:30,330 ‫and then let's create outside of the component, 100 00:05:30,330 --> 00:05:32,340 ‫that reducer function. 101 00:05:32,340 --> 00:05:35,880 ‫So that's just function reducer. 102 00:05:35,880 --> 00:05:38,550 ‫And so as I was saying, this reducer function 103 00:05:38,550 --> 00:05:43,550 ‫takes as the arguments, the current state and an action. 104 00:05:45,094 --> 00:05:48,090 ‫And so the first thing that we're going to do 105 00:05:48,090 --> 00:05:51,393 ‫is to just lock these two to the console. 106 00:05:53,040 --> 00:05:53,873 ‫Now, okay. 107 00:05:54,840 --> 00:05:57,120 ‫Now here we got a couple of errors. 108 00:05:57,120 --> 00:05:59,883 ‫So let's just comment out all of this code here. 109 00:06:03,840 --> 00:06:07,140 ‫So we actually no longer need any of this. 110 00:06:07,140 --> 00:06:09,400 ‫And then we also need to include 111 00:06:12,177 --> 00:06:14,853 ‫the usereducer hook into our application. 112 00:06:16,080 --> 00:06:18,540 ‫Okay, let's maybe reload here. 113 00:06:18,540 --> 00:06:20,043 ‫And there we go. 114 00:06:21,000 --> 00:06:25,110 ‫Okay, so we have our reducer function 115 00:06:25,110 --> 00:06:28,620 ‫but when does this function actually get called? 116 00:06:28,620 --> 00:06:31,440 ‫Well, that's where this dispatch here 117 00:06:31,440 --> 00:06:33,234 ‫actually comes into play. 118 00:06:33,234 --> 00:06:36,780 ‫So we see that the usereducer hook 119 00:06:36,780 --> 00:06:39,510 ‫does return the current state, 120 00:06:39,510 --> 00:06:41,283 ‫so just like the used state hook. 121 00:06:42,493 --> 00:06:46,440 ‫But then instead of also returning a state updating function 122 00:06:46,440 --> 00:06:50,160 ‫the reusereducer hook returns as a second thing, 123 00:06:50,160 --> 00:06:52,290 ‫this dispatch function. 124 00:06:52,290 --> 00:06:54,360 ‫And so this dispatch function 125 00:06:54,360 --> 00:06:57,480 ‫can also be used to update the state. 126 00:06:57,480 --> 00:07:00,425 ‫It just works in a slightly different way. 127 00:07:00,425 --> 00:07:05,425 ‫So let's just call this function right here. 128 00:07:06,484 --> 00:07:10,800 ‫And then let's pass in the number one. 129 00:07:10,800 --> 00:07:15,437 ‫And actually let's do that in the increment event handler. 130 00:07:15,437 --> 00:07:18,090 ‫So the one that is going to be called 131 00:07:18,090 --> 00:07:20,310 ‫when we click here on this button. 132 00:07:20,310 --> 00:07:22,720 ‫So let's actually click on this button 133 00:07:25,480 --> 00:07:28,440 ‫and here we get our output. 134 00:07:28,440 --> 00:07:30,900 ‫Let's make this a bit bigger. 135 00:07:30,900 --> 00:07:32,789 ‫And so the output that we get, 136 00:07:32,789 --> 00:07:37,789 ‫so the console dot log from here is zero and one. 137 00:07:37,800 --> 00:07:42,720 ‫Meaning that the state is zero and the action is one. 138 00:07:42,720 --> 00:07:44,670 ‫So why is that? 139 00:07:44,670 --> 00:07:47,340 ‫Well, it is because the reducer function 140 00:07:47,340 --> 00:07:49,500 ‫gets access to the current state 141 00:07:49,500 --> 00:07:51,210 ‫as I was saying in the beginning, 142 00:07:51,210 --> 00:07:53,490 ‫which right now is zero. 143 00:07:53,490 --> 00:07:55,380 ‫So it's this initial state. 144 00:07:55,380 --> 00:07:58,440 ‫And then it also gets access to the action, 145 00:07:58,440 --> 00:08:01,290 ‫which right now is simply this one 146 00:08:01,290 --> 00:08:04,530 ‫that we passed into the dispatch function. 147 00:08:04,530 --> 00:08:07,800 ‫So this is basically going to become the action 148 00:08:07,800 --> 00:08:09,360 ‫in the reducer. 149 00:08:09,360 --> 00:08:11,313 ‫And so the idea of the reducer 150 00:08:11,313 --> 00:08:14,100 ‫is to take these two things, 151 00:08:14,100 --> 00:08:16,259 ‫so the current state plus the action, 152 00:08:16,259 --> 00:08:20,015 ‫and based on that, return the next state. 153 00:08:20,015 --> 00:08:22,503 ‫And so let's do that. 154 00:08:24,270 --> 00:08:28,095 ‫So all we want to do is to return the state 155 00:08:28,095 --> 00:08:32,280 ‫plus the action in this case. 156 00:08:32,280 --> 00:08:34,179 ‫And so whatever we return here 157 00:08:34,179 --> 00:08:36,814 ‫will then become the new state. 158 00:08:36,814 --> 00:08:39,089 ‫And so this means that right now 159 00:08:39,089 --> 00:08:42,750 ‫our value here should become one. 160 00:08:42,750 --> 00:08:43,893 ‫Let's just reload. 161 00:08:45,570 --> 00:08:46,979 ‫And there we go. 162 00:08:46,979 --> 00:08:51,130 ‫So our state was indeed successfully updated. 163 00:08:51,130 --> 00:08:53,580 ‫Now when we click here, 164 00:08:53,580 --> 00:08:55,610 ‫of course nothing's going to happen, 165 00:08:55,610 --> 00:08:58,050 ‫but let's fix that. 166 00:08:58,050 --> 00:09:01,110 ‫So let's then again call the dispatch function, 167 00:09:01,110 --> 00:09:04,020 ‫which in the terms of usereducer, 168 00:09:04,020 --> 00:09:07,050 ‫we call dispatching an action. 169 00:09:07,050 --> 00:09:10,323 ‫So here we will dispatch an action of minus one. 170 00:09:11,444 --> 00:09:15,510 ‫And so then that minus one will get added 171 00:09:15,510 --> 00:09:17,280 ‫to the current state, 172 00:09:17,280 --> 00:09:19,920 ‫which will then decrease the value. 173 00:09:19,920 --> 00:09:21,783 ‫And so that works just fine. 174 00:09:22,740 --> 00:09:27,740 ‫Great. Now at this point, this isn't really useful, is it? 175 00:09:28,110 --> 00:09:30,346 ‫I mean, we had to do a lot of additional work 176 00:09:30,346 --> 00:09:35,181 ‫to get the same functionality as just this, right? 177 00:09:35,181 --> 00:09:38,220 ‫But trust me, it will get a lot more useful 178 00:09:38,220 --> 00:09:39,663 ‫as we keep going here. 179 00:09:40,620 --> 00:09:45,600 ‫So next up, let's think about how we can set the state 180 00:09:45,600 --> 00:09:48,660 ‫because remember when we type some number here, 181 00:09:48,660 --> 00:09:52,801 ‫we actually want the state to update to that number. 182 00:09:52,801 --> 00:09:57,000 ‫So that's what we have here in the defined count. 183 00:09:57,000 --> 00:10:01,380 ‫However, this is not going to work really in the same way 184 00:10:01,380 --> 00:10:02,910 ‫that we have been doing. 185 00:10:02,910 --> 00:10:04,780 ‫So here if we just dispatch 186 00:10:07,440 --> 00:10:11,910 ‫E dot target dot value, 187 00:10:11,910 --> 00:10:16,800 ‫then that will simply be added to the current state, right? 188 00:10:16,800 --> 00:10:18,250 ‫So let's write something here 189 00:10:20,976 --> 00:10:22,770 ‫and I will now write a zero so that we then have 10 here. 190 00:10:22,770 --> 00:10:24,573 ‫But then as I wrote the zero, 191 00:10:25,761 --> 00:10:28,170 ‫it actually added that to the state 192 00:10:28,170 --> 00:10:32,040 ‫because well, here we are just adding the action 193 00:10:32,040 --> 00:10:33,630 ‫to the current state. 194 00:10:33,630 --> 00:10:35,430 ‫And so if I now write another zero, 195 00:10:35,430 --> 00:10:37,470 ‫that will just get added to the state 196 00:10:37,470 --> 00:10:38,973 ‫that is already here as well. 197 00:10:39,840 --> 00:10:42,720 ‫So that's not at all what we want. 198 00:10:42,720 --> 00:10:44,980 ‫And so therefore now it's time 199 00:10:47,000 --> 00:10:49,290 ‫to actually start thinking about actions here. 200 00:10:49,290 --> 00:10:52,530 ‫So basically in this case, we have three actions. 201 00:10:52,530 --> 00:10:55,817 ‫We have decreasing the count, we have increasing it, 202 00:10:55,817 --> 00:10:58,533 ‫and we have setting it. 203 00:11:00,819 --> 00:11:02,103 ‫And so we should actually name these actions. 204 00:11:02,103 --> 00:11:06,810 ‫So what we're going to do is to not just pass in this value, 205 00:11:06,810 --> 00:11:09,420 ‫but an object which contains the action 206 00:11:09,420 --> 00:11:11,343 ‫as well as this value. 207 00:11:14,310 --> 00:11:17,610 ‫So let's write type 208 00:11:17,610 --> 00:11:21,750 ‫and then let's call this Dec for Decreasing 209 00:11:21,750 --> 00:11:25,833 ‫and then Payload and then set it to one. 210 00:11:26,670 --> 00:11:27,503 ‫Now, okay. 211 00:11:28,530 --> 00:11:31,860 ‫So this object is what we now call an action 212 00:11:31,860 --> 00:11:34,800 ‫when we work with reducer functions. 213 00:11:34,800 --> 00:11:36,284 ‫And in theory, this object here 214 00:11:36,284 --> 00:11:39,450 ‫could have any shape that we wanted. 215 00:11:39,450 --> 00:11:43,020 ‫But it is kind of a standard to always just have 216 00:11:43,020 --> 00:11:46,449 ‫the type property and the payload property. 217 00:11:46,449 --> 00:11:50,280 ‫So actually not playload, but really payload. 218 00:11:50,280 --> 00:11:53,040 ‫So this is the standard that you will always see 219 00:11:53,040 --> 00:11:55,380 ‫when using the usereducer hook. 220 00:11:55,380 --> 00:11:59,340 ‫And the same is actually true later in Redux. 221 00:11:59,340 --> 00:12:01,203 ‫So in case you heard of that. 222 00:12:02,580 --> 00:12:05,190 ‫So let's do the same thing here as well. 223 00:12:05,190 --> 00:12:06,063 ‫So type. 224 00:12:07,650 --> 00:12:11,590 ‫This one will be Inc and then the payload here 225 00:12:12,540 --> 00:12:14,403 ‫will just be one. 226 00:12:15,900 --> 00:12:20,340 ‫Okay? And so now here, instead of just doing this, 227 00:12:20,340 --> 00:12:23,373 ‫we now need to account for these different types. 228 00:12:24,900 --> 00:12:29,377 ‫So let's say if the action dot type is Inc, 229 00:12:31,470 --> 00:12:34,775 ‫well then, return the current state 230 00:12:34,775 --> 00:12:39,775 ‫plus action dot payload. 231 00:12:41,970 --> 00:12:46,923 ‫Then if it is decrease, then minus. 232 00:12:48,630 --> 00:12:53,630 ‫And if the action dot type is set count, 233 00:12:56,220 --> 00:12:57,933 ‫which we will create later, 234 00:12:58,890 --> 00:13:00,333 ‫well then actually, 235 00:13:01,844 --> 00:13:05,160 ‫simply return action dot payload. 236 00:13:05,160 --> 00:13:06,930 ‫But let's experiment now with this 237 00:13:06,930 --> 00:13:08,913 ‫so that it makes more sense. 238 00:13:09,930 --> 00:13:11,013 ‫So let's reload. 239 00:13:12,188 --> 00:13:14,130 ‫And first of all, let's see if this works now. 240 00:13:14,130 --> 00:13:15,993 ‫And beautiful. 241 00:13:18,210 --> 00:13:20,070 ‫So really nice. 242 00:13:20,070 --> 00:13:23,193 ‫And now here, let's dispatch also. 243 00:13:28,020 --> 00:13:32,883 ‫Actually an action object with a type of set count. 244 00:13:34,680 --> 00:13:36,270 ‫And then here the payload 245 00:13:36,270 --> 00:13:40,140 ‫will be whatever value is typed into this field. 246 00:13:40,140 --> 00:13:43,890 ‫And so now this actually works. 247 00:13:43,890 --> 00:13:46,530 ‫So whatever value I type here now 248 00:13:46,530 --> 00:13:49,110 ‫is this E dot target dot value. 249 00:13:49,110 --> 00:13:53,820 ‫And this will become the payload in this action right here. 250 00:13:53,820 --> 00:13:58,290 ‫And so then we dispatch this action to our reducer. 251 00:13:58,290 --> 00:14:01,590 ‫And so then that action contains that value. 252 00:14:01,590 --> 00:14:03,398 ‫So this 700 right here and the type. 253 00:14:03,398 --> 00:14:05,966 ‫And so then based on that type, 254 00:14:05,966 --> 00:14:09,880 ‫we decide that the next state should become 255 00:14:11,133 --> 00:14:12,766 ‫exactly that value. 256 00:14:12,766 --> 00:14:14,790 ‫So that 700 in this case. 257 00:14:14,790 --> 00:14:18,450 ‫And if all this sounds and looks really confusing, 258 00:14:18,450 --> 00:14:21,390 ‫then please don't worry at this point. 259 00:14:21,390 --> 00:14:24,510 ‫So now we are only getting like a overview 260 00:14:24,510 --> 00:14:26,910 ‫of how all this works in practice 261 00:14:26,910 --> 00:14:31,230 ‫but I will explain you exactly what the usereducer hook is, 262 00:14:31,230 --> 00:14:33,810 ‫how it really works, and yeah, 263 00:14:33,810 --> 00:14:35,122 ‫we will have some nice diagrams 264 00:14:35,122 --> 00:14:40,122 ‫and hopefully by then all of this will make a lot of sense. 265 00:14:40,350 --> 00:14:41,790 ‫Now, just to finish here, 266 00:14:41,790 --> 00:14:44,018 ‫let's think a little bit more about this. 267 00:14:44,018 --> 00:14:48,900 ‫So actually, is there a need to pass in the payload 268 00:14:48,900 --> 00:14:51,780 ‫right here and right here? 269 00:14:51,780 --> 00:14:53,010 ‫Well, not really, 270 00:14:53,010 --> 00:14:56,250 ‫because the reducer should actually know itself 271 00:14:56,250 --> 00:15:00,510 ‫what happens when we want to decrease, right? 272 00:15:00,510 --> 00:15:03,450 ‫So decreasing and increasing is really just 273 00:15:03,450 --> 00:15:05,400 ‫adding or subtracting one. 274 00:15:05,400 --> 00:15:07,560 ‫And so we should add that logic here 275 00:15:07,560 --> 00:15:09,840 ‫directly in our reducer. 276 00:15:09,840 --> 00:15:14,409 ‫So our reducer should know by himself or by itself 277 00:15:14,409 --> 00:15:17,220 ‫how to perform these types of actions. 278 00:15:17,220 --> 00:15:20,040 ‫And so then we can remove the payload from here 279 00:15:20,040 --> 00:15:24,210 ‫and make it a little bit easier to dispatch this action. 280 00:15:24,210 --> 00:15:27,810 ‫So the payload property here is optional. 281 00:15:27,810 --> 00:15:32,100 ‫And of course here in this case, we still need it. 282 00:15:32,100 --> 00:15:35,226 ‫So we basically still need to pass our reducer, 283 00:15:35,226 --> 00:15:36,810 ‫this value here. 284 00:15:36,810 --> 00:15:38,640 ‫Cause otherwise of course, 285 00:15:38,640 --> 00:15:42,070 ‫it would've no way of setting the next state. 286 00:15:42,070 --> 00:15:44,763 ‫Now, okay, and so this still works. 287 00:15:44,763 --> 00:15:48,090 ‫And with this, we finished the first part 288 00:15:48,090 --> 00:15:50,670 ‫of transforming this count state here 289 00:15:50,670 --> 00:15:54,570 ‫from a simple use state to a usereducer. 290 00:15:54,570 --> 00:15:57,423 ‫And so let's quickly recap what happened here. 291 00:15:58,410 --> 00:16:01,080 ‫So this new hook takes in 292 00:16:01,080 --> 00:16:04,110 ‫not only the initial state which was zero, 293 00:16:04,110 --> 00:16:06,510 ‫but also a reducer function 294 00:16:06,510 --> 00:16:09,899 ‫which will always get access to the current state 295 00:16:09,899 --> 00:16:14,612 ‫and the action that we pass into the dispatch function. 296 00:16:14,612 --> 00:16:17,870 ‫So where does this dispatch function come from? 297 00:16:17,870 --> 00:16:22,680 ‫Well, it is one of the things that usereducer returns. 298 00:16:22,680 --> 00:16:26,010 ‫So this returns always the current state, 299 00:16:26,010 --> 00:16:28,410 ‫which here we decided to call Count. 300 00:16:28,410 --> 00:16:31,800 ‫And then it also returns the dispatch function, 301 00:16:31,800 --> 00:16:35,883 ‫which we can then use to dispatch actions like this one. 302 00:16:36,750 --> 00:16:37,890 ‫So the convention is 303 00:16:37,890 --> 00:16:41,220 ‫to dispatch actions that contain a type, 304 00:16:41,220 --> 00:16:43,980 ‫and then optionally also a payload, 305 00:16:43,980 --> 00:16:48,600 ‫with the goal to pass in some value into the reducer. 306 00:16:48,600 --> 00:16:50,773 ‫And so then our reducer function 307 00:16:50,773 --> 00:16:52,860 ‫takes the current state 308 00:16:52,860 --> 00:16:54,720 ‫and it takes all the information 309 00:16:54,720 --> 00:16:56,286 ‫that is contained in the action 310 00:16:56,286 --> 00:16:59,790 ‫in order to compute the next state. 311 00:16:59,790 --> 00:17:02,040 ‫So usually based on the action type, 312 00:17:02,040 --> 00:17:05,160 ‫the reducer then takes some kind of decision. 313 00:17:05,160 --> 00:17:08,430 ‫For example, if it's Inc, so increment, 314 00:17:08,430 --> 00:17:09,900 ‫then it simply adds one. 315 00:17:09,900 --> 00:17:11,010 ‫If it's decrement, 316 00:17:11,010 --> 00:17:13,191 ‫then it subtracts one from the current state. 317 00:17:13,191 --> 00:17:14,904 ‫And if it's set count, 318 00:17:14,904 --> 00:17:17,353 ‫then it will simply set the new state 319 00:17:17,353 --> 00:17:19,946 ‫as the value that came in as the payload. 320 00:17:19,946 --> 00:17:23,520 ‫And so those values are returned. 321 00:17:23,520 --> 00:17:25,290 ‫And so this returned value 322 00:17:25,290 --> 00:17:27,930 ‫is what will become the next state. 323 00:17:27,930 --> 00:17:29,120 ‫And so then as always, 324 00:17:29,120 --> 00:17:34,120 ‫the component is re-rendered and DUI is updated as well. 325 00:17:35,460 --> 00:17:38,966 ‫Okay, so hopefully this made a bit of sense, 326 00:17:38,966 --> 00:17:39,825 ‫but if not, 327 00:17:39,825 --> 00:17:44,310 ‫well we will have lots of opportunities to practice this 328 00:17:44,310 --> 00:17:47,850 ‫throughout this section and the rest of the course. 329 00:17:47,850 --> 00:17:50,760 ‫Next up, we will also incorporate this step here 330 00:17:50,760 --> 00:17:52,350 ‫into our reducer. 331 00:17:52,350 --> 00:17:56,043 ‫And so let's do that in the next video right away.