1 00:00:01,260 --> 00:00:03,270 ‫Let's now use Redux Thunks 2 00:00:03,270 --> 00:00:06,960 ‫to implement a feature where the user can deposit money 3 00:00:06,960 --> 00:00:10,200 ‫into the account in a foreign currency, 4 00:00:10,200 --> 00:00:14,253 ‫which will then be converted by calling an external API. 5 00:00:15,810 --> 00:00:19,560 ‫So basically, whenever the user deposits some money here, 6 00:00:19,560 --> 00:00:23,250 ‫they can select which currency that money is. 7 00:00:23,250 --> 00:00:24,930 ‫So for example, euro. 8 00:00:24,930 --> 00:00:28,620 ‫And so if that currency is different from US dollar, 9 00:00:28,620 --> 00:00:33,360 ‫then we need to convert these 500 euros back to US dollars 10 00:00:33,360 --> 00:00:37,050 ‫before they actually get deposited into the account. 11 00:00:37,050 --> 00:00:41,370 ‫So before that deposit action is actually dispatched 12 00:00:41,370 --> 00:00:42,540 ‫to the store. 13 00:00:42,540 --> 00:00:46,800 ‫And so that's where now the Redux thunk comes into play. 14 00:00:46,800 --> 00:00:49,350 ‫So we will have that middleware sitting 15 00:00:49,350 --> 00:00:51,660 ‫between dispatching the action, 16 00:00:51,660 --> 00:00:53,370 ‫as we click here on the button, 17 00:00:53,370 --> 00:00:57,300 ‫and that action actually reaching the store. 18 00:00:57,300 --> 00:00:58,133 ‫Okay? 19 00:00:58,980 --> 00:01:01,470 ‫So in order to use this middleware, 20 00:01:01,470 --> 00:01:03,840 ‫we need to follow three steps. 21 00:01:03,840 --> 00:01:06,390 ‫First, we install the middleware package. 22 00:01:06,390 --> 00:01:10,050 ‫Then we apply that middleware to our store. 23 00:01:10,050 --> 00:01:12,720 ‫And finally, we use the middleware 24 00:01:12,720 --> 00:01:15,240 ‫in our action creator functions. 25 00:01:15,240 --> 00:01:17,643 ‫So let's now do them one by one. 26 00:01:18,630 --> 00:01:20,430 ‫So down here, let's say 27 00:01:20,430 --> 00:01:24,263 ‫npm install redux-thunk. 28 00:01:31,435 --> 00:01:32,490 ‫Okay. 29 00:01:32,490 --> 00:01:34,300 ‫And so then we can import 30 00:01:35,850 --> 00:01:38,250 ‫the thunk function, basically, 31 00:01:38,250 --> 00:01:43,250 ‫from redux-thunk that we just installed. 32 00:01:44,820 --> 00:01:46,533 ‫Not think, of course. 33 00:01:47,970 --> 00:01:51,873 ‫And here. Okay. 34 00:01:53,310 --> 00:01:56,490 ‫So we installed and brought that thunk in, 35 00:01:56,490 --> 00:01:59,970 ‫and so now we need to apply that to our store. 36 00:01:59,970 --> 00:02:02,550 ‫So here, in the createStore function, 37 00:02:02,550 --> 00:02:05,370 ‫we can pass in another argument. 38 00:02:05,370 --> 00:02:09,063 ‫And now here, we need to call the applyMiddleware function. 39 00:02:09,960 --> 00:02:14,960 ‫So applyMiddleware, which is also provided by Redux itself. 40 00:02:15,300 --> 00:02:18,180 ‫So see how that got imported here? 41 00:02:18,180 --> 00:02:21,450 ‫And now into this applyMiddleware function, 42 00:02:21,450 --> 00:02:23,790 ‫we pass in our middleware. 43 00:02:23,790 --> 00:02:26,070 ‫And so that is the thunk. 44 00:02:26,070 --> 00:02:29,010 ‫And so with this, we basically told Redux, 45 00:02:29,010 --> 00:02:30,750 ‫or we told our store, 46 00:02:30,750 --> 00:02:35,160 ‫that we want to use the thunk middleware in our application. 47 00:02:35,160 --> 00:02:38,430 ‫And so let's now go to the action creator 48 00:02:38,430 --> 00:02:42,000 ‫that is actually responsible for depositing money 49 00:02:42,000 --> 00:02:43,890 ‫in the account. 50 00:02:43,890 --> 00:02:46,923 ‫Now here, we lost our account. 51 00:02:48,540 --> 00:02:50,040 ‫So there we go. 52 00:02:50,040 --> 00:02:51,240 ‫But as I was saying, 53 00:02:51,240 --> 00:02:54,330 ‫now let's come into the account slice, 54 00:02:54,330 --> 00:02:59,330 ‫and in particular, here into this deposit action creator. 55 00:02:59,910 --> 00:03:02,700 ‫So here, besides accepting the amount, 56 00:03:02,700 --> 00:03:06,453 ‫we now also will need to accept the currency. 57 00:03:07,860 --> 00:03:12,270 ‫So as we dispatch the action of deposit, 58 00:03:12,270 --> 00:03:15,810 ‫we will not only pass in the amount, but also the currency. 59 00:03:15,810 --> 00:03:18,870 ‫And so let's actually immediately do that. 60 00:03:18,870 --> 00:03:19,923 ‫So right here. 61 00:03:20,940 --> 00:03:22,290 ‫So handleDeposit, 62 00:03:22,290 --> 00:03:25,110 ‫this is where we dispatch this action. 63 00:03:25,110 --> 00:03:27,840 ‫So where we call this action creator. 64 00:03:27,840 --> 00:03:31,890 ‫And so here now, we also need the currency. 65 00:03:31,890 --> 00:03:35,730 ‫And then let's also clear the currency 66 00:03:35,730 --> 00:03:37,023 ‫since we're already here. 67 00:03:38,430 --> 00:03:40,830 ‫And so that's it for now. 68 00:03:40,830 --> 00:03:43,920 ‫So again, now our action creator receives 69 00:03:43,920 --> 00:03:46,860 ‫not only the amount that should be deposited, 70 00:03:46,860 --> 00:03:50,013 ‫but also the currency that that amount is in. 71 00:03:50,970 --> 00:03:52,080 ‫Now, first of all, 72 00:03:52,080 --> 00:03:55,593 ‫if that currency is already US dollars, 73 00:03:58,860 --> 00:04:01,080 ‫so if that's USD, 74 00:04:01,080 --> 00:04:04,710 ‫and these values, they come right here 75 00:04:04,710 --> 00:04:06,720 ‫from these option values. 76 00:04:06,720 --> 00:04:10,620 ‫So we have USD for US dollars, 77 00:04:10,620 --> 00:04:13,500 ‫we have euro, and we have British pounds. 78 00:04:13,500 --> 00:04:16,380 ‫So these can be the three currencies. 79 00:04:16,380 --> 00:04:20,130 ‫So again, if the currency already is US dollars, 80 00:04:20,130 --> 00:04:22,020 ‫then there's nothing to convert. 81 00:04:22,020 --> 00:04:25,410 ‫And so then we can simply return the object, 82 00:04:25,410 --> 00:04:28,350 ‫so this action, just like before. 83 00:04:28,350 --> 00:04:31,230 ‫So in this case, nothing is going to change. 84 00:04:31,230 --> 00:04:33,240 ‫But if the currency is different, 85 00:04:33,240 --> 00:04:37,140 ‫then this is where we will need to make that API call. 86 00:04:37,140 --> 00:04:39,750 ‫And so for that, we need the thunk. 87 00:04:39,750 --> 00:04:42,330 ‫Now, this middleware is, in our code, 88 00:04:42,330 --> 00:04:44,490 ‫actually nothing special. 89 00:04:44,490 --> 00:04:47,070 ‫So the only thing that changes is that here, 90 00:04:47,070 --> 00:04:48,510 ‫in this action creator, 91 00:04:48,510 --> 00:04:51,300 ‫we will not return the action immediately, 92 00:04:51,300 --> 00:04:53,313 ‫but instead return a function. 93 00:04:55,050 --> 00:04:56,410 ‫So we can now return 94 00:04:57,720 --> 00:05:00,603 ‫a function like this. 95 00:05:01,440 --> 00:05:02,820 ‫And so then here, 96 00:05:02,820 --> 00:05:07,200 ‫when we dispatch right here 97 00:05:07,200 --> 00:05:10,320 ‫and then call the deposit action creator, 98 00:05:10,320 --> 00:05:14,460 ‫instead of ending up with the event object right here, 99 00:05:14,460 --> 00:05:16,740 ‫we will end up with a function. 100 00:05:16,740 --> 00:05:19,650 ‫So basically, we will dispatch a function. 101 00:05:19,650 --> 00:05:21,720 ‫And so when Redux sees that, 102 00:05:21,720 --> 00:05:25,050 ‫it will know that that function is the thunk. 103 00:05:25,050 --> 00:05:27,870 ‫And so it will then execute that function 104 00:05:27,870 --> 00:05:31,893 ‫and not immediately dispatch the action to the store. 105 00:05:33,750 --> 00:05:34,710 ‫All right? 106 00:05:34,710 --> 00:05:38,250 ‫So again, if we return a function here, 107 00:05:38,250 --> 00:05:42,150 ‫then Redux knows that this is the asynchronous action 108 00:05:42,150 --> 00:05:45,660 ‫that we want to execute before dispatching anything 109 00:05:45,660 --> 00:05:46,503 ‫to the store. 110 00:05:48,450 --> 00:05:51,660 ‫Now, in order to then later actually dispatch, 111 00:05:51,660 --> 00:05:55,050 ‫this function here that Redux will call internally 112 00:05:55,050 --> 00:05:58,680 ‫will get access to the dispatch function 113 00:05:58,680 --> 00:06:01,080 ‫and to the current state. 114 00:06:01,080 --> 00:06:03,903 ‫So by calling the getState function. 115 00:06:05,100 --> 00:06:06,030 ‫All right? 116 00:06:06,030 --> 00:06:08,730 ‫And so then here we can do our API call. 117 00:06:08,730 --> 00:06:10,950 ‫And then once we are finished with that, 118 00:06:10,950 --> 00:06:15,950 ‫we can then finally, in the end, return the action. 119 00:06:15,990 --> 00:06:19,413 ‫So this is where we will return the action in the end. 120 00:06:21,150 --> 00:06:25,230 ‫All right? And so let's do that API call here. 121 00:06:25,230 --> 00:06:28,260 ‫And we already used this API before. 122 00:06:28,260 --> 00:06:30,280 ‫So let's just grab the URL here 123 00:06:31,260 --> 00:06:32,523 ‫from the frankfurter. 124 00:06:34,320 --> 00:06:36,060 ‫And here it already is. 125 00:06:36,060 --> 00:06:39,153 ‫So like this. 126 00:06:40,920 --> 00:06:43,953 ‫And then you can just click here on Documentation. 127 00:06:45,000 --> 00:06:46,380 ‫And then all the way in the end, 128 00:06:46,380 --> 00:06:49,080 ‫we have this URL right here 129 00:06:49,080 --> 00:06:50,793 ‫from which we are going to fetch. 130 00:06:53,040 --> 00:06:54,273 ‫So just copy that. 131 00:06:58,740 --> 00:07:02,583 ‫And then here, let's do the fetch request. 132 00:07:03,990 --> 00:07:05,730 ‫And now here, we don't have the host, 133 00:07:05,730 --> 00:07:09,100 ‫so let's just grab this part here as well 134 00:07:13,230 --> 00:07:15,633 ‫and place that here. 135 00:07:16,950 --> 00:07:18,540 ‫All right. 136 00:07:18,540 --> 00:07:22,200 ‫Now here, we, of course, now need to replace these values 137 00:07:22,200 --> 00:07:26,133 ‫so the amount is the amount that we actually get. 138 00:07:28,830 --> 00:07:33,510 ‫So amount, and then from is this currency that we receive, 139 00:07:33,510 --> 00:07:37,023 ‫and the to currency is US dollars. 140 00:07:38,370 --> 00:07:39,203 ‫Now, of course, 141 00:07:39,203 --> 00:07:42,390 ‫we could also have defined the target currency 142 00:07:42,390 --> 00:07:44,253 ‫in the state, for example. 143 00:07:45,780 --> 00:07:49,320 ‫So we could create also here the currency 144 00:07:49,320 --> 00:07:50,850 ‫that the account is in. 145 00:07:50,850 --> 00:07:53,340 ‫And so then here we would have to check that. 146 00:07:53,340 --> 00:07:56,313 ‫But let's, once again, just keep it simple here. 147 00:07:58,860 --> 00:08:00,540 ‫All right. 148 00:08:00,540 --> 00:08:03,273 ‫Now, not sure why I have two fetches here. 149 00:08:05,490 --> 00:08:08,370 ‫But anyway, we will want to await this 150 00:08:08,370 --> 00:08:11,010 ‫and then the store the result 151 00:08:11,010 --> 00:08:12,720 ‫into the res variable. 152 00:08:12,720 --> 00:08:16,143 ‫And so then we make this an async function. 153 00:08:19,290 --> 00:08:20,223 ‫Okay? 154 00:08:22,170 --> 00:08:23,003 ‫Then, as always, 155 00:08:23,003 --> 00:08:27,783 ‫we need to await the conversion to JSON. 156 00:08:30,030 --> 00:08:33,363 ‫And then let's take a look at the data first. 157 00:08:34,470 --> 00:08:38,940 ‫And so this should, at this point, already be working. 158 00:08:38,940 --> 00:08:40,383 ‫So let's test this. 159 00:08:42,081 --> 00:08:44,190 ‫This is not really important here. 160 00:08:44,190 --> 00:08:46,653 ‫And so let's deposit 100. 161 00:08:48,840 --> 00:08:52,440 ‫And let's say that we are depositing 100 euros. 162 00:08:52,440 --> 00:08:54,180 ‫So let's click here. 163 00:08:54,180 --> 00:08:56,610 ‫And so, indeed, 164 00:08:56,610 --> 00:08:59,130 ‫our function here was now called, 165 00:08:59,130 --> 00:09:03,180 ‫and it logged to the console these results. 166 00:09:03,180 --> 00:09:06,570 ‫So we are interested in here is these rates 167 00:09:06,570 --> 00:09:08,103 ‫and then that USD. 168 00:09:09,330 --> 00:09:12,813 ‫So let's just store that as well. 169 00:09:14,820 --> 00:09:19,387 ‫So converted is data.rates.USD. 170 00:09:21,120 --> 00:09:22,050 ‫All right? 171 00:09:22,050 --> 00:09:23,910 ‫And so now we have the value 172 00:09:23,910 --> 00:09:27,180 ‫that we actually want to dispatch to the store. 173 00:09:27,180 --> 00:09:30,900 ‫And so now we will return our action. 174 00:09:30,900 --> 00:09:33,663 ‫So basically, exactly what we had here before. 175 00:09:37,200 --> 00:09:40,140 ‫So the action type is the same, 176 00:09:40,140 --> 00:09:43,410 ‫and the payload will now no longer be the amount, 177 00:09:43,410 --> 00:09:46,530 ‫but the converted amount. 178 00:09:46,530 --> 00:09:48,270 ‫And so with this, 179 00:09:48,270 --> 00:09:51,840 ‫we did now in fact delay the creation 180 00:09:51,840 --> 00:09:54,720 ‫of the action to the future. 181 00:09:54,720 --> 00:09:58,800 ‫So basically to the point after this fetch request here 182 00:09:58,800 --> 00:10:01,890 ‫has successfully retrieved the data. 183 00:10:01,890 --> 00:10:05,853 ‫So only after all of this is done, we actually dispatch. 184 00:10:07,020 --> 00:10:11,850 ‫So actually, it is not returned here, but really dispatched. 185 00:10:11,850 --> 00:10:16,020 ‫So here we no longer need to return, but really to dispatch. 186 00:10:16,020 --> 00:10:18,660 ‫And so that is the reason why we get access 187 00:10:18,660 --> 00:10:20,880 ‫to the dispatch function right here. 188 00:10:20,880 --> 00:10:23,913 ‫And so now we basically have two dispatches. 189 00:10:25,680 --> 00:10:27,690 ‫So first we dispatch here, 190 00:10:27,690 --> 00:10:30,030 ‫and in the case we have another currency 191 00:10:30,030 --> 00:10:31,740 ‫that is not US dollars, 192 00:10:31,740 --> 00:10:35,640 ‫then this will return a function, right? 193 00:10:35,640 --> 00:10:37,650 ‫So this function right here. 194 00:10:37,650 --> 00:10:40,110 ‫And so then Redux will call this function 195 00:10:40,110 --> 00:10:42,420 ‫and pass it the dispatch function 196 00:10:42,420 --> 00:10:44,790 ‫so that we can then call that function in the future 197 00:10:44,790 --> 00:10:47,610 ‫when we want to actually dispatch our action 198 00:10:47,610 --> 00:10:49,440 ‫in the end to the store. 199 00:10:49,440 --> 00:10:51,390 ‫So when we already have the result 200 00:10:51,390 --> 00:10:53,730 ‫of the asynchronous operation. 201 00:10:53,730 --> 00:10:58,173 ‫And so this should now actually work nicely. 202 00:11:00,000 --> 00:11:03,993 ‫So let's then deposit 100 euros. 203 00:11:05,280 --> 00:11:07,440 ‫And beautiful. 204 00:11:07,440 --> 00:11:10,110 ‫This is exactly what 100 euros converted 205 00:11:10,110 --> 00:11:12,810 ‫to US dollars is right now. 206 00:11:12,810 --> 00:11:15,450 ‫And of course, you will see a different value here, 207 00:11:15,450 --> 00:11:18,570 ‫but what matters is that this worked now. 208 00:11:18,570 --> 00:11:20,430 ‫And so if we think about this, 209 00:11:20,430 --> 00:11:22,530 ‫then this entire code here, 210 00:11:22,530 --> 00:11:24,810 ‫what is essentially our middleware, 211 00:11:24,810 --> 00:11:28,770 ‫really sits between the dispatching and the store. 212 00:11:28,770 --> 00:11:30,270 ‫So when we dispatch the action 213 00:11:30,270 --> 00:11:33,240 ‫and the currency is different from US dollar, 214 00:11:33,240 --> 00:11:36,870 ‫then that action never actually reaches the store, 215 00:11:36,870 --> 00:11:38,670 ‫at least not in the beginning, 216 00:11:38,670 --> 00:11:42,360 ‫because instead, then this code here will be executed. 217 00:11:42,360 --> 00:11:44,250 ‫And only after that is finished, 218 00:11:44,250 --> 00:11:47,580 ‫we then dispatch a new action to our store 219 00:11:47,580 --> 00:11:48,840 ‫with the new value. 220 00:11:48,840 --> 00:11:52,470 ‫And so, again, this really sits then in the middle. 221 00:11:52,470 --> 00:11:55,350 ‫And so therefore the name middleware. 222 00:11:55,350 --> 00:11:56,940 ‫And now, just to finish, 223 00:11:56,940 --> 00:12:00,540 ‫let's also show the user some loading indicator. 224 00:12:00,540 --> 00:12:01,710 ‫So telling them 225 00:12:01,710 --> 00:12:05,073 ‫that some asynchronous operation is happening. 226 00:12:06,480 --> 00:12:10,533 ‫So to do that, let's create a new state here. 227 00:12:11,490 --> 00:12:15,363 ‫And as always, let's call that isLoading, 228 00:12:16,500 --> 00:12:19,860 ‫which in the beginning will, of course, be false. 229 00:12:19,860 --> 00:12:23,670 ‫But then, as soon as we start fetching, 230 00:12:23,670 --> 00:12:26,040 ‫let's then actually dispatch an action 231 00:12:26,040 --> 00:12:29,010 ‫that will set isLoading to true. 232 00:12:29,010 --> 00:12:31,623 ‫So basically, right before here. 233 00:12:32,970 --> 00:12:34,533 ‫So we can do dispatch. 234 00:12:36,450 --> 00:12:38,190 ‫And then the type of the event, 235 00:12:38,190 --> 00:12:40,470 ‫let's call it account 236 00:12:40,470 --> 00:12:42,477 ‫and then convertingCurrency. 237 00:12:46,020 --> 00:12:49,290 ‫And so you see that we really can dispatch actions 238 00:12:49,290 --> 00:12:52,140 ‫as we please right here in this middleware. 239 00:12:52,140 --> 00:12:54,060 ‫So we don't have to limit ourselves 240 00:12:54,060 --> 00:12:56,730 ‫to only doing that here in the end. 241 00:12:56,730 --> 00:12:59,460 ‫So here, we will dispatch immediately 242 00:12:59,460 --> 00:13:02,520 ‫to let the user know that we are doing some work, 243 00:13:02,520 --> 00:13:05,910 ‫and then in the end, as soon as we're done with that work, 244 00:13:05,910 --> 00:13:09,600 ‫we dispatch the new value into the store. 245 00:13:09,600 --> 00:13:12,147 ‫So then it reaches our reducer. 246 00:13:12,147 --> 00:13:15,330 ‫And so now let's then implement 247 00:13:15,330 --> 00:13:16,893 ‫that new action right here. 248 00:13:19,350 --> 00:13:21,453 ‫So that's account/convertingCurrency, 249 00:13:25,230 --> 00:13:26,063 ‫I believe. 250 00:13:29,130 --> 00:13:33,870 ‫And so here, all this does is to return the current state 251 00:13:33,870 --> 00:13:36,663 ‫and set isLoading to true. 252 00:13:38,730 --> 00:13:39,570 ‫Okay? 253 00:13:39,570 --> 00:13:41,010 ‫And so now, in the end, 254 00:13:41,010 --> 00:13:43,140 ‫do you think that in the end, 255 00:13:43,140 --> 00:13:46,080 ‫we should then here dispatch another action, 256 00:13:46,080 --> 00:13:51,000 ‫so one to basically set isLoading back to false? 257 00:13:51,000 --> 00:13:52,620 ‫Well, we don't have to 258 00:13:52,620 --> 00:13:55,980 ‫because that's the beauty of updating multiple states 259 00:13:55,980 --> 00:13:59,040 ‫at the same time with the reducer. 260 00:13:59,040 --> 00:14:02,760 ‫So all we have to do is to come here into deposit 261 00:14:02,760 --> 00:14:05,620 ‫and then set the isLoading 262 00:14:06,960 --> 00:14:09,300 ‫to false right here. 263 00:14:09,300 --> 00:14:11,640 ‫And so now all we have to do 264 00:14:11,640 --> 00:14:13,893 ‫is to then get that from the state. 265 00:14:16,440 --> 00:14:17,463 ‫So from here, 266 00:14:19,476 --> 00:14:24,476 ‫isLoading, and then we can use that right here, 267 00:14:24,990 --> 00:14:26,460 ‫close to the button. 268 00:14:26,460 --> 00:14:30,100 ‫So here, we can use the disabled prop 269 00:14:31,380 --> 00:14:33,810 ‫and set that to isLoading. 270 00:14:33,810 --> 00:14:35,970 ‫And so then whenever this is true, 271 00:14:35,970 --> 00:14:38,730 ‫we will not be able to click on that button. 272 00:14:38,730 --> 00:14:42,060 ‫And then here, inside the text, 273 00:14:42,060 --> 00:14:43,893 ‫let's do some conditional rendering. 274 00:14:44,850 --> 00:14:47,403 ‫So let's say if isLoading, 275 00:14:49,260 --> 00:14:54,260 ‫then let's say converting. 276 00:14:54,870 --> 00:14:56,670 ‫And else, then here, 277 00:14:56,670 --> 00:14:58,743 ‫we need a template literal, 278 00:15:00,780 --> 00:15:02,253 ‫just like this. 279 00:15:06,540 --> 00:15:09,633 ‫So let's check again with our 100 euros. 280 00:15:12,360 --> 00:15:14,190 ‫And that was really fast, 281 00:15:14,190 --> 00:15:17,133 ‫but I think the text changed here shortly. 282 00:15:19,440 --> 00:15:21,510 ‫So let's come to our Network tab 283 00:15:21,510 --> 00:15:23,260 ‫and do some throttling 284 00:15:24,450 --> 00:15:26,613 ‫with a slow 3G maybe, 285 00:15:27,540 --> 00:15:29,640 ‫and then let's try that again. 286 00:15:29,640 --> 00:15:31,860 ‫So I always like to do that. 287 00:15:31,860 --> 00:15:33,930 ‫Well, that's still very fast. 288 00:15:33,930 --> 00:15:37,230 ‫So I guess that API is a fast one. 289 00:15:37,230 --> 00:15:39,330 ‫But yeah, let's just trust 290 00:15:39,330 --> 00:15:41,163 ‫that everything works this way. 291 00:15:43,260 --> 00:15:44,460 ‫Okay? 292 00:15:44,460 --> 00:15:47,910 ‫Now, the beauty of what we just implemented here is 293 00:15:47,910 --> 00:15:51,420 ‫that this component here actually has no idea 294 00:15:51,420 --> 00:15:54,840 ‫that the amount is converted behind the scenes. 295 00:15:54,840 --> 00:15:58,710 ‫So that conversion is completely hidden from our component. 296 00:15:58,710 --> 00:16:02,030 ‫And instead, it is encapsulated right here 297 00:16:02,030 --> 00:16:03,483 ‫in the account slice. 298 00:16:04,980 --> 00:16:08,400 ‫So it's happening here in the centralized place. 299 00:16:08,400 --> 00:16:11,160 ‫And if we had other API calls 300 00:16:11,160 --> 00:16:13,590 ‫or other asynchronous operations 301 00:16:13,590 --> 00:16:15,570 ‫in these other action creators, 302 00:16:15,570 --> 00:16:18,900 ‫then, of course, they would also be in this file. 303 00:16:18,900 --> 00:16:20,910 ‫So again, they would then all be 304 00:16:20,910 --> 00:16:23,220 ‫in this one centralized place, 305 00:16:23,220 --> 00:16:26,430 ‫not spread all over the application. 306 00:16:26,430 --> 00:16:27,263 ‫And so with this, 307 00:16:27,263 --> 00:16:31,860 ‫we can keep this component here really tidy and clean. 308 00:16:31,860 --> 00:16:33,930 ‫I mean, it's not really that clean 309 00:16:33,930 --> 00:16:38,490 ‫because we chose to have all this JSX in one file, 310 00:16:38,490 --> 00:16:41,223 ‫which usually we would probably split up. 311 00:16:42,120 --> 00:16:43,380 ‫But you get the point. 312 00:16:43,380 --> 00:16:46,350 ‫So we don't have the data fetching anymore here 313 00:16:46,350 --> 00:16:48,000 ‫in the component. 314 00:16:48,000 --> 00:16:51,450 ‫So I hope this wasn't all too confusing. 315 00:16:51,450 --> 00:16:53,760 ‫And what I mostly want you to retain 316 00:16:53,760 --> 00:16:56,400 ‫is that when we are using Thunks, 317 00:16:56,400 --> 00:16:59,100 ‫instead of returning an action object 318 00:16:59,100 --> 00:17:01,560 ‫from the action creator function, 319 00:17:01,560 --> 00:17:04,140 ‫we return a new function. 320 00:17:04,140 --> 00:17:07,290 ‫And so then the result of this becomes a function 321 00:17:07,290 --> 00:17:09,210 ‫and no longer an object. 322 00:17:09,210 --> 00:17:10,650 ‫And so then Redux, 323 00:17:10,650 --> 00:17:13,590 ‫when it sees that we are dispatching a function, 324 00:17:13,590 --> 00:17:15,183 ‫it will call that function, 325 00:17:17,550 --> 00:17:19,050 ‫and into that function, 326 00:17:19,050 --> 00:17:23,160 ‫it'll pass in the dispatch function and getState, 327 00:17:23,160 --> 00:17:25,830 ‫which we didn't even use, in this case. 328 00:17:25,830 --> 00:17:28,800 ‫And so then we can use that dispatch function 329 00:17:28,800 --> 00:17:32,250 ‫inside here to delay that dispatching 330 00:17:32,250 --> 00:17:34,290 ‫until the asynchronous operation 331 00:17:34,290 --> 00:17:37,170 ‫that we want to implement has finished. 332 00:17:37,170 --> 00:17:41,340 ‫And so therefore, we can think of this function here sitting 333 00:17:41,340 --> 00:17:44,640 ‫between the initial dispatching and the reducer 334 00:17:44,640 --> 00:17:47,253 ‫in the store receiving the action.