1 00:00:01,170 --> 00:00:04,260 ‫Let's now learn how to dispatch actions 2 00:00:04,260 --> 00:00:08,193 ‫to the Redux store from within React components. 3 00:00:09,630 --> 00:00:13,050 ‫So still within our customers feature, 4 00:00:13,050 --> 00:00:16,503 ‫let's now open up the CreateCustomers component. 5 00:00:17,580 --> 00:00:21,270 ‫So here, if you want to take a minute to analyze the code, 6 00:00:21,270 --> 00:00:22,860 ‫feel free to do that, 7 00:00:22,860 --> 00:00:25,530 ‫but this one is actually pretty simple. 8 00:00:25,530 --> 00:00:29,040 ‫So all it is these two input fields 9 00:00:29,040 --> 00:00:32,130 ‫which are already controlled elements 10 00:00:32,130 --> 00:00:35,370 ‫with these two useState hooks right here. 11 00:00:35,370 --> 00:00:36,930 ‫And so all we're gonna do 12 00:00:36,930 --> 00:00:40,320 ‫is to complete this handleClick function 13 00:00:40,320 --> 00:00:43,383 ‫which is called when the user clicks right here, 14 00:00:44,250 --> 00:00:46,833 ‫so here on CREATE NEW CUSTOMER. 15 00:00:48,870 --> 00:00:52,050 ‫So let's actually make this small again 16 00:00:52,050 --> 00:00:53,793 ‫and place them side by side. 17 00:00:54,780 --> 00:00:58,830 ‫And here actually we don't need all of this, 18 00:00:58,830 --> 00:01:02,433 ‫and even the window is bigger than it has to be. 19 00:01:05,070 --> 00:01:06,120 ‫All right. 20 00:01:06,120 --> 00:01:08,820 ‫But anyway, it is in this function 21 00:01:08,820 --> 00:01:12,000 ‫where we will want to dispatch now an action 22 00:01:12,000 --> 00:01:14,013 ‫that will create the new customer. 23 00:01:15,330 --> 00:01:17,343 ‫So how do we do that? 24 00:01:18,240 --> 00:01:21,960 ‫So before, when we wanted to dispatch an action, 25 00:01:21,960 --> 00:01:26,010 ‫we called the dispatch method on the Redux store. 26 00:01:26,010 --> 00:01:27,270 ‫Remember that? 27 00:01:27,270 --> 00:01:31,110 ‫However, that's not how we do it inside React. 28 00:01:31,110 --> 00:01:34,560 ‫Instead, we get access to the dispatch function 29 00:01:34,560 --> 00:01:37,473 ‫by using the useDispatch hook. 30 00:01:38,340 --> 00:01:40,080 ‫So useDispatch, 31 00:01:40,080 --> 00:01:43,920 ‫which is a custom hook that was provided to us 32 00:01:43,920 --> 00:01:47,013 ‫by the React Redux package once again. 33 00:01:49,411 --> 00:01:50,244 ‫Okay. 34 00:01:50,244 --> 00:01:51,480 ‫And so all this will do 35 00:01:51,480 --> 00:01:55,290 ‫is to return the dispatch function to us. 36 00:01:55,290 --> 00:01:57,450 ‫And so this dispatch function 37 00:01:57,450 --> 00:02:02,100 ‫then of course works in exactly the same way as before. 38 00:02:02,100 --> 00:02:06,540 ‫And so now we can use that right here, 39 00:02:06,540 --> 00:02:10,560 ‫so to dispatch an action in this event handler, 40 00:02:10,560 --> 00:02:14,970 ‫but what action should that be and how should we do that? 41 00:02:14,970 --> 00:02:17,670 ‫Well, this is where our action creators 42 00:02:17,670 --> 00:02:19,323 ‫come into play again. 43 00:02:20,430 --> 00:02:25,430 ‫So let's open up here our customerSlice. 44 00:02:26,790 --> 00:02:31,530 ‫And notice how here we again have the createCustomer 45 00:02:31,530 --> 00:02:34,590 ‫and the updateName action creator function? 46 00:02:34,590 --> 00:02:38,190 ‫And so all we have to do is to now import this one 47 00:02:38,190 --> 00:02:39,483 ‫into our component. 48 00:02:40,800 --> 00:02:43,870 ‫So probably if we start typing 49 00:02:47,433 --> 00:02:48,510 ‫createCustomer, 50 00:02:48,510 --> 00:02:53,510 ‫then React will automatically import that for us. 51 00:02:53,730 --> 00:02:55,650 ‫Well, actually it didn't, 52 00:02:55,650 --> 00:02:59,313 ‫but that's not a problem because that's easy enough anyway. 53 00:03:00,210 --> 00:03:03,690 ‫So here remember that is a named export, 54 00:03:03,690 --> 00:03:05,703 ‫and so we need these curly braces. 55 00:03:06,960 --> 00:03:11,960 ‫So createCustomer from customerSlice. 56 00:03:13,140 --> 00:03:16,290 ‫And so remember that all we need here 57 00:03:16,290 --> 00:03:19,620 ‫is the customer's name and the national ID. 58 00:03:19,620 --> 00:03:22,080 ‫And we already have these, 59 00:03:22,080 --> 00:03:24,420 ‫so they're already in our state, 60 00:03:24,420 --> 00:03:29,420 ‫and so we just pass them in here and the national ID. 61 00:03:30,840 --> 00:03:34,410 ‫And probably here, before we even dispatch, 62 00:03:34,410 --> 00:03:37,710 ‫we should check if the values actually exist. 63 00:03:37,710 --> 00:03:40,590 ‫So if there is no full name 64 00:03:40,590 --> 00:03:45,590 ‫or if there is no national ID, then just return, 65 00:03:45,990 --> 00:03:47,670 ‫so then just do nothing. 66 00:03:47,670 --> 00:03:50,760 ‫But otherwise, we dispatch the action 67 00:03:50,760 --> 00:03:54,780 ‫that will be created by this action creator. 68 00:03:54,780 --> 00:03:56,670 ‫So let's test that. 69 00:03:56,670 --> 00:03:59,130 ‫And first, if we click here, like this, 70 00:03:59,130 --> 00:04:00,393 ‫then nothing happens. 71 00:04:01,410 --> 00:04:05,493 ‫But now let's test that and click here, 72 00:04:06,480 --> 00:04:08,790 ‫and beautiful. 73 00:04:08,790 --> 00:04:10,770 ‫So that worked, nice! 74 00:04:10,770 --> 00:04:15,770 ‫So now my name got immediately here into the user interface, 75 00:04:15,810 --> 00:04:19,950 ‫and so what I mentioned before did indeed happen. 76 00:04:19,950 --> 00:04:23,430 ‫So here we are reading that value from the store. 77 00:04:23,430 --> 00:04:27,360 ‫And so as soon as that value updated in the store, 78 00:04:27,360 --> 00:04:29,610 ‫so basically in this global state, 79 00:04:29,610 --> 00:04:32,253 ‫then this component has re-rendered. 80 00:04:33,420 --> 00:04:37,050 ‫Now here we could now clean the input fields, 81 00:04:37,050 --> 00:04:39,870 ‫but instead let's actually hide the form 82 00:04:39,870 --> 00:04:42,960 ‫because once the customer has been created, 83 00:04:42,960 --> 00:04:45,963 ‫there's no need to display that form anymore. 84 00:04:46,860 --> 00:04:49,260 ‫So let's close this one, 85 00:04:49,260 --> 00:04:51,600 ‫let's close our slice, 86 00:04:51,600 --> 00:04:54,960 ‫and then this one we also no longer need. 87 00:04:54,960 --> 00:04:57,870 ‫And so let's come to App.js, 88 00:04:57,870 --> 00:05:01,050 ‫so where all these four components are included. 89 00:05:01,050 --> 00:05:04,170 ‫And so now again, if there is no customer, 90 00:05:04,170 --> 00:05:06,360 ‫then we only want to display this one, 91 00:05:06,360 --> 00:05:09,120 ‫and otherwise, these three. 92 00:05:09,120 --> 00:05:11,670 ‫So that means that we need, again, 93 00:05:11,670 --> 00:05:13,410 ‫to get the information, 94 00:05:13,410 --> 00:05:16,830 ‫so to get the current state from the store 95 00:05:16,830 --> 00:05:18,930 ‫in this component. 96 00:05:18,930 --> 00:05:22,830 ‫So that's easy enough, we already know how that works. 97 00:05:22,830 --> 00:05:24,963 ‫So we use useSelector, 98 00:05:27,330 --> 00:05:30,120 ‫which receives this callback function, 99 00:05:30,120 --> 00:05:35,120 ‫and then here we say state.customer.fullName. 100 00:05:39,930 --> 00:05:41,730 ‫So let's store this in, 101 00:05:41,730 --> 00:05:45,167 ‫well, let's call it fullName this time, give it a safe, 102 00:05:48,120 --> 00:05:51,183 ‫and now here we just need some conditional rendering. 103 00:05:53,430 --> 00:05:58,430 ‫So let's say if fullName is equal the empty string, 104 00:06:01,650 --> 00:06:06,650 ‫then we want to render CreateCustomer, 105 00:06:07,380 --> 00:06:10,590 ‫but otherwise we want to render these three. 106 00:06:10,590 --> 00:06:15,450 ‫So we need to create a new fragment, close this, 107 00:06:15,450 --> 00:06:18,180 ‫and I think that this should work now. 108 00:06:18,180 --> 00:06:19,440 ‫And yeah... 109 00:06:19,440 --> 00:06:21,960 ‫So actually that form is gone, 110 00:06:21,960 --> 00:06:23,763 ‫but let's try from the beginning. 111 00:06:24,690 --> 00:06:28,290 ‫So now only the new customer form is displayed 112 00:06:28,290 --> 00:06:30,870 ‫but not the name of the customer 113 00:06:30,870 --> 00:06:33,453 ‫and the balance and the operations. 114 00:06:37,950 --> 00:06:40,020 ‫Yeah, beautiful. 115 00:06:40,020 --> 00:06:42,330 ‫So our application is (chuckles) 116 00:06:42,330 --> 00:06:45,783 ‫well, almost looking like a real bank application. 117 00:06:46,920 --> 00:06:47,910 ‫Well, not really, 118 00:06:47,910 --> 00:06:51,600 ‫but that's not the point in this application right here. 119 00:06:51,600 --> 00:06:54,870 ‫We're only working how to work with React 120 00:06:54,870 --> 00:06:56,850 ‫and Redux together. 121 00:06:56,850 --> 00:07:01,320 ‫And now next up, to keep practicing how to dispatch actions, 122 00:07:01,320 --> 00:07:04,500 ‫let's also work on this form right here, 123 00:07:04,500 --> 00:07:06,963 ‫so on these account operations. 124 00:07:08,310 --> 00:07:09,870 ‫So that's right here. 125 00:07:09,870 --> 00:07:13,860 ‫And here we do have a lot more code already, 126 00:07:13,860 --> 00:07:18,480 ‫so basically the entire code of all these input fields here, 127 00:07:18,480 --> 00:07:22,890 ‫and all that is all in this one big component. 128 00:07:22,890 --> 00:07:24,060 ‫So in the real world, 129 00:07:24,060 --> 00:07:27,060 ‫we would probably split this into multiple, 130 00:07:27,060 --> 00:07:31,620 ‫but here, as always, I wanted to keep it very simple. 131 00:07:31,620 --> 00:07:34,260 ‫But you should maybe now pause the video here 132 00:07:34,260 --> 00:07:36,510 ‫and, for like five minutes, 133 00:07:36,510 --> 00:07:40,770 ‫take a look at this code here and how it works. 134 00:07:40,770 --> 00:07:45,240 ‫So basically exactly what we're doing here now, okay? 135 00:07:45,240 --> 00:07:47,820 ‫But anyway, what this does 136 00:07:47,820 --> 00:07:51,060 ‫is basically to implement a graphical interface 137 00:07:51,060 --> 00:07:54,690 ‫for all the operations that we can do with the account. 138 00:07:54,690 --> 00:07:58,500 ‫So we can deposit, we can withdraw, request a loan, 139 00:07:58,500 --> 00:08:01,590 ‫and then pay it back, right? 140 00:08:01,590 --> 00:08:05,490 ‫So, for example, let's say we want to deposit 500. 141 00:08:05,490 --> 00:08:09,513 ‫Add that, then actually it's reflected here in this button. 142 00:08:10,620 --> 00:08:12,780 ‫So see how that is the same there? 143 00:08:12,780 --> 00:08:14,370 ‫And then once I click here, 144 00:08:14,370 --> 00:08:18,270 ‫of course I want to deposit this value, 145 00:08:18,270 --> 00:08:22,590 ‫and so that should then show up right here in the balance. 146 00:08:22,590 --> 00:08:23,760 ‫So this component here 147 00:08:23,760 --> 00:08:26,943 ‫shows us the current balance in our account. 148 00:08:28,620 --> 00:08:32,430 ‫So we already have the four event handler functions, 149 00:08:32,430 --> 00:08:35,733 ‫which is where we are going to dispatch our actions. 150 00:08:37,530 --> 00:08:42,530 ‫So each of them is linked to each of these four buttons. 151 00:08:44,040 --> 00:08:46,290 ‫So let's start with the first one. 152 00:08:46,290 --> 00:08:48,330 ‫And the first thing that we need to do 153 00:08:48,330 --> 00:08:51,960 ‫is to get access to our dispatch function. 154 00:08:51,960 --> 00:08:56,850 ‫And so, again, for that we use the useDispatch hook 155 00:08:56,850 --> 00:09:01,570 ‫and store the resulting function into the dispatch variable 156 00:09:04,080 --> 00:09:07,080 ‫which, of course, we could name anything that we want, 157 00:09:07,080 --> 00:09:09,753 ‫but this is the name that we are already used to. 158 00:09:10,740 --> 00:09:14,280 ‫So first of all, if there is no deposit amount, 159 00:09:14,280 --> 00:09:16,800 ‫then nothing should happen. 160 00:09:16,800 --> 00:09:20,010 ‫So just a normal guard clause right here. 161 00:09:20,010 --> 00:09:24,180 ‫And so now it is time to dispatch our action. 162 00:09:24,180 --> 00:09:27,270 ‫And once again, our action is going to come 163 00:09:27,270 --> 00:09:29,070 ‫from the action creator. 164 00:09:29,070 --> 00:09:33,690 ‫So in this case that is called deposit, 165 00:09:33,690 --> 00:09:37,050 ‫so coming from the accountSlice, 166 00:09:37,050 --> 00:09:41,945 ‫so this one right here. 167 00:09:41,945 --> 00:09:44,247 ‫And so all this one needs is the amount 168 00:09:44,247 --> 00:09:47,010 ‫and then it will automatically return 169 00:09:47,010 --> 00:09:48,390 ‫this object right here, 170 00:09:48,390 --> 00:09:52,257 ‫which is then gonna be dispatched into our store. 171 00:09:52,257 --> 00:09:54,450 ‫And so then the reducer receives that, 172 00:09:54,450 --> 00:09:58,200 ‫updates the store and then re-renders our components, 173 00:09:58,200 --> 00:10:00,213 ‫so just like we already know. 174 00:10:01,080 --> 00:10:06,080 ‫So here what we want to deposit is the deposit amount. 175 00:10:08,640 --> 00:10:09,930 ‫All right? 176 00:10:09,930 --> 00:10:14,460 ‫And then in the end, let's set the deposit amount 177 00:10:14,460 --> 00:10:16,773 ‫back to the initial state. 178 00:10:17,730 --> 00:10:19,800 ‫Now, we cannot really test this yet 179 00:10:19,800 --> 00:10:23,880 ‫because this balance component is not implemented yet, 180 00:10:23,880 --> 00:10:27,840 ‫and so we cannot see then the results of depositing, 181 00:10:27,840 --> 00:10:31,020 ‫but we will actually need the account state 182 00:10:31,020 --> 00:10:33,300 ‫here in this component as well, 183 00:10:33,300 --> 00:10:37,200 ‫so to display right here at the current loan. 184 00:10:37,200 --> 00:10:40,410 ‫And so let's then also import, 185 00:10:40,410 --> 00:10:43,350 ‫so let's read basically from the store 186 00:10:43,350 --> 00:10:44,703 ‫the current balance. 187 00:10:48,270 --> 00:10:51,120 ‫So actually let's get the entire account, 188 00:10:51,120 --> 00:10:53,943 ‫and then we use, again, useSelector. 189 00:10:55,050 --> 00:10:57,690 ‫So import that from React Redux, 190 00:10:57,690 --> 00:11:01,023 ‫and then, with the entire state, 191 00:11:02,010 --> 00:11:06,540 ‫we want to read state.account. 192 00:11:06,540 --> 00:11:08,970 ‫And we could also get access, of course, 193 00:11:08,970 --> 00:11:11,190 ‫to the entire state object. 194 00:11:11,190 --> 00:11:14,433 ‫So all we have to do would be to leave this like this. 195 00:11:15,690 --> 00:11:16,590 ‫All right? 196 00:11:16,590 --> 00:11:20,580 ‫And then here for now, let's just log the account 197 00:11:20,580 --> 00:11:21,573 ‫to the console. 198 00:11:23,100 --> 00:11:24,123 ‫So here it is, 199 00:11:25,440 --> 00:11:27,480 ‫and it is at zero right now. 200 00:11:27,480 --> 00:11:29,733 ‫But now if we deposit 100, 201 00:11:31,800 --> 00:11:33,840 ‫then that worked. 202 00:11:33,840 --> 00:11:36,630 ‫So our balance is now 100, 203 00:11:36,630 --> 00:11:41,190 ‫so we successfully dispatched our deposit action 204 00:11:41,190 --> 00:11:42,750 ‫to our reducer. 205 00:11:42,750 --> 00:11:45,180 ‫So everything worked in exactly the same 206 00:11:45,180 --> 00:11:47,880 ‫that I just explained earlier. 207 00:11:47,880 --> 00:11:49,500 ‫And so now all we have to do 208 00:11:49,500 --> 00:11:53,460 ‫is to basically repeat the same thing here three times. 209 00:11:53,460 --> 00:11:56,820 ‫And so if you want, you can pause the video right now here 210 00:11:56,820 --> 00:11:58,923 ‫and do that as a challenge. 211 00:12:00,870 --> 00:12:02,463 ‫So did you do that? 212 00:12:04,140 --> 00:12:06,900 ‫And if not, that's no problem at all. 213 00:12:06,900 --> 00:12:10,440 ‫But here, it's basically exactly the same as before. 214 00:12:10,440 --> 00:12:14,733 ‫So if there is no withdrawal amount, then just return. 215 00:12:16,470 --> 00:12:21,470 ‫And otherwise, we want to dispatch the withdraw function 216 00:12:21,990 --> 00:12:24,723 ‫which, again, comes from our accountSlice. 217 00:12:26,910 --> 00:12:31,380 ‫And by the way, here is also this currency field 218 00:12:31,380 --> 00:12:33,960 ‫which we're going to use a little bit later. 219 00:12:33,960 --> 00:12:37,173 ‫So that's why I haven't talked about that one yet. 220 00:12:39,300 --> 00:12:42,090 ‫So here we use the withdrawal amount 221 00:12:42,090 --> 00:12:47,090 ‫and then set withdrawal amount back to empty. 222 00:12:48,450 --> 00:12:52,383 ‫So we are at 100 now, so let's withdraw 50. 223 00:12:53,580 --> 00:12:55,160 ‫And nice! 224 00:12:55,160 --> 00:12:58,470 ‫So it got reduced to 100 minus 50, 225 00:12:58,470 --> 00:13:00,123 ‫which is, again, 50. 226 00:13:01,500 --> 00:13:04,230 ‫All right, next up we have the loan, 227 00:13:04,230 --> 00:13:06,780 ‫which is slightly more complex. 228 00:13:06,780 --> 00:13:11,070 ‫So for this one, we then need the loan amount 229 00:13:11,070 --> 00:13:12,600 ‫and the loan purpose, 230 00:13:12,600 --> 00:13:16,650 ‫which are the two arguments, I think, at least, 231 00:13:16,650 --> 00:13:20,403 ‫that the request loan function requires. 232 00:13:21,840 --> 00:13:24,420 ‫So first, let's check if they exist. 233 00:13:24,420 --> 00:13:29,420 ‫Loan amount or no loan purpose, then just return, 234 00:13:34,500 --> 00:13:39,500 ‫but otherwise dispatch requestLoan with these two. 235 00:13:40,320 --> 00:13:44,040 ‫And actually, VS Code is smart enough to understand, 236 00:13:44,040 --> 00:13:46,290 ‫so to read this function from the other file 237 00:13:46,290 --> 00:13:49,113 ‫and tell us that we need the amount and the purpose. 238 00:13:50,010 --> 00:13:51,600 ‫So that's very helpful, 239 00:13:51,600 --> 00:13:54,420 ‫and that's because actually behind the scenes, 240 00:13:54,420 --> 00:13:56,640 ‫VS Code is running TypeScript, 241 00:13:56,640 --> 00:14:00,780 ‫so analyzing all our file structure with TypeScript. 242 00:14:00,780 --> 00:14:04,350 ‫And finally, of course, also the loan purpose. 243 00:14:04,350 --> 00:14:09,350 ‫And then in the end, let's set them both back to empty. 244 00:14:15,030 --> 00:14:17,103 ‫All right, time to test this. 245 00:14:19,200 --> 00:14:20,883 ‫Let's say we want 1,000, 246 00:14:21,960 --> 00:14:25,200 ‫and here, buy a car. 247 00:14:25,200 --> 00:14:28,590 ‫So let's clean this, request the loan, 248 00:14:28,590 --> 00:14:31,770 ‫and yeah, it works, again. 249 00:14:31,770 --> 00:14:36,540 ‫And now here we want to actually display that loan. 250 00:14:36,540 --> 00:14:38,310 ‫So that's why I said earlier 251 00:14:38,310 --> 00:14:40,650 ‫that we actually need to read 252 00:14:40,650 --> 00:14:43,353 ‫the account data from the state. 253 00:14:45,390 --> 00:14:47,220 ‫So here actually, by convention 254 00:14:47,220 --> 00:14:50,763 ‫this should be called store not state. 255 00:14:51,930 --> 00:14:55,443 ‫And so here actually let's now de-structure the account. 256 00:14:56,670 --> 00:14:58,980 ‫So instead of having multiple selectors, 257 00:14:58,980 --> 00:15:02,973 ‫we will just select the account and then de-structure. 258 00:15:05,220 --> 00:15:09,150 ‫So we get the loan and let's recall that 259 00:15:09,150 --> 00:15:11,850 ‫to current loan, so... 260 00:15:11,850 --> 00:15:14,250 ‫Not recall, but rename. 261 00:15:14,250 --> 00:15:18,990 ‫And we get the loan purpose, 262 00:15:18,990 --> 00:15:21,330 ‫which here we really need to rename 263 00:15:21,330 --> 00:15:24,183 ‫because the state variable has that same name. 264 00:15:26,970 --> 00:15:27,870 ‫Okay. 265 00:15:27,870 --> 00:15:32,040 ‫And we also want the balance 266 00:15:32,040 --> 00:15:34,713 ‫so that we can display that down here. 267 00:15:36,722 --> 00:15:37,555 ‫Okay. 268 00:15:39,330 --> 00:15:40,460 ‫And... 269 00:15:43,320 --> 00:15:46,743 ‫Yeah, so right here is where we want to display that loan. 270 00:15:49,320 --> 00:15:50,620 ‫So that's the currentLoan. 271 00:15:52,050 --> 00:15:53,670 ‫And then inside parenthesis, 272 00:15:53,670 --> 00:15:56,997 ‫let's place the currentLoanPurpose. 273 00:15:58,925 --> 00:16:01,913 ‫And so then we get our $1,000 to buy a car. 274 00:16:04,470 --> 00:16:06,420 ‫So we still have our loan, 275 00:16:06,420 --> 00:16:10,320 ‫and so now all we have to do is to pay that back. 276 00:16:10,320 --> 00:16:13,110 ‫So here, it's the simplest one, 277 00:16:13,110 --> 00:16:16,980 ‫it's just pay loan without any arguments. 278 00:16:16,980 --> 00:16:20,670 ‫And then as we click, all of this goes away 279 00:16:20,670 --> 00:16:23,043 ‫and our balance goes back to 50. 280 00:16:25,050 --> 00:16:28,620 ‫And all of this here should actually only be visible 281 00:16:28,620 --> 00:16:31,203 ‫if there is a loan in the first place, 282 00:16:32,070 --> 00:16:35,253 ‫so currentLoan greater than zero. 283 00:16:37,110 --> 00:16:38,970 ‫And so now that disappeared. 284 00:16:38,970 --> 00:16:41,103 ‫So if we ask for a loan again, 285 00:16:44,010 --> 00:16:47,343 ‫then that appears and we can pay the loan back. 286 00:16:48,360 --> 00:16:49,193 ‫Nice! 287 00:16:50,790 --> 00:16:53,100 ‫So great work so far, 288 00:16:53,100 --> 00:16:55,620 ‫and I hope you are really getting the hang of it, 289 00:16:55,620 --> 00:16:59,280 ‫so working with Redux together with React. 290 00:16:59,280 --> 00:17:01,830 ‫So it's a bit of a different mindset, 291 00:17:01,830 --> 00:17:05,370 ‫but again, if you already know useReducer, 292 00:17:05,370 --> 00:17:08,040 ‫then this shouldn't be too bad. 293 00:17:08,040 --> 00:17:11,550 ‫But anyway, the only piece that is still missing here 294 00:17:11,550 --> 00:17:12,870 ‫is now this balance, 295 00:17:12,870 --> 00:17:16,050 ‫but let's leave that of course for the next video 296 00:17:16,050 --> 00:17:18,483 ‫as this one is already running pretty long.