1 00:00:01,170 --> 00:00:04,620 ‫Let's now convert the account state slice 2 00:00:04,620 --> 00:00:06,633 ‫into Redux Toolkit. 3 00:00:08,100 --> 00:00:10,560 ‫So let's close the customer slice 4 00:00:10,560 --> 00:00:13,953 ‫and actually open up the account slice. 5 00:00:14,970 --> 00:00:19,620 ‫Now remember how we had already organized all our code here 6 00:00:19,620 --> 00:00:22,530 ‫into this concept of slices. 7 00:00:22,530 --> 00:00:25,980 ‫So we have the initial state, we have the reducer 8 00:00:25,980 --> 00:00:28,500 ‫and we also have the action creators 9 00:00:28,500 --> 00:00:30,420 ‫down there in this file. 10 00:00:30,420 --> 00:00:35,420 ‫And so now with Redux Toolkit, this idea of slices actually 11 00:00:35,913 --> 00:00:39,750 ‫really got baked into Redux itself. 12 00:00:39,750 --> 00:00:43,260 ‫So we now have this function called createSlice 13 00:00:43,260 --> 00:00:46,773 ‫which we can import from Redux Toolkit. 14 00:00:47,880 --> 00:00:49,413 ‫So let's do that. 15 00:00:50,730 --> 00:00:54,257 ‫So import, createSlice, just like this. 16 00:00:57,710 --> 00:01:01,290 ‫And so this create slice function here gives us 17 00:01:01,290 --> 00:01:03,390 ‫three big benefits. 18 00:01:03,390 --> 00:01:07,290 ‫First of all, it'll automatically create action creators 19 00:01:07,290 --> 00:01:09,540 ‫from our reducers. 20 00:01:09,540 --> 00:01:13,830 ‫Second, it makes writing these reducers a lot easier 21 00:01:13,830 --> 00:01:17,490 ‫because we no longer need that switch statement 22 00:01:17,490 --> 00:01:21,180 ‫and also the default case is automatically handled. 23 00:01:21,180 --> 00:01:24,450 ‫And third, we can actually mutate now, 24 00:01:24,450 --> 00:01:27,210 ‫our state inside reducers. 25 00:01:27,210 --> 00:01:30,120 ‫So just as we have learned about previously 26 00:01:30,120 --> 00:01:33,270 ‫when we first talked about Redux Toolkit. 27 00:01:33,270 --> 00:01:36,750 ‫Now remember how behind the scenes this will then use 28 00:01:36,750 --> 00:01:41,670 ‫a library called Immer which will actually convert our logic 29 00:01:41,670 --> 00:01:43,860 ‫back to immutable logic. 30 00:01:43,860 --> 00:01:47,190 ‫So behind the scenes, Redux still requires 31 00:01:47,190 --> 00:01:49,380 ‫this kind of logic right here 32 00:01:49,380 --> 00:01:51,840 ‫where we do not mute data state, 33 00:01:51,840 --> 00:01:56,070 ‫but we will now be able to convert this kind of logic here 34 00:01:56,070 --> 00:01:58,560 ‫to a mutating logic. 35 00:01:58,560 --> 00:02:02,520 ‫And from my experience, this last point is actually 36 00:02:02,520 --> 00:02:06,630 ‫the biggest advantage of using Redux Toolkit over 37 00:02:06,630 --> 00:02:08,520 ‫what we have been doing before. 38 00:02:08,520 --> 00:02:12,450 ‫About these other points, I believe that React Toolkit 39 00:02:12,450 --> 00:02:16,050 ‫actually forces us into a pattern that's a bit too 40 00:02:16,050 --> 00:02:19,950 ‫opinionated in my opinion, but well, 41 00:02:19,950 --> 00:02:22,920 ‫that's just the recommended way of using 42 00:02:22,920 --> 00:02:25,470 ‫and learning Redux right now. 43 00:02:25,470 --> 00:02:27,600 ‫And so as I said in the beginning 44 00:02:27,600 --> 00:02:30,660 ‫let's now convert all of this. 45 00:02:30,660 --> 00:02:34,503 ‫Now actually let's call this here again, just initial state. 46 00:02:37,440 --> 00:02:39,000 ‫Okay. 47 00:02:39,000 --> 00:02:43,590 ‫So this object we will actually keep, but the rest, 48 00:02:43,590 --> 00:02:44,973 ‫let's now comment it out. 49 00:02:47,280 --> 00:02:51,990 ‫And now here we get these errors, but that's no problem. 50 00:02:51,990 --> 00:02:55,200 ‫Let's actually make this bigger now and then split 51 00:02:55,200 --> 00:02:59,580 ‫the window so that we can see our old reducer here 52 00:02:59,580 --> 00:03:02,490 ‫while we are working on the new ones. 53 00:03:02,490 --> 00:03:05,880 ‫So this is pretty helpful for converting. 54 00:03:05,880 --> 00:03:08,610 ‫Now in the future, you will then of course, 55 00:03:08,610 --> 00:03:11,370 ‫if you choose to use Redux Toolkit, 56 00:03:11,370 --> 00:03:13,620 ‫write this without converting. 57 00:03:13,620 --> 00:03:16,470 ‫So you will not first write it this way 58 00:03:16,470 --> 00:03:19,650 ‫and then converting it to Redux Toolkit. 59 00:03:19,650 --> 00:03:22,233 ‫So you will just do what we do right now. 60 00:03:23,100 --> 00:03:27,600 ‫And so that is to call or createSlice function 61 00:03:27,600 --> 00:03:32,190 ‫which then accepts, again, an object of options. 62 00:03:32,190 --> 00:03:35,273 ‫And so this will then in the end, return a slice, 63 00:03:35,273 --> 00:03:39,187 ‫which we can call in this case the accountSlice. 64 00:03:41,700 --> 00:03:44,790 ‫So what do we need to pass in here? 65 00:03:44,790 --> 00:03:49,300 ‫Well, first of all, the name of the slice, which is account. 66 00:03:52,320 --> 00:03:55,530 ‫Then next up, the initial state. 67 00:03:55,530 --> 00:03:58,140 ‫So it's a property called initialState 68 00:03:58,140 --> 00:04:00,540 ‫where we then need to pass an initial state. 69 00:04:00,540 --> 00:04:04,050 ‫And so since in our case, this has the same name, 70 00:04:04,050 --> 00:04:05,907 ‫that's the same as writing this. 71 00:04:05,907 --> 00:04:10,440 ‫And then finally we need to pass in our reducers. 72 00:04:10,440 --> 00:04:14,130 ‫So this time, we will have basically multiple reducers. 73 00:04:14,130 --> 00:04:17,763 ‫One reducer for each of these actions here. 74 00:04:19,200 --> 00:04:22,563 ‫Okay? And so let's start writing on those. 75 00:04:24,060 --> 00:04:28,017 ‫So the first one is called deposit, and it is a function 76 00:04:28,017 --> 00:04:33,017 ‫that again, receives the current state and the action. 77 00:04:34,050 --> 00:04:37,864 ‫And notice how this deposit is basically the second part 78 00:04:37,864 --> 00:04:40,710 ‫of the string that we had right here. 79 00:04:40,710 --> 00:04:45,303 ‫So the name is account and then /deposit, which is this one. 80 00:04:47,130 --> 00:04:51,720 ‫So this deposit is also exactly the name 81 00:04:51,720 --> 00:04:56,403 ‫of the action creator that we had here before, right? 82 00:04:58,050 --> 00:05:01,530 ‫But anyway, let's now write our logic here. 83 00:05:01,530 --> 00:05:05,550 ‫And for now, we will do it without the asynchronous data. 84 00:05:05,550 --> 00:05:09,090 ‫So without the thunk that we had before. 85 00:05:09,090 --> 00:05:13,230 ‫So what do we then do in the deposit? 86 00:05:13,230 --> 00:05:16,200 ‫Well, all we do is to change the state. 87 00:05:16,200 --> 00:05:20,190 ‫And so now, remember, we can write mutating logic. 88 00:05:20,190 --> 00:05:25,190 ‫So we can do state.balance should become state.balance 89 00:05:28,080 --> 00:05:33,030 ‫plus the action.payload. 90 00:05:33,030 --> 00:05:36,300 ‫So the logic of receiving the current state 91 00:05:36,300 --> 00:05:38,970 ‫and the action that was dispatched is still 92 00:05:38,970 --> 00:05:42,183 ‫exactly the same way as in classic Redux. 93 00:05:43,650 --> 00:05:44,483 ‫All right. 94 00:05:44,483 --> 00:05:46,440 ‫So the only difference is that here, 95 00:05:46,440 --> 00:05:49,680 ‫we do no longer return the entire state now, 96 00:05:49,680 --> 00:05:52,800 ‫and also we don't write it like this. 97 00:05:52,800 --> 00:05:55,260 ‫So we don't create a new object where we then 98 00:05:55,260 --> 00:05:57,270 ‫set the balanced property. 99 00:05:57,270 --> 00:06:00,990 ‫Instead, we basically mutate the balanced property 100 00:06:00,990 --> 00:06:02,493 ‫that lives on the state. 101 00:06:03,600 --> 00:06:07,290 ‫And that's actually it for now, because remember, 102 00:06:07,290 --> 00:06:11,283 ‫we will leave that here for later, for the next lecture. 103 00:06:12,480 --> 00:06:14,253 ‫So let's keep going. 104 00:06:15,210 --> 00:06:20,210 ‫Withdraw, again, state and then the action. 105 00:06:22,410 --> 00:06:24,860 ‫And now here we will have something very similar. 106 00:06:26,640 --> 00:06:31,443 ‫So state.balance, and we could even write it like this. 107 00:06:32,610 --> 00:06:37,193 ‫So this is the same as state.balance minus action.payload. 108 00:06:41,760 --> 00:06:42,873 ‫Lets do the same here. 109 00:06:45,450 --> 00:06:48,183 ‫So plus equal like this. 110 00:06:49,110 --> 00:06:54,110 ‫Next up, let's do the loan state and action. 111 00:06:59,310 --> 00:07:02,973 ‫And not withdraw, but request loan. 112 00:07:04,260 --> 00:07:06,900 ‫So let's see what logic we had here. 113 00:07:06,900 --> 00:07:10,293 ‫So that's why I'm keeping this file open on the right side. 114 00:07:12,030 --> 00:07:14,220 ‫And so here, we need again to check 115 00:07:14,220 --> 00:07:16,653 ‫whether the loan already exists. 116 00:07:17,490 --> 00:07:21,390 ‫So if state.loan is equal zero, 117 00:07:21,390 --> 00:07:24,060 ‫then we don't want to do anything. 118 00:07:24,060 --> 00:07:26,580 ‫Now, in this case, not doing anything 119 00:07:26,580 --> 00:07:29,010 ‫is not returning the state 120 00:07:29,010 --> 00:07:32,040 ‫but instead simply returning from this function. 121 00:07:32,040 --> 00:07:35,700 ‫So we will not return anything, because remember, 122 00:07:35,700 --> 00:07:39,420 ‫in these new reducers, we no longer need to return 123 00:07:39,420 --> 00:07:40,830 ‫the entire state. 124 00:07:40,830 --> 00:07:42,987 ‫So we just modify what we want. 125 00:07:42,987 --> 00:07:46,620 ‫And so in this case, we don't want to modify anything. 126 00:07:46,620 --> 00:07:48,840 ‫So this is indeed a huge shift. 127 00:07:48,840 --> 00:07:52,080 ‫And if you were already used to writing it this way, 128 00:07:52,080 --> 00:07:55,050 ‫because you practice the use reducer hook, 129 00:07:55,050 --> 00:07:58,140 ‫then this is gonna be an even bigger shift. 130 00:07:58,140 --> 00:08:01,380 ‫But for total beginners, I believe that this 131 00:08:01,380 --> 00:08:03,510 ‫is actually a lot easier. 132 00:08:03,510 --> 00:08:05,820 ‫And this will become even more apparent 133 00:08:05,820 --> 00:08:09,870 ‫When we have, like, nested objects and arrays. 134 00:08:09,870 --> 00:08:14,870 ‫But in the other case, so in case that there is no loan yet, 135 00:08:15,300 --> 00:08:20,300 ‫then we can set the loan or actually state.loan 136 00:08:20,550 --> 00:08:25,550 ‫to action.payload.amount. 137 00:08:28,050 --> 00:08:30,150 ‫So just like before. 138 00:08:30,150 --> 00:08:32,850 ‫And let's actually copy what we have here. 139 00:08:32,850 --> 00:08:37,200 ‫There's no need of typing it all again. 140 00:08:37,200 --> 00:08:39,390 ‫So here it is actually an equal 141 00:08:39,390 --> 00:08:42,030 ‫because remember, we are now assigning. 142 00:08:42,030 --> 00:08:44,073 ‫So we are really overriding. 143 00:08:45,030 --> 00:08:50,030 ‫So here, we need then state dot, and the same thing here. 144 00:08:51,900 --> 00:08:55,503 ‫And we can have no commas, 'cause this is not an object. 145 00:08:56,723 --> 00:08:58,320 ‫And the same here. 146 00:08:58,320 --> 00:09:01,383 ‫And finally, let's add our last one. 147 00:09:02,520 --> 00:09:03,393 ‫So payLoan. 148 00:09:05,700 --> 00:09:08,553 ‫Again, state and action. 149 00:09:09,480 --> 00:09:13,410 ‫Then state.loan will become zero. 150 00:09:13,410 --> 00:09:18,410 ‫The state.loanPurpose will become empty 151 00:09:18,660 --> 00:09:22,173 ‫and the state balance will become, 152 00:09:23,250 --> 00:09:25,503 ‫and let's actually do minus equal again. 153 00:09:26,940 --> 00:09:31,940 ‫So basically, subtracting the state.loan from state.balance. 154 00:09:34,920 --> 00:09:38,490 ‫So this is of course just a normal JavaScript feature 155 00:09:38,490 --> 00:09:39,603 ‫that you already know. 156 00:09:40,590 --> 00:09:45,390 ‫All right, and now let's see what we actually have here. 157 00:09:45,390 --> 00:09:49,500 ‫So what the result of creating the slice is. 158 00:09:49,500 --> 00:09:51,960 ‫Because this is actually already it. 159 00:09:51,960 --> 00:09:55,290 ‫So this basically functions as our reducer 160 00:09:55,290 --> 00:09:57,750 ‫and as our action creators. 161 00:09:57,750 --> 00:10:01,743 ‫So let's now lock this to the console. 162 00:10:02,640 --> 00:10:04,473 ‫So accountSlice. 163 00:10:05,430 --> 00:10:07,260 ‫Then let's close this 164 00:10:07,260 --> 00:10:10,233 ‫and let's make this a bit smaller again. 165 00:10:12,210 --> 00:10:15,303 ‫So coming here to our console, let's reload. 166 00:10:16,650 --> 00:10:19,020 ‫And then, even though we have those errors here, 167 00:10:19,020 --> 00:10:21,390 ‫since we are importing this file, 168 00:10:21,390 --> 00:10:23,163 ‫then this code here is executed. 169 00:10:24,150 --> 00:10:26,253 ‫So let's see what we got here. 170 00:10:29,070 --> 00:10:32,610 ‫So we have first of all, our reducer here. 171 00:10:32,610 --> 00:10:35,400 ‫So which is this function that we will have to export 172 00:10:35,400 --> 00:10:38,550 ‫from here and then import in the store. 173 00:10:38,550 --> 00:10:43,440 ‫So this is basically our new reducer that the store needs. 174 00:10:43,440 --> 00:10:46,020 ‫And then here we have this other stuff 175 00:10:46,020 --> 00:10:48,900 ‫that we don't really need, but then notice 176 00:10:48,900 --> 00:10:50,940 ‫how we have these actions. 177 00:10:50,940 --> 00:10:54,660 ‫And so, these actions are exactly the four action creators 178 00:10:54,660 --> 00:10:56,670 ‫that we also had before. 179 00:10:56,670 --> 00:10:59,940 ‫So it's these four ones that we created here. 180 00:10:59,940 --> 00:11:03,633 ‫And so let's now export all of this stuff that we need. 181 00:11:04,560 --> 00:11:05,703 ‫So export. 182 00:11:07,230 --> 00:11:11,280 ‫And here, let's again use export default for the reducer. 183 00:11:11,280 --> 00:11:13,420 ‫So just like we had previously here 184 00:11:14,430 --> 00:11:19,323 ‫only that this time it is accountSlice.reducer. 185 00:11:20,550 --> 00:11:25,550 ‫And now it can also export these four functions here. 186 00:11:26,010 --> 00:11:28,053 ‫So once again, just like before. 187 00:11:29,460 --> 00:11:32,130 ‫So these are going to be our named exports. 188 00:11:32,130 --> 00:11:37,130 ‫And first of all, we need to take them out of that object. 189 00:11:38,160 --> 00:11:42,570 ‫So let's write accountSlice.actions 190 00:11:42,570 --> 00:11:46,020 ‫which is then this object of these four right here. 191 00:11:46,020 --> 00:11:48,090 ‫And so here we can destructure that 192 00:11:48,090 --> 00:11:51,120 ‫and then immediately export them. 193 00:11:51,120 --> 00:11:55,847 ‫So deposit, withdraw, requestLoan and payLoan. 194 00:11:58,770 --> 00:12:00,150 ‫Give it a save. 195 00:12:00,150 --> 00:12:03,963 ‫And it seems like we are back to working here. 196 00:12:04,920 --> 00:12:07,230 ‫Let's just reload once again. 197 00:12:07,230 --> 00:12:09,570 ‫This has something to do with the dev tools 198 00:12:09,570 --> 00:12:14,280 ‫which keeps happening, but just reloading it a few times, 199 00:12:14,280 --> 00:12:16,260 ‫usually fixes that. 200 00:12:16,260 --> 00:12:19,410 ‫Well, not this time apparently. 201 00:12:19,410 --> 00:12:23,193 ‫So let me close this and restart. 202 00:12:26,910 --> 00:12:27,933 ‫And there we go. 203 00:12:28,770 --> 00:12:32,970 ‫So that's a bit annoying, but sometimes that happens. 204 00:12:32,970 --> 00:12:36,030 ‫All right, so this part here about the customer 205 00:12:36,030 --> 00:12:39,570 ‫is still using the old Redux logic 206 00:12:39,570 --> 00:12:42,660 ‫but this here is already the new one. 207 00:12:42,660 --> 00:12:47,610 ‫Now actually, we need to temporarily also update our code 208 00:12:47,610 --> 00:12:51,750 ‫in these account operations, because now we don't want 209 00:12:51,750 --> 00:12:53,730 ‫to pass in the currency, 210 00:12:53,730 --> 00:12:56,343 ‫at least not while we are testing it. 211 00:12:57,660 --> 00:13:02,310 ‫So let's duplicate this and just remove the currency 212 00:13:02,310 --> 00:13:04,683 ‫from here just to test this for now. 213 00:13:07,050 --> 00:13:11,310 ‫So let's deposit and yeah, that works. 214 00:13:11,310 --> 00:13:12,750 ‫Nice. 215 00:13:12,750 --> 00:13:16,200 ‫Withdrawing should work as well. 216 00:13:16,200 --> 00:13:17,190 ‫There we go. 217 00:13:17,190 --> 00:13:21,600 ‫Let's request a loan. 218 00:13:21,600 --> 00:13:24,510 ‫And there, we have a problem. 219 00:13:24,510 --> 00:13:27,573 ‫So let's use our Redux dev tools. 220 00:13:28,740 --> 00:13:29,673 ‫So why not? 221 00:13:30,600 --> 00:13:33,540 ‫Well, this is a bit too small now, apparently. 222 00:13:33,540 --> 00:13:37,710 ‫Let's make these dev tools smaller again. 223 00:13:37,710 --> 00:13:39,390 ‫And so let's see what we have here 224 00:13:39,390 --> 00:13:43,290 ‫in our requestLoan action. 225 00:13:43,290 --> 00:13:46,920 ‫And by the way, notice here how the action names 226 00:13:46,920 --> 00:13:50,280 ‫are exactly the same ones as before. 227 00:13:50,280 --> 00:13:51,960 ‫So basically what this means 228 00:13:51,960 --> 00:13:56,430 ‫is that our creatSlice function combines this name 229 00:13:56,430 --> 00:13:58,740 ‫with the names of the reducers. 230 00:13:58,740 --> 00:14:03,740 ‫And so that's also why here we used this convention first. 231 00:14:04,200 --> 00:14:08,520 ‫So this is again, the modern way of writing action names. 232 00:14:08,520 --> 00:14:12,600 ‫And so Redux Toolkit follows exactly that as well. 233 00:14:12,600 --> 00:14:16,260 ‫So it composes these action names with the name 234 00:14:16,260 --> 00:14:19,293 ‫and with each of the reducer names as well. 235 00:14:20,580 --> 00:14:23,583 ‫But anyway, let's see why we get that problem here. 236 00:14:24,720 --> 00:14:26,433 ‫And here it is. 237 00:14:27,810 --> 00:14:30,990 ‫So again, we are now using the dev tools really 238 00:14:30,990 --> 00:14:32,970 ‫to understand some problems. 239 00:14:32,970 --> 00:14:37,170 ‫And so notice how the payload is now only 10,000 240 00:14:37,170 --> 00:14:39,000 ‫which was the requestedLoan 241 00:14:39,000 --> 00:14:42,330 ‫but the loanPurpose is nowhere to be found. 242 00:14:42,330 --> 00:14:46,320 ‫And so that's why requesting this loan didn't work. 243 00:14:46,320 --> 00:14:50,070 ‫And so let's now inspect this a little bit further. 244 00:14:50,070 --> 00:14:51,750 ‫And so what I want to to do now 245 00:14:51,750 --> 00:14:54,127 ‫is to log to the console now, 246 00:14:54,127 --> 00:14:56,770 ‫calling the requestLoan function 247 00:14:58,200 --> 00:15:02,163 ‫and then with the same values or something similar. 248 00:15:03,205 --> 00:15:06,150 ‫And so this is now simply an action creator. 249 00:15:06,150 --> 00:15:09,633 ‫All this will do is to return an action object. 250 00:15:10,800 --> 00:15:11,633 ‫Right. 251 00:15:11,633 --> 00:15:13,350 ‫And indeed, here it is. 252 00:15:13,350 --> 00:15:16,710 ‫And also indeed, we see that we only get 253 00:15:16,710 --> 00:15:20,700 ‫the first value here, but not the second one. 254 00:15:20,700 --> 00:15:24,030 ‫And the reason for this is that by default, 255 00:15:24,030 --> 00:15:27,240 ‫these automatically created action creators 256 00:15:27,240 --> 00:15:30,090 ‫only accept one single argument. 257 00:15:30,090 --> 00:15:33,420 ‫And so that then becomes action.payload. 258 00:15:33,420 --> 00:15:36,797 ‫That's why earlier we also got this not a number here, 259 00:15:36,797 --> 00:15:41,580 ‫'cause we were then trying to add this payload amount 260 00:15:41,580 --> 00:15:44,280 ‫to the loan, which didn't exist. 261 00:15:44,280 --> 00:15:47,943 ‫So the amount and the purpose were actually not received. 262 00:15:49,800 --> 00:15:50,633 ‫All right. 263 00:15:50,633 --> 00:15:53,430 ‫And so this is basically one of the limitations 264 00:15:53,430 --> 00:15:56,910 ‫of having this opinionated structure. 265 00:15:56,910 --> 00:16:00,540 ‫So if these action creators are automatically created, 266 00:16:00,540 --> 00:16:02,820 ‫then we cannot really configure them. 267 00:16:02,820 --> 00:16:06,630 ‫So we cannot easily make them receive two arguments. 268 00:16:06,630 --> 00:16:09,450 ‫However, luckily for us, there is a solution 269 00:16:09,450 --> 00:16:14,450 ‫for this that Redux Toolkit implemented for us. 270 00:16:14,640 --> 00:16:17,880 ‫So basically, what we have to do is to prepare 271 00:16:17,880 --> 00:16:21,480 ‫the data before it reaches the reducer. 272 00:16:21,480 --> 00:16:25,893 ‫And so what we have to do now here is to separate this. 273 00:16:26,970 --> 00:16:30,123 ‫So here, we now need a new object. 274 00:16:31,260 --> 00:16:34,500 ‫So let's open that there and then close that right here. 275 00:16:34,500 --> 00:16:37,263 ‫And then we need to call this function here, 276 00:16:38,160 --> 00:16:41,760 ‫just the reducer and then before that, 277 00:16:41,760 --> 00:16:46,200 ‫we need to prepare that data with a prepare method. 278 00:16:46,200 --> 00:16:49,650 ‫And so this method is where we can then accept 279 00:16:49,650 --> 00:16:51,630 ‫the data that we want. 280 00:16:51,630 --> 00:16:54,540 ‫So basically this can have the parameters 281 00:16:54,540 --> 00:16:58,200 ‫that earlier we had in our action creator. 282 00:16:58,200 --> 00:17:02,820 ‫So that's the amount and the purpose. 283 00:17:02,820 --> 00:17:03,653 ‫All right. 284 00:17:05,010 --> 00:17:07,380 ‫Now here we need a comma, I guess. 285 00:17:07,380 --> 00:17:08,970 ‫And yeah. 286 00:17:08,970 --> 00:17:13,080 ‫And so what we need to do here now is to return a new object 287 00:17:13,080 --> 00:17:17,103 ‫which will then become the payload object in the reducer. 288 00:17:18,090 --> 00:17:20,670 ‫So that's why this is called prepare. 289 00:17:20,670 --> 00:17:23,703 ‫So let me just write a code and then it will make sense. 290 00:17:24,930 --> 00:17:29,930 ‫So again, here we return a new payload basically. 291 00:17:30,180 --> 00:17:33,180 ‫And so this payload should become an object 292 00:17:33,180 --> 00:17:37,170 ‫with amount and purpose. 293 00:17:37,170 --> 00:17:40,350 ‫And so it is this object that we return from here, 294 00:17:40,350 --> 00:17:44,373 ‫which again, will then be the payload in the reducer. 295 00:17:45,450 --> 00:17:46,320 ‫All right. 296 00:17:46,320 --> 00:17:48,210 ‫And so this is what we need to do 297 00:17:48,210 --> 00:17:50,940 ‫if we want our creator to receive 298 00:17:50,940 --> 00:17:53,400 ‫more than just one argument. 299 00:17:53,400 --> 00:17:56,520 ‫Now, of course, we could also have configured it 300 00:17:56,520 --> 00:18:01,018 ‫in a way that we directly pass in that object. 301 00:18:01,018 --> 00:18:02,373 ‫Well, not here. 302 00:18:04,800 --> 00:18:06,840 ‫But here. 303 00:18:06,840 --> 00:18:09,240 ‫So again, we could have made it in a way 304 00:18:09,240 --> 00:18:13,290 ‫that we the data as an object right here, immediately. 305 00:18:13,290 --> 00:18:16,740 ‫And so then we would also have only one argument. 306 00:18:16,740 --> 00:18:19,440 ‫But if you do want these two arguments, 307 00:18:19,440 --> 00:18:21,480 ‫then this is the way to go. 308 00:18:21,480 --> 00:18:23,340 ‫And since I wanted to show you this, 309 00:18:23,340 --> 00:18:26,850 ‫we just did it this way and also this way, 310 00:18:26,850 --> 00:18:29,940 ‫we then didn't have to change anything 311 00:18:29,940 --> 00:18:32,010 ‫in our code right here. 312 00:18:32,010 --> 00:18:34,200 ‫So otherwise, then we would have to come back 313 00:18:34,200 --> 00:18:37,083 ‫to our React code and change that here. 314 00:18:38,130 --> 00:18:41,070 ‫And of course, these preparation can also include 315 00:18:41,070 --> 00:18:42,510 ‫some other steps. 316 00:18:42,510 --> 00:18:47,400 ‫So for example, later on in that other slice, 317 00:18:47,400 --> 00:18:50,940 ‫we will then also add the created add property 318 00:18:50,940 --> 00:18:53,400 ‫where we set the date. 319 00:18:53,400 --> 00:18:56,523 ‫So also what we did earlier in the action creator. 320 00:18:57,720 --> 00:19:00,633 ‫But anyway, this should now be back to working. 321 00:19:01,500 --> 00:19:02,823 ‫So let's check that. 322 00:19:10,020 --> 00:19:11,850 ‫And there we go. 323 00:19:11,850 --> 00:19:15,870 ‫And then paying it works just the same way. 324 00:19:15,870 --> 00:19:17,493 ‫Or actually, it doesn't. 325 00:19:19,860 --> 00:19:20,693 ‫Let's see. 326 00:19:22,350 --> 00:19:25,050 ‫So now we get 3000. 327 00:19:25,050 --> 00:19:29,130 ‫And so after paying, ah, it should go back. 328 00:19:29,130 --> 00:19:31,353 ‫So what's wrong here? 329 00:19:32,220 --> 00:19:35,100 ‫Ah, and I can see the problem already. 330 00:19:35,100 --> 00:19:38,730 ‫So here, we run into one of the pitfalls that comes 331 00:19:38,730 --> 00:19:42,480 ‫with the fact that we are now mutating our state. 332 00:19:42,480 --> 00:19:46,890 ‫So it has advantages, but it also has its problems. 333 00:19:46,890 --> 00:19:49,350 ‫So notice, how here in the very beginning 334 00:19:49,350 --> 00:19:51,390 ‫we set alone to zero. 335 00:19:51,390 --> 00:19:54,750 ‫And so then, here in this next line of code, 336 00:19:54,750 --> 00:19:56,880 ‫this is already zero. 337 00:19:56,880 --> 00:20:00,720 ‫And so then we simply subtract zero from the balance 338 00:20:00,720 --> 00:20:02,580 ‫which will not change it. 339 00:20:02,580 --> 00:20:05,250 ‫And so this now needs to come first. 340 00:20:05,250 --> 00:20:09,303 ‫So we now need to pay attention to the order of the code. 341 00:20:12,780 --> 00:20:14,463 ‫So let's try that again. 342 00:20:19,620 --> 00:20:23,640 ‫All right, now pay it back and beautiful. 343 00:20:23,640 --> 00:20:24,930 ‫Now that works. 344 00:20:24,930 --> 00:20:28,680 ‫And so we successfully converted now, 345 00:20:28,680 --> 00:20:33,030 ‫the slice that we had before to this one that fits 346 00:20:33,030 --> 00:20:36,690 ‫with the new philosophy of Redux Toolkit. 347 00:20:36,690 --> 00:20:39,510 ‫Now, if you want my personal opinion 348 00:20:39,510 --> 00:20:43,350 ‫I do actually prefer in a simple situation like this, 349 00:20:43,350 --> 00:20:45,750 ‫to write what we had earlier. 350 00:20:45,750 --> 00:20:48,150 ‫So I like this one more. 351 00:20:48,150 --> 00:20:51,360 ‫I think it's a bit more clear what's actually happening. 352 00:20:51,360 --> 00:20:54,510 ‫And it's not like a bit of black magic 353 00:20:54,510 --> 00:20:57,810 ‫as it seems like here, but that's just what happens 354 00:20:57,810 --> 00:21:01,260 ‫when you trade your do whatever you want approach 355 00:21:01,260 --> 00:21:04,833 ‫for an opinionated approach like Redux Toolkit. 356 00:21:06,388 --> 00:21:07,221 ‫All right. 357 00:21:07,221 --> 00:21:09,390 ‫What I do like a lot is of course 358 00:21:09,390 --> 00:21:12,150 ‫this way that we now configure the store. 359 00:21:12,150 --> 00:21:15,660 ‫So this is perfect and it's a lot easier. 360 00:21:15,660 --> 00:21:18,556 ‫But as you saw, we can if we want, 361 00:21:18,556 --> 00:21:22,050 ‫keep our slices in the way that we had them before. 362 00:21:22,050 --> 00:21:24,990 ‫So without using Redux Toolkit. 363 00:21:24,990 --> 00:21:28,590 ‫But there's also advantages to writing it like this. 364 00:21:28,590 --> 00:21:31,980 ‫And so as always, you need to decide for yourself 365 00:21:31,980 --> 00:21:34,650 ‫and on a case-to-case basis. 366 00:21:34,650 --> 00:21:36,270 ‫And with that being said, 367 00:21:36,270 --> 00:21:38,580 ‫let's now move on to the next lecture 368 00:21:38,580 --> 00:21:41,133 ‫and also implement the thunk.