1 00:00:01,200 --> 00:00:02,460 ‫Let's now go back 2 00:00:02,460 --> 00:00:05,760 ‫to some more advanced Redux Toolkit 3 00:00:05,760 --> 00:00:09,930 ‫and in particular, we will now create a Thunk middleware 4 00:00:09,930 --> 00:00:14,490 ‫by using the built-in CreateAsyncThunk function 5 00:00:14,490 --> 00:00:16,980 ‫which is a way of creating a Thunk 6 00:00:16,980 --> 00:00:20,850 ‫that we avoided when we first learned about Redux, 7 00:00:20,850 --> 00:00:24,030 ‫and the idea here is to implement the feature 8 00:00:24,030 --> 00:00:27,210 ‫where our users can use geolocation 9 00:00:27,210 --> 00:00:31,173 ‫in order to get their GPS position and their address. 10 00:00:33,030 --> 00:00:35,490 ‫So let's close these cartSlice 11 00:00:35,490 --> 00:00:37,050 ‫which we no longer need 12 00:00:37,050 --> 00:00:39,720 ‫and let's open up the userSlice, 13 00:00:39,720 --> 00:00:42,690 ‫and so here we already have some pre-written code 14 00:00:42,690 --> 00:00:44,970 ‫which we now need. 15 00:00:44,970 --> 00:00:46,653 ‫So let's uncomment it. 16 00:00:47,640 --> 00:00:50,670 ‫Then we need to take this one 17 00:00:50,670 --> 00:00:53,520 ‫and place it at the very top, 18 00:00:53,520 --> 00:00:55,953 ‫and then let's also import this getAddress. 19 00:00:58,800 --> 00:01:03,307 ‫So import getAddress from 20 00:01:05,790 --> 00:01:07,470 ‫and up another one, 21 00:01:07,470 --> 00:01:11,613 ‫and then it's inside services and apiRestaurant. 22 00:01:14,191 --> 00:01:16,530 ‫Or actually of course, it is 23 00:01:16,530 --> 00:01:20,733 ‫in apiGeocoding, so that's correct. 24 00:01:21,810 --> 00:01:24,780 ‫So let's analyze what we have here. 25 00:01:24,780 --> 00:01:27,990 ‫So we have dysfunction here called fetchAddress 26 00:01:27,990 --> 00:01:29,580 ‫which, as the name says, 27 00:01:29,580 --> 00:01:33,060 ‫is responsible for fetching some information 28 00:01:33,060 --> 00:01:35,010 ‫about the user's address 29 00:01:35,010 --> 00:01:37,470 ‫and it does so in two steps. 30 00:01:37,470 --> 00:01:41,200 ‫So first of all, it gets the user's geolocation position 31 00:01:42,120 --> 00:01:45,900 ‫which is provided by this getPosition function right here. 32 00:01:45,900 --> 00:01:47,850 ‫So basically wrapping a promise 33 00:01:47,850 --> 00:01:50,010 ‫around this function right here. 34 00:01:50,010 --> 00:01:52,293 ‫So then we can use await. 35 00:01:53,130 --> 00:01:55,560 ‫So here we get the user's position 36 00:01:55,560 --> 00:02:00,150 ‫and then with that position, so that latitude and longitude, 37 00:02:00,150 --> 00:02:03,780 ‫we use this reverse geocoding API. 38 00:02:03,780 --> 00:02:07,440 ‫So this one right here, let's open that, 39 00:02:07,440 --> 00:02:11,070 ‫and so here all we do is to make a fetch request 40 00:02:11,070 --> 00:02:12,930 ‫to this API right here 41 00:02:12,930 --> 00:02:16,320 ‫with the user's current latitude and longitude. 42 00:02:16,320 --> 00:02:19,380 ‫And so this will then do reverse geocoding 43 00:02:19,380 --> 00:02:21,990 ‫which is basically getting some information 44 00:02:21,990 --> 00:02:26,990 ‫about that GPS position like the city or the street name. 45 00:02:27,390 --> 00:02:28,950 ‫So things like that, 46 00:02:28,950 --> 00:02:31,710 ‫and so then we can display that information 47 00:02:31,710 --> 00:02:33,990 ‫later in the form. 48 00:02:33,990 --> 00:02:36,663 ‫So basically what we will want to do, 49 00:02:39,000 --> 00:02:42,780 ‫so let's just go back to our order form. 50 00:02:42,780 --> 00:02:45,360 ‫And so the idea here will be to be 51 00:02:45,360 --> 00:02:47,850 ‫that we have a button here where the user 52 00:02:47,850 --> 00:02:50,790 ‫can request their geolocation position 53 00:02:50,790 --> 00:02:52,350 ‫and then this filter 54 00:02:52,350 --> 00:02:55,980 ‫will automatically be filled with their address, 55 00:02:55,980 --> 00:02:59,253 ‫and so that address will come here from this API. 56 00:03:00,570 --> 00:03:03,690 ‫So then here we create a nice string 57 00:03:03,690 --> 00:03:05,940 ‫based on the information received there 58 00:03:05,940 --> 00:03:08,970 ‫and then we return an object, 59 00:03:08,970 --> 00:03:12,543 ‫both with the GPS position and the address string. 60 00:03:13,830 --> 00:03:17,040 ‫Now okay, so this is just an overview 61 00:03:17,040 --> 00:03:18,840 ‫of how this function works, 62 00:03:18,840 --> 00:03:20,460 ‫but as we can see, 63 00:03:20,460 --> 00:03:22,290 ‫this is an async function 64 00:03:22,290 --> 00:03:25,020 ‫which means that we cannot just call this function 65 00:03:25,020 --> 00:03:28,020 ‫directly inside a Redux reducer 66 00:03:28,020 --> 00:03:33,020 ‫because remember Redux is by nature completely synchronous, 67 00:03:33,030 --> 00:03:37,560 ‫and so that's why we now need to talk about Thunks again. 68 00:03:37,560 --> 00:03:41,280 ‫So we learned all about Thunks back in the Redux section 69 00:03:41,280 --> 00:03:44,790 ‫which you can of course revisit and review, 70 00:03:44,790 --> 00:03:47,850 ‫but basically all you need to know at this point 71 00:03:47,850 --> 00:03:50,520 ‫is that a Thunk is a middleware 72 00:03:50,520 --> 00:03:53,130 ‫that sits between the dispatching 73 00:03:53,130 --> 00:03:55,140 ‫and the reducer itself. 74 00:03:55,140 --> 00:03:58,260 ‫So it will do something to the dispatched action 75 00:03:58,260 --> 00:04:01,410 ‫before actually updating the store. 76 00:04:01,410 --> 00:04:03,090 ‫Now back then when we wanted 77 00:04:03,090 --> 00:04:05,790 ‫to use Thunks with Redux Toolkit, 78 00:04:05,790 --> 00:04:08,850 ‫we manually created our own action creator 79 00:04:08,850 --> 00:04:10,890 ‫and placed the Thunk in there 80 00:04:10,890 --> 00:04:13,080 ‫so instead of using Redux Toolkit's 81 00:04:13,080 --> 00:04:15,660 ‫native way of creating a Thunk, 82 00:04:15,660 --> 00:04:18,090 ‫but now let's actually do that. 83 00:04:18,090 --> 00:04:20,400 ‫And so now in order to create a Thunk, 84 00:04:20,400 --> 00:04:24,570 ‫we will use the createAsyncThunk function. 85 00:04:24,570 --> 00:04:27,030 ‫So that sounds like a lot, 86 00:04:27,030 --> 00:04:28,383 ‫but let's just do it. 87 00:04:29,640 --> 00:04:31,203 ‫So let me do that right here. 88 00:04:32,490 --> 00:04:35,620 ‫So here let's create again fetchAddress 89 00:04:36,780 --> 00:04:40,560 ‫because we will now again, remove that one, 90 00:04:40,560 --> 00:04:43,620 ‫and so this fetch address will be the result 91 00:04:43,620 --> 00:04:45,273 ‫of calling createAsyncThunk. 92 00:04:47,790 --> 00:04:52,020 ‫And so this createAsyncThunk receives two things. 93 00:04:52,020 --> 00:04:55,083 ‫First, we need to pass in the action name, 94 00:04:55,920 --> 00:04:59,110 ‫so that's gonna be user and then fetchAddress 95 00:05:01,080 --> 00:05:04,680 ‫and then second, we need to pass in an async function 96 00:05:04,680 --> 00:05:08,580 ‫that will return the payload for the reducer later. 97 00:05:08,580 --> 00:05:11,010 ‫So this function needs to return the promise 98 00:05:11,010 --> 00:05:14,073 ‫and so an async function is ideal here. 99 00:05:16,680 --> 00:05:19,570 ‫So let's just create an anonymous function here 100 00:05:20,940 --> 00:05:24,270 ‫and then grab all this code 101 00:05:24,270 --> 00:05:26,013 ‫and place that in there. 102 00:05:26,910 --> 00:05:29,640 ‫So then we can remove this 103 00:05:29,640 --> 00:05:31,353 ‫and paste that here. 104 00:05:32,670 --> 00:05:36,150 ‫All right, and now this fetchAddress here 105 00:05:36,150 --> 00:05:39,420 ‫will actually become the action creator function 106 00:05:39,420 --> 00:05:42,390 ‫that we will later call in or code, 107 00:05:42,390 --> 00:05:46,530 ‫and so let's export this one as well. 108 00:05:46,530 --> 00:05:51,060 ‫So now besides this updateName action creator, 109 00:05:51,060 --> 00:05:55,350 ‫we also have this new one here which is fetchAddress 110 00:05:55,350 --> 00:05:58,650 ‫and we should not call it something like getAddress 111 00:05:58,650 --> 00:06:02,250 ‫because those names are reserved for selectors. 112 00:06:02,250 --> 00:06:06,420 ‫So by convention, these names for the AsyncThunks 113 00:06:06,420 --> 00:06:10,830 ‫should not be called something with get, okay? 114 00:06:10,830 --> 00:06:13,350 ‫Now this is I guess pretty confusing, 115 00:06:13,350 --> 00:06:17,040 ‫so let's just quickly recap what we did here. 116 00:06:17,040 --> 00:06:20,220 ‫So this time we used the Redux Toolkit way 117 00:06:20,220 --> 00:06:22,500 ‫of creating a Thunk function. 118 00:06:22,500 --> 00:06:24,750 ‫So we called this function right here 119 00:06:24,750 --> 00:06:27,870 ‫where we passed in the action type name 120 00:06:27,870 --> 00:06:29,550 ‫and so that's this one right here 121 00:06:29,550 --> 00:06:31,800 ‫which we will never manually use, 122 00:06:31,800 --> 00:06:34,860 ‫but still Redux needs this internally. 123 00:06:34,860 --> 00:06:36,540 ‫And then as a second argument, 124 00:06:36,540 --> 00:06:39,660 ‫we pass in the actual Thunk function, 125 00:06:39,660 --> 00:06:41,850 ‫so the code that we want to execute 126 00:06:41,850 --> 00:06:45,540 ‫as soon as this action here will be dispatched. 127 00:06:45,540 --> 00:06:49,830 ‫Now what's special about this is that this createAsyncThunk 128 00:06:49,830 --> 00:06:53,670 ‫will basically produce three additional action types. 129 00:06:53,670 --> 00:06:56,520 ‫So one for depending promise state, 130 00:06:56,520 --> 00:06:58,380 ‫one for the fulfilled state, 131 00:06:58,380 --> 00:07:00,780 ‫and one for the rejected state. 132 00:07:00,780 --> 00:07:03,480 ‫And so now we need to handle these cases 133 00:07:03,480 --> 00:07:06,330 ‫separately back in our reducers 134 00:07:06,330 --> 00:07:09,270 ‫and so this is how we then connect this Thunk 135 00:07:09,270 --> 00:07:11,823 ‫with our reducers down here. 136 00:07:12,720 --> 00:07:14,340 ‫So let's do that 137 00:07:14,340 --> 00:07:18,630 ‫and here the syntax is actually pretty confusing again. 138 00:07:18,630 --> 00:07:22,800 ‫So here we need to now specify these extra reducers 139 00:07:22,800 --> 00:07:27,000 ‫which will then get something called a builder. 140 00:07:27,000 --> 00:07:30,780 ‫So this is basically a function here 141 00:07:30,780 --> 00:07:34,630 ‫and then on this builder we call addCase. 142 00:07:37,740 --> 00:07:39,630 ‫So again, pretty confusing here, 143 00:07:39,630 --> 00:07:42,570 ‫but this is just the way Redux Toolkit works 144 00:07:42,570 --> 00:07:45,393 ‫and it's the reason why I didn't show you this earlier. 145 00:07:46,620 --> 00:07:49,350 ‫But anyway, here now let's use 146 00:07:49,350 --> 00:07:54,350 ‫that function that we just created, so that fetchAddress, 147 00:07:54,570 --> 00:07:58,980 ‫and then here we are going to handle the pending state. 148 00:07:58,980 --> 00:08:02,670 ‫So .pending, and then here is where the actual reducer 149 00:08:02,670 --> 00:08:04,890 ‫finally comes into play. 150 00:08:04,890 --> 00:08:09,130 ‫So here we can now get the state and the action again 151 00:08:10,800 --> 00:08:15,130 ‫and so here what we will want to do is to update the state 152 00:08:16,170 --> 00:08:19,143 ‫by setting the status to loading. 153 00:08:22,050 --> 00:08:25,740 ‫Okay, and so let's actually now update 154 00:08:25,740 --> 00:08:27,900 ‫also our initial state. 155 00:08:27,900 --> 00:08:29,430 ‫So besides this username, 156 00:08:29,430 --> 00:08:31,863 ‫we now need a few more things here. 157 00:08:32,880 --> 00:08:34,990 ‫So let's start with a status 158 00:08:36,270 --> 00:08:39,180 ‫and let's make it by default idle. 159 00:08:39,180 --> 00:08:41,880 ‫And then as soon as we start loading, 160 00:08:41,880 --> 00:08:43,590 ‫so that's this pending state, 161 00:08:43,590 --> 00:08:45,873 ‫we set it to loading right here. 162 00:08:47,160 --> 00:08:51,180 ‫Just place this into these curly braces 163 00:08:51,180 --> 00:08:55,320 ‫and then we also want to store the user's position. 164 00:08:55,320 --> 00:09:00,320 ‫Let's start here with this empty object, the address, 165 00:09:03,570 --> 00:09:06,543 ‫and also some possible error. 166 00:09:08,430 --> 00:09:12,240 ‫Okay, and so let's now handle the other two cases. 167 00:09:12,240 --> 00:09:14,430 ‫So for the fulfilled state, 168 00:09:14,430 --> 00:09:16,980 ‫so the case when there is success, 169 00:09:16,980 --> 00:09:20,850 ‫and also the rejected state for an error. 170 00:09:20,850 --> 00:09:23,887 ‫So builder.addCase fetchAddress.fulfilled 171 00:09:30,420 --> 00:09:33,330 ‫and then again, finally our reducer. 172 00:09:33,330 --> 00:09:35,740 ‫So state and action 173 00:09:38,010 --> 00:09:40,500 ‫and here we have this small problem 174 00:09:40,500 --> 00:09:42,600 ‫where actually we need to change this here 175 00:09:42,600 --> 00:09:44,703 ‫after the other at case. 176 00:09:47,280 --> 00:09:51,730 ‫So first of all, let's set the status then back to idle 177 00:09:54,840 --> 00:09:59,010 ‫and here I'm again forgetting this dot here. 178 00:09:59,010 --> 00:10:02,310 ‫Then let's actually take care of the important part. 179 00:10:02,310 --> 00:10:04,380 ‫So as I mentioned earlier, 180 00:10:04,380 --> 00:10:06,960 ‫this data that we return here 181 00:10:06,960 --> 00:10:10,113 ‫will become the payload of the fulfilled state. 182 00:10:11,280 --> 00:10:15,827 ‫So payload of the fulfilled state. 183 00:10:19,590 --> 00:10:23,043 ‫All right, and so let's then use that. 184 00:10:25,020 --> 00:10:28,420 ‫So let's do state.position 185 00:10:30,360 --> 00:10:35,360 ‫will be equal to the action.payload.position 186 00:10:37,410 --> 00:10:41,400 ‫and then state.address will be 187 00:10:41,400 --> 00:10:46,083 ‫equal to action.payload.address. 188 00:10:47,010 --> 00:10:51,810 ‫And finally, let's add a case for a possible error. 189 00:10:51,810 --> 00:10:56,810 ‫So for example, when the user doesn't accept geolocation, 190 00:10:59,250 --> 00:11:04,250 ‫so state and action maintained here. 191 00:11:05,730 --> 00:11:10,730 ‫Let's do state.status will be an error 192 00:11:11,340 --> 00:11:16,340 ‫and not like this, and state.error. 193 00:11:17,760 --> 00:11:20,580 ‫So here we will then also have an error string 194 00:11:20,580 --> 00:11:25,580 ‫which actually gets automatically placed on the action. 195 00:11:26,130 --> 00:11:29,763 ‫So action.error.message. 196 00:11:32,550 --> 00:11:36,090 ‫Now okay, so we actually finished this part here. 197 00:11:36,090 --> 00:11:40,380 ‫But before we review this to make this a bit less confusing, 198 00:11:40,380 --> 00:11:45,240 ‫let's quickly add just a temporary button right here 199 00:11:45,240 --> 00:11:48,750 ‫in this create order so that we can dispatch an action 200 00:11:48,750 --> 00:11:51,303 ‫and then actually see this working. 201 00:11:52,170 --> 00:11:55,030 ‫So let's create a button here 202 00:11:56,250 --> 00:11:58,210 ‫with the onClick handler 203 00:12:01,320 --> 00:12:03,603 ‫where we then put this patch. 204 00:12:05,010 --> 00:12:07,710 ‫And so let's actually get that. 205 00:12:07,710 --> 00:12:09,213 ‫I think we don't have it yet. 206 00:12:10,950 --> 00:12:12,993 ‫Let's just do that somewhere here. 207 00:12:16,980 --> 00:12:21,250 ‫So use dispatch, and so here what we want to dispatch 208 00:12:22,290 --> 00:12:26,790 ‫is exactly this action creator. 209 00:12:26,790 --> 00:12:29,580 ‫So we want to dispatch an action that is created 210 00:12:29,580 --> 00:12:33,270 ‫by this action creator that we just made here 211 00:12:33,270 --> 00:12:36,810 ‫and so that will then basically dispatch an action 212 00:12:36,810 --> 00:12:38,820 ‫with this string here, 213 00:12:38,820 --> 00:12:43,820 ‫so with this action name and attached the pending state 214 00:12:43,830 --> 00:12:46,713 ‫and the fulfilled and the rejected state. 215 00:12:49,590 --> 00:12:52,210 ‫So that's why we exported that 216 00:12:54,690 --> 00:12:56,883 ‫and so let's see if this works. 217 00:12:58,350 --> 00:13:02,640 ‫So get position like this, 218 00:13:02,640 --> 00:13:06,090 ‫but then we need to add some pizza here 219 00:13:06,090 --> 00:13:07,653 ‫actually to the cart first. 220 00:13:11,550 --> 00:13:15,540 ‫All right, and now let's actually open up 221 00:13:15,540 --> 00:13:17,790 ‫our Redux dev tools again. 222 00:13:17,790 --> 00:13:20,220 ‫So that's gonna be really handy here 223 00:13:20,220 --> 00:13:21,873 ‫and so let's click here, 224 00:13:22,740 --> 00:13:25,920 ‫and so something is definitely working. 225 00:13:25,920 --> 00:13:29,370 ‫So it's asking me here to allow geolocation, 226 00:13:29,370 --> 00:13:30,903 ‫so let's allow that. 227 00:13:32,640 --> 00:13:37,080 ‫And you see that a lot of things happened down here, 228 00:13:37,080 --> 00:13:38,553 ‫so let's check it out. 229 00:13:39,480 --> 00:13:42,480 ‫So as soon as we clicked here on get position, 230 00:13:42,480 --> 00:13:47,370 ‫in fact, the user/fetchAddress/pending action 231 00:13:47,370 --> 00:13:50,790 ‫was dispatched, and so what this did here 232 00:13:50,790 --> 00:13:54,600 ‫was set the status from idle to loading. 233 00:13:54,600 --> 00:13:58,860 ‫And so that is actually exactly what we have here, 234 00:13:58,860 --> 00:14:00,420 ‫so this one right here, 235 00:14:00,420 --> 00:14:02,640 ‫so that's what I was saying earlier. 236 00:14:02,640 --> 00:14:05,310 ‫So that dispatching the action 237 00:14:05,310 --> 00:14:06,630 ‫would create an action 238 00:14:06,630 --> 00:14:11,630 ‫with a type of user/fetchAddress/pending, 239 00:14:14,160 --> 00:14:16,560 ‫so exactly what we have here. 240 00:14:16,560 --> 00:14:20,070 ‫And so that's what this reducer right here 241 00:14:20,070 --> 00:14:22,530 ‫is then responsible for handling, 242 00:14:22,530 --> 00:14:25,083 ‫so for updating the state right here. 243 00:14:26,760 --> 00:14:30,300 ‫And then as soon as the promise was finished, 244 00:14:30,300 --> 00:14:34,830 ‫so as soon as it got fulfilled after all of this work here, 245 00:14:34,830 --> 00:14:39,420 ‫so after getting the position and then fetching the address, 246 00:14:39,420 --> 00:14:40,830 ‫so after all this, 247 00:14:40,830 --> 00:14:44,280 ‫that data was then returned here from the function. 248 00:14:44,280 --> 00:14:46,650 ‫And so remember that this then became 249 00:14:46,650 --> 00:14:49,860 ‫the payload of the fulfilled state 250 00:14:49,860 --> 00:14:52,320 ‫and so this fulfilled state 251 00:14:52,320 --> 00:14:55,713 ‫is then handled by this reducer right here. 252 00:14:56,700 --> 00:15:01,050 ‫And so this then updated the state here to idle, 253 00:15:01,050 --> 00:15:04,983 ‫to the address itself and to the GPS position. 254 00:15:06,000 --> 00:15:09,030 ‫And in case the user, for example, 255 00:15:09,030 --> 00:15:13,260 ‫did not allow the geolocation to happen, 256 00:15:13,260 --> 00:15:16,170 ‫so if we clicked here on block, 257 00:15:16,170 --> 00:15:18,600 ‫then this rejected state, 258 00:15:18,600 --> 00:15:22,500 ‫so this reducer right here would be caught. 259 00:15:22,500 --> 00:15:24,240 ‫So then we would get an error 260 00:15:24,240 --> 00:15:27,333 ‫which we could then display in the user interface. 261 00:15:28,380 --> 00:15:31,860 ‫Now okay, so our Redux logic here works 262 00:15:31,860 --> 00:15:35,943 ‫even though it is, as I keep saying, pretty confusing. 263 00:15:38,880 --> 00:15:41,370 ‫But this is basically just a recipe 264 00:15:41,370 --> 00:15:44,340 ‫that you will have to follow in case you are interested 265 00:15:44,340 --> 00:15:47,520 ‫in creating thanks with Redux Toolkit. 266 00:15:47,520 --> 00:15:51,840 ‫So just make sure to maybe review the flow of the data here 267 00:15:51,840 --> 00:15:53,400 ‫and how all of this works, 268 00:15:53,400 --> 00:15:55,830 ‫and then let's move on to the next video 269 00:15:55,830 --> 00:15:59,460 ‫where we will integrate this geoposition logic 270 00:15:59,460 --> 00:16:01,533 ‫here into this actual form.