1 00:00:01,260 --> 00:00:04,830 ‫So we just learned how to use the useReducer hook 2 00:00:04,830 --> 00:00:07,860 ‫to centralize all the state updating logic 3 00:00:07,860 --> 00:00:12,360 ‫in one central place, which is the reducer function. 4 00:00:12,360 --> 00:00:16,380 ‫So let's now dive deeper into the concept of reducers 5 00:00:16,380 --> 00:00:19,320 ‫and how and why they can make our applications 6 00:00:19,320 --> 00:00:21,933 ‫a lot better in certain situations. 7 00:00:24,060 --> 00:00:25,920 ‫So up until this point, 8 00:00:25,920 --> 00:00:28,050 ‫we have been using the useState hook 9 00:00:28,050 --> 00:00:31,380 ‫to manage all our state, right? 10 00:00:31,380 --> 00:00:34,290 ‫However, as components and state updates 11 00:00:34,290 --> 00:00:39,060 ‫become more complex, using useState to manage all state 12 00:00:39,060 --> 00:00:42,810 ‫is, in certain situations, not enough. 13 00:00:42,810 --> 00:00:46,890 ‫For example, some components have a lot of state variables 14 00:00:46,890 --> 00:00:49,560 ‫and also a lot of state updates 15 00:00:49,560 --> 00:00:52,800 ‫that are spread across multiple event handlers 16 00:00:52,800 --> 00:00:57,210 ‫all over the component or maybe even multiple components. 17 00:00:57,210 --> 00:01:00,270 ‫And so this can quickly become overwhelming 18 00:01:00,270 --> 00:01:01,830 ‫and hard to manage. 19 00:01:01,830 --> 00:01:04,950 ‫It's also very common that multiple state updates 20 00:01:04,950 --> 00:01:07,560 ‫need to happen at the same time 21 00:01:07,560 --> 00:01:10,650 ‫so as a reaction to the same event. 22 00:01:10,650 --> 00:01:13,320 ‫For example, when we want to start a game, 23 00:01:13,320 --> 00:01:15,960 ‫we might have to set the score to zero, 24 00:01:15,960 --> 00:01:19,533 ‫set an is playing status and start a timer. 25 00:01:20,370 --> 00:01:24,570 ‫And finally, many times updating one piece of state 26 00:01:24,570 --> 00:01:28,170 ‫depends on one or more other pieces of state, 27 00:01:28,170 --> 00:01:30,390 ‫which can also become challenging 28 00:01:30,390 --> 00:01:33,030 ‫when there is a lot of state. 29 00:01:33,030 --> 00:01:38,030 ‫And so in all these cases, useReducer can really help. 30 00:01:38,190 --> 00:01:41,790 ‫So these are the problems that reducers try to solve 31 00:01:41,790 --> 00:01:43,503 ‫and so let's now see how. 32 00:01:45,180 --> 00:01:49,350 ‫So first of all, useReducer is an alternative way 33 00:01:49,350 --> 00:01:51,810 ‫of setting and managing state, 34 00:01:51,810 --> 00:01:54,690 ‫which is ideal for complex state 35 00:01:54,690 --> 00:01:57,243 ‫and for related pieces of state. 36 00:01:58,230 --> 00:02:02,220 ‫Now, we already used useReducer in the last two lectures 37 00:02:02,220 --> 00:02:05,010 ‫and this is what that looked like. 38 00:02:05,010 --> 00:02:06,600 ‫So we call useReducer 39 00:02:06,600 --> 00:02:10,050 ‫with a reducer function and its initial state 40 00:02:10,050 --> 00:02:14,760 ‫and it returns a state and a dispatch function. 41 00:02:14,760 --> 00:02:19,200 ‫So starting from the beginning, when we use useReducer, 42 00:02:19,200 --> 00:02:21,990 ‫we usually store related pieces of state 43 00:02:21,990 --> 00:02:26,990 ‫in a state object that is returned from the useReducer hook. 44 00:02:27,120 --> 00:02:29,910 ‫Now, it could also be a primitive value 45 00:02:29,910 --> 00:02:32,820 ‫but usually, we use objects. 46 00:02:32,820 --> 00:02:36,900 ‫Now, as we already know, useReducer needs something called 47 00:02:36,900 --> 00:02:40,170 ‫a reducer function in order to work. 48 00:02:40,170 --> 00:02:43,500 ‫So this function is where we place all the logic 49 00:02:43,500 --> 00:02:47,370 ‫that will be responsible for updating the state 50 00:02:47,370 --> 00:02:51,420 ‫and moving all state updating logic from event handlers 51 00:02:51,420 --> 00:02:54,300 ‫into this one central place allows us 52 00:02:54,300 --> 00:02:58,890 ‫to completely decouple state logic from the component itself 53 00:02:58,890 --> 00:03:02,190 ‫which makes our components so much cleaner 54 00:03:02,190 --> 00:03:04,023 ‫and so much more readable. 55 00:03:04,920 --> 00:03:08,190 ‫So when we manage state with useReducer, 56 00:03:08,190 --> 00:03:10,950 ‫it's ultimately this reducer function 57 00:03:10,950 --> 00:03:14,070 ‫that will be updating the state object. 58 00:03:14,070 --> 00:03:15,270 ‫So in a way. 59 00:03:15,270 --> 00:03:18,840 ‫it's a bit like the setState function in useState 60 00:03:18,840 --> 00:03:21,450 ‫but with superpowers. 61 00:03:21,450 --> 00:03:24,870 ‫Now in practice, the reducer is simply a function 62 00:03:24,870 --> 00:03:28,230 ‫that takes in the current state and an action, 63 00:03:28,230 --> 00:03:32,340 ‫and based on those values, returns the next state, 64 00:03:32,340 --> 00:03:34,920 ‫so the updated state. 65 00:03:34,920 --> 00:03:39,420 ‫Now, keep in mind that state is immutable in React. 66 00:03:39,420 --> 00:03:41,190 ‫This means that the reducer 67 00:03:41,190 --> 00:03:44,160 ‫is not allowed to mutate the state, 68 00:03:44,160 --> 00:03:47,070 ‫and in fact, no side effects are allowed 69 00:03:47,070 --> 00:03:48,693 ‫in the reducer at all. 70 00:03:49,530 --> 00:03:52,950 ‫So a reducer must be a pure function 71 00:03:52,950 --> 00:03:56,100 ‫that always returns a new state. 72 00:03:56,100 --> 00:03:58,710 ‫And again, based on the current state 73 00:03:58,710 --> 00:04:01,050 ‫and the received action. 74 00:04:01,050 --> 00:04:05,640 ‫And speaking of the action, the action is simply an object 75 00:04:05,640 --> 00:04:09,630 ‫that describes how state should be updated. 76 00:04:09,630 --> 00:04:14,010 ‫It usually contains an action type and a so-called payload 77 00:04:14,010 --> 00:04:16,710 ‫which is basically input data. 78 00:04:16,710 --> 00:04:20,490 ‫And it's based on this action type and payload 79 00:04:20,490 --> 00:04:22,620 ‫that the reducer will then determine 80 00:04:22,620 --> 00:04:25,473 ‫how exactly to create the next state. 81 00:04:26,370 --> 00:04:30,270 ‫And now the final piece of the puzzle is this. 82 00:04:30,270 --> 00:04:33,930 ‫How do we actually trigger a state update? 83 00:04:33,930 --> 00:04:38,640 ‫Well, that's where the dispatch function comes into play. 84 00:04:38,640 --> 00:04:43,410 ‫So useReducer will return a so-called dispatch function 85 00:04:43,410 --> 00:04:45,690 ‫which is a function that we can use 86 00:04:45,690 --> 00:04:48,150 ‫to trigger state updates. 87 00:04:48,150 --> 00:04:52,110 ‫So instead of using setState to update state, 88 00:04:52,110 --> 00:04:56,370 ‫we now use the dispatch function in order to send an action 89 00:04:56,370 --> 00:04:57,900 ‫from the event handler 90 00:04:57,900 --> 00:05:01,500 ‫where we're calling dispatch to the reducer. 91 00:05:01,500 --> 00:05:03,300 ‫And as we already know, 92 00:05:03,300 --> 00:05:05,700 ‫the reducer will then use this action 93 00:05:05,700 --> 00:05:07,653 ‫to compute the next state. 94 00:05:08,730 --> 00:05:13,410 ‫Okay, so these are all the pieces that need to fit together 95 00:05:13,410 --> 00:05:17,370 ‫in order to effectively use the useReducer hook. 96 00:05:17,370 --> 00:05:21,510 ‫So an action object, a dispatch function, a reducer, 97 00:05:21,510 --> 00:05:23,880 ‫and a state object. 98 00:05:23,880 --> 00:05:26,610 ‫But now let's also look at the diagram 99 00:05:26,610 --> 00:05:30,870 ‫to really see how all of these pieces actually fit together 100 00:05:30,870 --> 00:05:32,613 ‫in order to update state. 101 00:05:33,750 --> 00:05:34,890 ‫So let's say 102 00:05:34,890 --> 00:05:38,220 ‫that we're in an event handler in some component 103 00:05:38,220 --> 00:05:41,193 ‫and we now need to update some state. 104 00:05:42,030 --> 00:05:45,660 ‫So what do we do? Well, that's right. 105 00:05:45,660 --> 00:05:47,400 ‫We call the dispatch function 106 00:05:47,400 --> 00:05:50,190 ‫that we got back from useReducer 107 00:05:50,190 --> 00:05:54,870 ‫in order to dispatch an action to the reducer. 108 00:05:54,870 --> 00:05:57,570 ‫And this action, as we learned before, 109 00:05:57,570 --> 00:06:01,950 ‫is an object that contains information for the reducer. 110 00:06:01,950 --> 00:06:04,680 ‫So information about how the reducer 111 00:06:04,680 --> 00:06:06,930 ‫should update the state. 112 00:06:06,930 --> 00:06:10,269 ‫In this case, the action type is updateDay 113 00:06:10,269 --> 00:06:14,550 ‫and the payload is 23, which probably means that the reducer 114 00:06:14,550 --> 00:06:17,910 ‫will set the day state to 23. 115 00:06:17,910 --> 00:06:21,780 ‫Now, the object doesn't need to have this exact shape 116 00:06:21,780 --> 00:06:24,840 ‫with a type in the payload, but it's a standard 117 00:06:24,840 --> 00:06:28,440 ‫that has been adopted by most developers. 118 00:06:28,440 --> 00:06:32,580 ‫Now basically, the reducer takes in this action 119 00:06:32,580 --> 00:06:34,800 ‫together with the current state 120 00:06:34,800 --> 00:06:38,760 ‫and it will then return a brand new state object 121 00:06:38,760 --> 00:06:41,280 ‫which we usually call the next state 122 00:06:41,280 --> 00:06:43,710 ‫in the context of reducers. 123 00:06:43,710 --> 00:06:45,540 ‫And as always with state, 124 00:06:45,540 --> 00:06:48,840 ‫updating state will then trigger a re-render 125 00:06:48,840 --> 00:06:51,240 ‫of the component instance. 126 00:06:51,240 --> 00:06:54,300 ‫Now, if you're wondering why the reducer function 127 00:06:54,300 --> 00:06:56,730 ‫is actually called a reducer, 128 00:06:56,730 --> 00:06:59,580 ‫the answer is that it's because it follows 129 00:06:59,580 --> 00:07:04,140 ‫the exact same idea as the array reduce method. 130 00:07:04,140 --> 00:07:06,540 ‫So just like the reduce method 131 00:07:06,540 --> 00:07:10,860 ‫accumulates all array values into one single value, 132 00:07:10,860 --> 00:07:14,430 ‫the React reducer accumulates all actions 133 00:07:14,430 --> 00:07:17,133 ‫into one single state over time. 134 00:07:18,120 --> 00:07:20,910 ‫Okay now, behind the scenes, 135 00:07:20,910 --> 00:07:24,510 ‫the dispatch function has access to the reducer 136 00:07:24,510 --> 00:07:29,100 ‫because we passed it into the useReducer hook, right? 137 00:07:29,100 --> 00:07:33,330 ‫So dispatch is really coordinating this whole thing 138 00:07:33,330 --> 00:07:37,800 ‫and also giving the reducer access to the current state. 139 00:07:37,800 --> 00:07:40,530 ‫And now to understand this even better, 140 00:07:40,530 --> 00:07:42,760 ‫let's compare the mechanism of useReducer 141 00:07:43,710 --> 00:07:46,713 ‫with a much simpler useState mechanism. 142 00:07:47,550 --> 00:07:52,380 ‫So when we use useState, we get back a setter function 143 00:07:52,380 --> 00:07:55,230 ‫and let's just call it setState. 144 00:07:55,230 --> 00:07:57,960 ‫And then when we want to update state, 145 00:07:57,960 --> 00:08:02,280 ‫we just passed the new updated state value that we want 146 00:08:02,280 --> 00:08:05,160 ‫and React will simply update the state 147 00:08:05,160 --> 00:08:08,940 ‫which in turn will trigger the re-render. 148 00:08:08,940 --> 00:08:12,270 ‫So it's a lot simpler and more straightforward 149 00:08:12,270 --> 00:08:17,270 ‫than useReducer, but since useReducer solves the problems 150 00:08:17,280 --> 00:08:19,590 ‫that we saw earlier in this lecture, 151 00:08:19,590 --> 00:08:22,260 ‫it's a great choice in many situations, 152 00:08:22,260 --> 00:08:26,130 ‫even though it's a bit more complicated to set up. 153 00:08:26,130 --> 00:08:30,750 ‫But we will talk more about the big advantages of useReducer 154 00:08:30,750 --> 00:08:34,443 ‫and also when to use it later in the section. 155 00:08:35,400 --> 00:08:38,130 ‫Now, I understand that this whole idea 156 00:08:38,130 --> 00:08:41,550 ‫of dispatching actions and writing reducers 157 00:08:41,550 --> 00:08:44,850 ‫is super confusing in the beginning. 158 00:08:44,850 --> 00:08:47,280 ‫I know because I do remember 159 00:08:47,280 --> 00:08:50,460 ‫how confused I was back in the day. 160 00:08:50,460 --> 00:08:54,210 ‫And so let me show you now a really helpful analogy 161 00:08:54,210 --> 00:08:56,640 ‫that made all this really clear to me 162 00:08:56,640 --> 00:08:58,713 ‫when I first learned about this. 163 00:09:00,690 --> 00:09:04,680 ‫So imagine that you needed to take $5,000 164 00:09:04,680 --> 00:09:07,800 ‫out of your bank account for some reason. 165 00:09:07,800 --> 00:09:10,380 ‫Now, since this is a large amount, 166 00:09:10,380 --> 00:09:12,960 ‫you can't just do it from an ATM, 167 00:09:12,960 --> 00:09:17,160 ‫so you need to go physically to a bank. 168 00:09:17,160 --> 00:09:19,110 ‫Now, once you are at the bank, 169 00:09:19,110 --> 00:09:22,590 ‫how do you actually get those $5,000? 170 00:09:22,590 --> 00:09:25,440 ‫Do you walk straight into the bank's vault, 171 00:09:25,440 --> 00:09:28,770 ‫grab the cash, and then go home? 172 00:09:28,770 --> 00:09:31,560 ‫Well, I don't think so, right? 173 00:09:31,560 --> 00:09:34,560 ‫That's usually not how it works. 174 00:09:34,560 --> 00:09:37,920 ‫How it does work is that you go into the bank 175 00:09:37,920 --> 00:09:41,670 ‫and there you'll find a person sitting at a desk 176 00:09:41,670 --> 00:09:44,070 ‫ready to assist you. 177 00:09:44,070 --> 00:09:46,230 ‫Now, when you arrive at the bank, 178 00:09:46,230 --> 00:09:49,530 ‫you already know how much cash you want to withdraw 179 00:09:49,530 --> 00:09:51,540 ‫and from what account number. 180 00:09:51,540 --> 00:09:54,270 ‫And so you walk right to the person 181 00:09:54,270 --> 00:09:58,320 ‫and tell them that you would like to withdraw $5,000 182 00:09:58,320 --> 00:10:02,760 ‫from account 923577 for example. 183 00:10:02,760 --> 00:10:05,550 ‫What happens then is that usually the person 184 00:10:05,550 --> 00:10:08,280 ‫will type something into his computer, 185 00:10:08,280 --> 00:10:11,910 ‫check if you actually have the cash in your account, 186 00:10:11,910 --> 00:10:14,790 ‫and if so, he goes to the bank's vault, 187 00:10:14,790 --> 00:10:19,080 ‫and gets the money to finally hand it over to you. 188 00:10:19,080 --> 00:10:22,470 ‫It's your money after all, right? 189 00:10:22,470 --> 00:10:26,580 ‫But note the big difference between this real version 190 00:10:26,580 --> 00:10:29,130 ‫and the previous version of the story 191 00:10:29,130 --> 00:10:32,340 ‫where you just grabbed the cash yourself. 192 00:10:32,340 --> 00:10:35,940 ‫In this real version, you told the person what to do 193 00:10:35,940 --> 00:10:38,760 ‫and how to do it and he then got the money 194 00:10:38,760 --> 00:10:41,220 ‫for you on your behalf, 195 00:10:41,220 --> 00:10:44,760 ‫and so you didn't take the money directly yourself. 196 00:10:44,760 --> 00:10:47,460 ‫And that's a huge difference. 197 00:10:47,460 --> 00:10:51,000 ‫So does this maybe start to sound familiar? 198 00:10:51,000 --> 00:10:52,440 ‫Well, I hope it does. 199 00:10:52,440 --> 00:10:56,760 ‫And so let's now bring this analogy back to useReducer 200 00:10:56,760 --> 00:11:00,720 ‫and identify what each of these pieces represents 201 00:11:00,720 --> 00:11:03,390 ‫in the useReducer mechanism. 202 00:11:03,390 --> 00:11:07,350 ‫And let's start with the most important thing, the state. 203 00:11:07,350 --> 00:11:11,430 ‫So what do you think the state is in this analogy? 204 00:11:11,430 --> 00:11:15,390 ‫Well, the state is represented by the bank's vault 205 00:11:15,390 --> 00:11:19,410 ‫because this is where the relevant data, so the money, 206 00:11:19,410 --> 00:11:22,380 ‫is stored and also updated. 207 00:11:22,380 --> 00:11:25,500 ‫So the vault is what needs to be updated, 208 00:11:25,500 --> 00:11:28,140 ‫and so that's our state. 209 00:11:28,140 --> 00:11:31,140 ‫Nice, so with that out of the way, 210 00:11:31,140 --> 00:11:35,190 ‫let's think about how the money is taken from the vault. 211 00:11:35,190 --> 00:11:39,630 ‫So about how state is actually updated. 212 00:11:39,630 --> 00:11:41,970 ‫So starting from the beginning, 213 00:11:41,970 --> 00:11:44,820 ‫what do you think the customer going to the bank 214 00:11:44,820 --> 00:11:47,280 ‫represents in this analogy? 215 00:11:47,280 --> 00:11:49,680 ‫Well, the customer going to the bank 216 00:11:49,680 --> 00:11:53,430 ‫and requesting the money is clearly the dispatcher 217 00:11:53,430 --> 00:11:58,170 ‫because it is who is requesting the state update, right? 218 00:11:58,170 --> 00:12:01,140 ‫And they're doing so by going to the person 219 00:12:01,140 --> 00:12:04,443 ‫and requesting to withdraw the $5,000. 220 00:12:05,310 --> 00:12:10,110 ‫So what is the reducer here and what is the action? 221 00:12:10,110 --> 00:12:12,540 ‫Well, the reducer is going to be 222 00:12:12,540 --> 00:12:14,760 ‫the person working at the bank 223 00:12:14,760 --> 00:12:18,900 ‫because that's the one who actually makes the update. 224 00:12:18,900 --> 00:12:21,780 ‫In this case, it's the one who goes to the vault 225 00:12:21,780 --> 00:12:23,730 ‫to get your money. 226 00:12:23,730 --> 00:12:27,270 ‫But how does the person know how much money to take 227 00:12:27,270 --> 00:12:29,280 ‫and from what account? 228 00:12:29,280 --> 00:12:31,320 ‫They know because you told him so 229 00:12:31,320 --> 00:12:34,170 ‫exactly in your request message. 230 00:12:34,170 --> 00:12:38,910 ‫And so that request message is clearly the action. 231 00:12:38,910 --> 00:12:42,810 ‫In this example, the action can be modeled like this. 232 00:12:42,810 --> 00:12:45,450 ‫With the action type being withdraw 233 00:12:45,450 --> 00:12:48,930 ‫and the payload being the data about the withdrawal 234 00:12:48,930 --> 00:12:50,850 ‫that you want to make. 235 00:12:50,850 --> 00:12:53,700 ‫So summarizing, you went into the bank 236 00:12:53,700 --> 00:12:56,220 ‫with a clear action in mind, 237 00:12:56,220 --> 00:12:59,940 ‫you then dispatched that action to the reducer, 238 00:12:59,940 --> 00:13:03,540 ‫so to the person working there who took the action, 239 00:13:03,540 --> 00:13:05,070 ‫and followed the instructions 240 00:13:05,070 --> 00:13:08,580 ‫to take the right amount of money from your account. 241 00:13:08,580 --> 00:13:10,470 ‫So from state. 242 00:13:10,470 --> 00:13:14,790 ‫he then gave you your money finishing this cycle. 243 00:13:14,790 --> 00:13:17,970 ‫So you did not go directly into the vault 244 00:13:17,970 --> 00:13:19,620 ‫and took your money. 245 00:13:19,620 --> 00:13:22,830 ‫Instead, you had the person, as a middleman, 246 00:13:22,830 --> 00:13:25,050 ‫who knows a lot better than you 247 00:13:25,050 --> 00:13:28,650 ‫how to perform different actions on the vault. 248 00:13:28,650 --> 00:13:31,860 ‫So he knows how to deposit, how to withdraw, 249 00:13:31,860 --> 00:13:34,320 ‫how to open and close an account, 250 00:13:34,320 --> 00:13:37,260 ‫how to request a loan, and more. 251 00:13:37,260 --> 00:13:38,940 ‫And he does all this 252 00:13:38,940 --> 00:13:42,420 ‫without you having to worry about the details. 253 00:13:42,420 --> 00:13:45,390 ‫So exactly like a reducer function, 254 00:13:45,390 --> 00:13:48,090 ‫which also decouples and abstracts 255 00:13:48,090 --> 00:13:51,780 ‫all the state updating logic away from you, so that you 256 00:13:51,780 --> 00:13:55,263 ‫can have clean and easy to understand components. 257 00:13:56,250 --> 00:13:59,610 ‫Okay, so I hope that this now made the relationship 258 00:13:59,610 --> 00:14:04,610 ‫between dispatcher, reducer, action, and state crystal clear 259 00:14:05,100 --> 00:14:07,470 ‫and you will get plenty of opportunities 260 00:14:07,470 --> 00:14:10,443 ‫throughout this section to practice all this.