1 00:00:01,170 --> 00:00:02,160 ‫Let's now build 2 00:00:02,160 --> 00:00:04,650 ‫an advanced state management system 3 00:00:04,650 --> 00:00:08,880 ‫by combining the context API with a use reducer hook 4 00:00:08,880 --> 00:00:12,453 ‫which is a pretty common pattern in React development. 5 00:00:14,070 --> 00:00:16,890 ‫Now with all the knowledge that we already have 6 00:00:16,890 --> 00:00:19,530 ‫and with all the code that we already wrote here 7 00:00:19,530 --> 00:00:22,740 ‫this is actually not gonna be such a big deal. 8 00:00:22,740 --> 00:00:26,160 ‫So we already know about all the fundamental pieces 9 00:00:26,160 --> 00:00:28,860 ‫of this advanced state management system. 10 00:00:28,860 --> 00:00:33,120 ‫All we have to do is to now combine these three states here 11 00:00:33,120 --> 00:00:36,060 ‫into a reducer and then change our code here 12 00:00:36,060 --> 00:00:39,540 ‫a little bit to use that reducer function. 13 00:00:39,540 --> 00:00:41,820 ‫So basically what we're gonna do is to 14 00:00:41,820 --> 00:00:46,820 ‫refactor the entire code here in the city context to again 15 00:00:48,450 --> 00:00:52,623 ‫use a use reducer hook now instead of these use states. 16 00:00:53,880 --> 00:00:56,710 ‫So let's start by creating the reducer function 17 00:00:57,600 --> 00:01:02,600 ‫which gets the current state and the action. 18 00:01:02,820 --> 00:01:06,507 ‫Remember, and for now, I'll just leave it like this. 19 00:01:06,507 --> 00:01:10,923 ‫And then let's also create the initial state as always. 20 00:01:12,120 --> 00:01:14,793 ‫So again, we already know how all of this works. 21 00:01:17,760 --> 00:01:20,373 ‫So the cities start as an MT array. 22 00:01:21,540 --> 00:01:26,520 ‫Then we have isLoading, which starts at faults 23 00:01:26,520 --> 00:01:31,520 ‫and then the current city starts as an empty object. 24 00:01:31,770 --> 00:01:33,243 ‫So just what we have here. 25 00:01:35,370 --> 00:01:39,483 ‫So let's then get rid of these for now. 26 00:01:41,791 --> 00:01:44,163 ‫And then let's create the state and the dispatch function 27 00:01:49,800 --> 00:01:52,320 ‫out of the use reducer hook. 28 00:01:52,320 --> 00:01:56,280 ‫And so here we pass in as always the reducer 29 00:01:56,280 --> 00:02:00,210 ‫and the initial state. 30 00:02:00,210 --> 00:02:04,620 ‫And actually here we can immediately destructure the state 31 00:02:04,620 --> 00:02:09,620 ‫back into our cities isLoading and the current city. 32 00:02:10,410 --> 00:02:12,930 ‫Now, as soon as I'm gonna save this 33 00:02:12,930 --> 00:02:15,753 ‫then we will get some errors because, 34 00:02:16,590 --> 00:02:20,607 ‫well first of all here it's called reducer like this. 35 00:02:22,410 --> 00:02:24,120 ‫But worse than that is that all 36 00:02:24,120 --> 00:02:28,590 ‫of these set state functions here are no longer defined. 37 00:02:28,590 --> 00:02:31,980 ‫And so we are now going to replace those basically 38 00:02:31,980 --> 00:02:33,633 ‫with the dispatch function. 39 00:02:37,200 --> 00:02:40,980 ‫Now here inside our reducer function, remember 40 00:02:40,980 --> 00:02:43,290 ‫that we should put as many logic 41 00:02:43,290 --> 00:02:46,500 ‫as possible so that we have this central place 42 00:02:46,500 --> 00:02:48,930 ‫that handles all the business logic 43 00:02:48,930 --> 00:02:52,290 ‫and basically all the state transitions. 44 00:02:52,290 --> 00:02:55,020 ‫Now the problem in this case here is 45 00:02:55,020 --> 00:02:57,930 ‫that reducers need to be pure functions, 46 00:02:57,930 --> 00:03:01,920 ‫which means that we cannot do these API requests 47 00:03:01,920 --> 00:03:05,670 ‫that we do right here inside the reducer function. 48 00:03:05,670 --> 00:03:08,250 ‫So all we can do is to still make 49 00:03:08,250 --> 00:03:10,500 ‫these fetch requests out here. 50 00:03:10,500 --> 00:03:12,240 ‫So in separate functions. 51 00:03:12,240 --> 00:03:15,420 ‫And then after the data has already been received 52 00:03:15,420 --> 00:03:19,140 ‫then we can dispatch actions to the reducer. 53 00:03:19,140 --> 00:03:22,950 ‫So what this means is that when asynchronous data 54 00:03:22,950 --> 00:03:25,350 ‫and asynchronous code is involved, 55 00:03:25,350 --> 00:03:28,770 ‫then we don't get that nice benefit where we can simply 56 00:03:28,770 --> 00:03:32,340 ‫pass the dispatch function into the context value, 57 00:03:32,340 --> 00:03:37,340 ‫instead of all of these event handler functions like this. 58 00:03:37,740 --> 00:03:41,430 ‫But let's first implement a few actions here 59 00:03:41,430 --> 00:03:44,550 ‫and then we will come back to this topic in a minute, 60 00:03:44,550 --> 00:03:46,953 ‫because this is quite important to understand. 61 00:03:49,020 --> 00:03:52,320 ‫So let's again do a switch case here 62 00:03:52,320 --> 00:03:57,180 ‫and then of course checking for the action.type. 63 00:04:00,420 --> 00:04:04,053 ‫And in here let's create all different cases. 64 00:04:04,950 --> 00:04:07,110 ‫So when we use a reducer 65 00:04:07,110 --> 00:04:10,200 ‫in a bit larger application like this one 66 00:04:10,200 --> 00:04:12,780 ‫it's very important to follow a meaningful 67 00:04:12,780 --> 00:04:16,710 ‫naming conventions when it comes to the action types. 68 00:04:16,710 --> 00:04:21,630 ‫So it's usually a good idea to model these actions as events 69 00:04:21,630 --> 00:04:25,260 ‫and not as setters because this makes it easier 70 00:04:25,260 --> 00:04:28,500 ‫to see all the related state transitions. 71 00:04:28,500 --> 00:04:32,910 ‫For example, it shouldn't be set cities 72 00:04:32,910 --> 00:04:37,910 ‫but instead we can call this cities/loaded 73 00:04:39,630 --> 00:04:42,780 ‫or we can also do this, but it's a bit 74 00:04:42,780 --> 00:04:46,290 ‫of a naming convention to use a slash like this 75 00:04:46,290 --> 00:04:48,390 ‫at least in the Redux community 76 00:04:48,390 --> 00:04:52,260 ‫which is actually similar to what we are implementing here. 77 00:04:52,260 --> 00:04:54,720 ‫So I like to use this slash here 78 00:04:54,720 --> 00:04:57,210 ‫because it makes it really easy to understand 79 00:04:57,210 --> 00:04:59,430 ‫that this is related to the cities 80 00:04:59,430 --> 00:05:02,430 ‫and then that they have been loaded in this case. 81 00:05:02,430 --> 00:05:05,283 ‫So we will also have created and deleted. 82 00:05:06,270 --> 00:05:08,120 ‫And actually let's do that right now. 83 00:05:10,170 --> 00:05:13,990 ‫So we can say cities created 84 00:05:15,330 --> 00:05:18,610 ‫and also cities deleted. 85 00:05:22,320 --> 00:05:25,620 ‫And again, it's better to do it like this because then 86 00:05:25,620 --> 00:05:29,250 ‫it's really easy to see that in that event we 87 00:05:29,250 --> 00:05:32,580 ‫should both set the cities and probably also 88 00:05:32,580 --> 00:05:34,560 ‫set the isLoading state. 89 00:05:34,560 --> 00:05:37,740 ‫And so both of these things happen when the cities 90 00:05:37,740 --> 00:05:42,740 ‫are loaded, but if we just called it again, like set cities 91 00:05:44,010 --> 00:05:46,770 ‫then we might think that all we do in this event 92 00:05:46,770 --> 00:05:48,300 ‫is to set the cities. 93 00:05:48,300 --> 00:05:50,100 ‫And so this is why again, 94 00:05:50,100 --> 00:05:53,610 ‫we should model our event names more like this. 95 00:05:53,610 --> 00:05:56,943 ‫So really as events and not just setters. 96 00:05:58,650 --> 00:06:02,133 ‫So let's then actually do what I just said. 97 00:06:03,870 --> 00:06:08,130 ‫So here as always return the current state. 98 00:06:08,130 --> 00:06:13,130 ‫Then we set isLoading back to faults, and we set the cities 99 00:06:16,710 --> 00:06:18,933 ‫to action.payload. 100 00:06:22,530 --> 00:06:26,253 ‫All right, now here we are missing a default case again. 101 00:06:29,220 --> 00:06:33,010 ‫So let's throw a new error, like always 102 00:06:40,230 --> 00:06:41,700 ‫unknown action type. 103 00:06:41,700 --> 00:06:44,580 ‫Now here this says it needs a break statement 104 00:06:44,580 --> 00:06:47,130 ‫but we will take care of that in a minute. 105 00:06:47,130 --> 00:06:50,910 ‫Because if we just return here like we're doing here 106 00:06:50,910 --> 00:06:54,183 ‫then we need no break statements after each case. 107 00:06:55,470 --> 00:06:58,590 ‫But anyway, so here we will now be able to 108 00:06:58,590 --> 00:07:02,490 ‫use that dispatch function instead of these two. 109 00:07:02,490 --> 00:07:05,310 ‫However, what we're also going to need is 110 00:07:05,310 --> 00:07:07,410 ‫to set this loading state here 111 00:07:07,410 --> 00:07:09,333 ‫to true in the very beginning. 112 00:07:10,200 --> 00:07:13,860 ‫So let's also create an action for that and let's do it here 113 00:07:13,860 --> 00:07:17,373 ‫in a logical order in which the events actually happen. 114 00:07:18,720 --> 00:07:21,450 ‫So here, let's just call it loading. 115 00:07:21,450 --> 00:07:23,313 ‫So without the city's prefix. 116 00:07:27,390 --> 00:07:31,323 ‫So we want to take all the current state and then override. 117 00:07:32,261 --> 00:07:34,293 ‫IsLoading to true. 118 00:07:36,240 --> 00:07:38,553 ‫All right, and so now let's use these. 119 00:07:40,260 --> 00:07:43,713 ‫And here we can actually do that outside of the try-catch. 120 00:07:44,850 --> 00:07:49,850 ‫So this patch the event type of loading. 121 00:07:52,800 --> 00:07:57,060 ‫And then here, as soon as the data arrives 122 00:07:57,060 --> 00:08:01,522 ‫then we can dispatch the type 123 00:08:01,522 --> 00:08:06,522 ‫of cities loaded with the payload of data. 124 00:08:14,430 --> 00:08:16,890 ‫So this is what we were setting before 125 00:08:16,890 --> 00:08:19,290 ‫into the set city state. 126 00:08:19,290 --> 00:08:22,500 ‫And so now here we can also get rid of that. 127 00:08:22,500 --> 00:08:26,490 ‫But then the problem is that if there is some error 128 00:08:26,490 --> 00:08:30,330 ‫then the loading state will never get back to faults. 129 00:08:30,330 --> 00:08:33,510 ‫And so actually to make this a bit more complete 130 00:08:33,510 --> 00:08:37,233 ‫let's also create a new state here for the error. 131 00:08:40,440 --> 00:08:43,320 ‫So starting as an empty string 132 00:08:43,320 --> 00:08:45,420 ‫and then let's add a new case here 133 00:08:45,420 --> 00:08:48,303 ‫in the end called rejected. 134 00:08:50,391 --> 00:08:52,170 ‫And so notice how again, 135 00:08:52,170 --> 00:08:55,920 ‫I'm giving this year basically a name in the past. 136 00:08:55,920 --> 00:08:58,470 ‫So for something that already happened. 137 00:08:58,470 --> 00:09:01,230 ‫So we get the error here 138 00:09:01,230 --> 00:09:03,900 ‫in this function where the data is loaded 139 00:09:03,900 --> 00:09:07,530 ‫and after that we will dispatch the action. 140 00:09:07,530 --> 00:09:10,800 ‫And so then that rejection has already happened. 141 00:09:10,800 --> 00:09:13,383 ‫And so that's why then here we call it rejected. 142 00:09:15,180 --> 00:09:20,180 ‫So here we return the state. 143 00:09:20,610 --> 00:09:24,990 ‫Then we set isLoading also to faults 144 00:09:24,990 --> 00:09:29,500 ‫and the error to action.payload. 145 00:09:33,210 --> 00:09:38,163 ‫All right, so here, let's just replace that dispatch. 146 00:09:45,120 --> 00:09:50,120 ‫So where the type is rejected and the payload is going 147 00:09:50,370 --> 00:09:53,010 ‫to be done this string. 148 00:09:53,010 --> 00:09:55,980 ‫Now we're not really going to use this error state 149 00:09:55,980 --> 00:09:58,440 ‫that we just created in our application 150 00:09:58,440 --> 00:10:02,250 ‫because we're not doing much error handling there, 151 00:10:02,250 --> 00:10:05,430 ‫but this was just to make this a bit more complete 152 00:10:05,430 --> 00:10:06,720 ‫so that you can maybe use this 153 00:10:06,720 --> 00:10:10,623 ‫in the future for your own small applications. 154 00:10:12,300 --> 00:10:17,300 ‫So I think here we handled the entire loading of the cities. 155 00:10:17,490 --> 00:10:20,430 ‫And so let's move on here to the next one 156 00:10:20,430 --> 00:10:21,663 ‫and see what we need. 157 00:10:22,680 --> 00:10:25,350 ‫So we already took care of the loading states 158 00:10:25,350 --> 00:10:28,320 ‫but now here we need to set the current city. 159 00:10:28,320 --> 00:10:33,093 ‫So as soon as one individual city arrives from the API. 160 00:10:34,200 --> 00:10:39,200 ‫So here we need a new action or a new case for that. 161 00:10:40,500 --> 00:10:43,893 ‫So let's call this one city loaded. 162 00:10:45,990 --> 00:10:47,073 ‫So return. 163 00:10:50,970 --> 00:10:55,534 ‫Set to false, and then here it is called the current city 164 00:10:55,534 --> 00:10:59,913 ‫which is gonna be set to action.payload. 165 00:11:03,030 --> 00:11:06,480 ‫And so now this is all gonna be very similar. 166 00:11:06,480 --> 00:11:11,480 ‫So let me actually copy this here already 167 00:11:12,330 --> 00:11:14,160 ‫into all the functions. 168 00:11:14,160 --> 00:11:17,733 ‫And I will also get rid of all the finals everywhere. 169 00:11:22,620 --> 00:11:24,333 ‫So doing it all in one go. 170 00:11:26,520 --> 00:11:29,793 ‫Okay, and then this is the last one, I believe. 171 00:11:35,220 --> 00:11:37,680 ‫No. Okay, here we go. 172 00:11:37,680 --> 00:11:42,680 ‫And now here we just need to dispatch that action 173 00:11:45,390 --> 00:11:46,473 ‫that we just created. 174 00:11:47,430 --> 00:11:52,430 ‫So the type is city/loaded, and the payload is the data. 175 00:11:56,400 --> 00:12:00,213 ‫And then here, let's also just copy this entire dispatch. 176 00:12:10,650 --> 00:12:12,870 ‫And let's just change the string here. 177 00:12:12,870 --> 00:12:15,273 ‫So here, that's cities. 178 00:12:16,980 --> 00:12:21,960 ‫Okay, and now we can finally also create two actions 179 00:12:21,960 --> 00:12:24,030 ‫for those two. 180 00:12:24,030 --> 00:12:27,723 ‫So with this, we then actually finish this reducer. 181 00:12:30,990 --> 00:12:34,950 ‫So as soon as the city has already been created 182 00:12:34,950 --> 00:12:37,143 ‫we set the loading back to faults. 183 00:12:38,130 --> 00:12:41,883 ‫And then what do we do here with the current cities? 184 00:12:43,080 --> 00:12:44,430 ‫Well, that's right. 185 00:12:44,430 --> 00:12:47,583 ‫We add the new city also to our local state. 186 00:12:48,450 --> 00:12:51,300 ‫So exactly what we have right here. 187 00:12:51,300 --> 00:12:53,940 ‫And so remember how I told you earlier 188 00:12:53,940 --> 00:12:58,140 ‫that basically what we do here is to keep the remote state 189 00:12:58,140 --> 00:13:00,600 ‫in sync with our UI state. 190 00:13:00,600 --> 00:13:05,370 ‫So basically here we are adding the new city to our API 191 00:13:05,370 --> 00:13:09,600 ‫and then here we are also setting it to our local state. 192 00:13:09,600 --> 00:13:12,090 ‫So doing that manually, which again 193 00:13:12,090 --> 00:13:17,090 ‫we will solve in the next big project using React Query. 194 00:13:17,640 --> 00:13:21,750 ‫But anyway, for now here we will add that new city 195 00:13:21,750 --> 00:13:24,990 ‫to the current array of cities. 196 00:13:24,990 --> 00:13:29,990 ‫And so we spread the state.cities and add action.payload. 197 00:13:35,760 --> 00:13:39,960 ‫Alright? And then here, let's do something very similar. 198 00:13:39,960 --> 00:13:41,823 ‫So let's just actually copy this, 199 00:13:43,710 --> 00:13:46,530 ‫but now here instead of adding the new city, 200 00:13:46,530 --> 00:13:49,230 ‫we remove it using a filter. 201 00:13:49,230 --> 00:13:51,480 ‫So just like we did down here. 202 00:13:51,480 --> 00:13:54,220 ‫So let's just grab this filter 203 00:13:55,950 --> 00:13:58,410 ‫and of course we need to change it a bit. 204 00:13:58,410 --> 00:14:00,933 ‫So it's right here. 205 00:14:02,130 --> 00:14:05,700 ‫So here that is state.cities. 206 00:14:05,700 --> 00:14:08,940 ‫And here this ID is what we actually need to pass 207 00:14:08,940 --> 00:14:10,863 ‫in into this action. 208 00:14:11,790 --> 00:14:15,720 ‫So this will become action.payload. 209 00:14:15,720 --> 00:14:17,720 ‫And here there's some problem with that. 210 00:14:20,280 --> 00:14:25,173 ‫Okay. And so now let's then use those two. 211 00:14:31,710 --> 00:14:36,300 ‫So here we have cities created 212 00:14:36,300 --> 00:14:37,620 ‫or actually thinking about it, 213 00:14:37,620 --> 00:14:39,843 ‫this would just be called city. 214 00:14:42,330 --> 00:14:47,100 ‫So here we are talking about an individual city. 215 00:14:47,100 --> 00:14:49,593 ‫And so let's change that. 216 00:14:50,820 --> 00:14:52,710 ‫So all the cities have been loaded, 217 00:14:52,710 --> 00:14:55,860 ‫one city has been loaded, one has been created 218 00:14:55,860 --> 00:14:57,363 ‫and one has been deleted. 219 00:14:58,260 --> 00:15:00,483 ‫So that makes a bit more sense. 220 00:15:01,740 --> 00:15:05,640 ‫And yeah, so city created 221 00:15:05,640 --> 00:15:10,530 ‫and the payload is gonna be again the data, 222 00:15:10,530 --> 00:15:14,020 ‫which is the newly created city object. 223 00:15:14,020 --> 00:15:19,020 ‫And so here then let's again dispatch the rejected action 224 00:15:21,390 --> 00:15:26,223 ‫and then creating the city. 225 00:15:28,980 --> 00:15:32,310 ‫Okay, and then finally 226 00:15:32,310 --> 00:15:36,993 ‫let's also replace this one with the dispatch. 227 00:15:42,390 --> 00:15:44,460 ‫So here we have city deleted. 228 00:15:44,460 --> 00:15:47,070 ‫And then as I was mentioned here, what we need to pass 229 00:15:47,070 --> 00:15:52,023 ‫in is just the ID of the city that should be deleted. 230 00:15:55,631 --> 00:15:58,787 ‫Then here and here we replace this. 231 00:16:02,010 --> 00:16:04,050 ‫And as I save this, now you see 232 00:16:04,050 --> 00:16:07,950 ‫that all the errors that we had before have been resolved. 233 00:16:07,950 --> 00:16:11,970 ‫And so our application should now be back to working. 234 00:16:11,970 --> 00:16:13,650 ‫But before we try that out 235 00:16:13,650 --> 00:16:16,320 ‫let's discuss a bit what we just did here 236 00:16:16,320 --> 00:16:19,230 ‫and the two options that we have when it comes 237 00:16:19,230 --> 00:16:23,310 ‫to passing down the value into our context. 238 00:16:23,310 --> 00:16:25,140 ‫So as I said in the beginning 239 00:16:25,140 --> 00:16:28,890 ‫when we are working with asynchronous data and code 240 00:16:28,890 --> 00:16:32,880 ‫we have two options when it comes to the dispatch function. 241 00:16:32,880 --> 00:16:34,770 ‫So the first option is to pass 242 00:16:34,770 --> 00:16:39,450 ‫in all the state plus the dispatch function into the value. 243 00:16:39,450 --> 00:16:42,240 ‫And then we can use the dispatch function 244 00:16:42,240 --> 00:16:45,390 ‫inside the components to update state. 245 00:16:45,390 --> 00:16:48,120 ‫However, since we're dealing with asynchronous data 246 00:16:48,120 --> 00:16:51,540 ‫we cannot have all the logic inside the reducer. 247 00:16:51,540 --> 00:16:53,850 ‫And so in the case that we were passing 248 00:16:53,850 --> 00:16:56,400 ‫the dispatch function into the context 249 00:16:56,400 --> 00:16:59,370 ‫then we would have to have this function here 250 00:16:59,370 --> 00:17:02,610 ‫inside the component that dispatches the action. 251 00:17:02,610 --> 00:17:05,520 ‫And you can try that out for yourself, of course. 252 00:17:05,520 --> 00:17:08,850 ‫So you can remove this function from here 253 00:17:08,850 --> 00:17:11,160 ‫and not pass it into the context, 254 00:17:11,160 --> 00:17:13,620 ‫but instead pass in dispatch. 255 00:17:13,620 --> 00:17:16,920 ‫But then you would have to pass all this data fetching logic 256 00:17:16,920 --> 00:17:18,270 ‫into that component 257 00:17:18,270 --> 00:17:21,090 ‫which is not really what we want if we want 258 00:17:21,090 --> 00:17:23,640 ‫to keep the components nice and clean 259 00:17:23,640 --> 00:17:26,760 ‫and therefore we are using the second option 260 00:17:26,760 --> 00:17:30,900 ‫which is to not pass the dispatch function into the context 261 00:17:30,900 --> 00:17:33,131 ‫but instead to use it here inside 262 00:17:33,131 --> 00:17:36,690 ‫these event handler functions, which these are. 263 00:17:36,690 --> 00:17:40,440 ‫So these are event handler functions that are called 264 00:17:40,440 --> 00:17:43,460 ‫for example, here on the click of this delete button. 265 00:17:43,460 --> 00:17:46,500 ‫And so then this time we use the dispatch inside 266 00:17:46,500 --> 00:17:47,670 ‫of these functions. 267 00:17:47,670 --> 00:17:50,910 ‫And then it is these functions that we pass here 268 00:17:50,910 --> 00:17:54,090 ‫into the context, okay? 269 00:17:54,090 --> 00:17:56,850 ‫But if we were not dealing with asynchronous data 270 00:17:56,850 --> 00:18:01,350 ‫then it would be better to just pass the dispatch function 271 00:18:01,350 --> 00:18:04,863 ‫and then create the actions right inside the components. 272 00:18:05,730 --> 00:18:09,780 ‫But anyway, let's make sure that this actually works. 273 00:18:09,780 --> 00:18:11,440 ‫So let's come to some city here 274 00:18:15,780 --> 00:18:17,670 ‫and let's see. 275 00:18:17,670 --> 00:18:22,590 ‫And beautiful, that just works exactly as before. 276 00:18:22,590 --> 00:18:24,090 ‫And the same probably here 277 00:18:24,090 --> 00:18:28,173 ‫for loading and also for deleting. 278 00:18:29,190 --> 00:18:30,210 ‫Nice. 279 00:18:30,210 --> 00:18:33,960 ‫And so now with this structure in place, it is actually 280 00:18:33,960 --> 00:18:38,880 ‫quite easy to implement some more related state updates. 281 00:18:38,880 --> 00:18:41,340 ‫So that's one of the huge advantages 282 00:18:41,340 --> 00:18:45,870 ‫of having all the state updating logic in one central place. 283 00:18:45,870 --> 00:18:49,920 ‫For example, we can say that as soon as a city is created 284 00:18:49,920 --> 00:18:53,580 ‫it should also become the currently active city. 285 00:18:53,580 --> 00:18:57,273 ‫And so again, it's now very easy to do that. 286 00:18:58,590 --> 00:19:03,590 ‫So we can just say current city is equal to action.payload. 287 00:19:06,420 --> 00:19:10,510 ‫And so then if we somewhere here create a new one 288 00:19:12,112 --> 00:19:14,850 ‫then we should see that immediately 289 00:19:14,850 --> 00:19:17,193 ‫with this green outline right here. 290 00:19:18,600 --> 00:19:22,200 ‫And the same thing actually when we delete a city. 291 00:19:22,200 --> 00:19:26,880 ‫So there's no need to then keep it in the current city 292 00:19:26,880 --> 00:19:30,483 ‫and so we can set it back to the original state. 293 00:19:32,100 --> 00:19:36,090 ‫Great. And this is actually it. 294 00:19:36,090 --> 00:19:36,923 ‫So with this 295 00:19:36,923 --> 00:19:41,280 ‫we successfully converted the use states that we had here 296 00:19:41,280 --> 00:19:44,910 ‫to a reducer, and we even created a new state. 297 00:19:44,910 --> 00:19:48,240 ‫So we even created the error, which we're not really using 298 00:19:48,240 --> 00:19:51,483 ‫but well, let's just pass it into the context as well. 299 00:19:53,130 --> 00:19:54,423 ‫So that's right here. 300 00:19:55,620 --> 00:19:56,803 ‫Okay. 301 00:19:56,803 --> 00:20:00,240 ‫And now there's just one small thing that 302 00:20:00,240 --> 00:20:05,240 ‫we can improve here, which is really just a small thing. 303 00:20:05,880 --> 00:20:07,950 ‫So here when we get the city 304 00:20:07,950 --> 00:20:11,370 ‫we can check if the ID that is being passed 305 00:20:11,370 --> 00:20:14,430 ‫in is the same as the current city. 306 00:20:14,430 --> 00:20:17,400 ‫And so basically we can check if the city that we 307 00:20:17,400 --> 00:20:20,220 ‫want to load is already the current city. 308 00:20:20,220 --> 00:20:23,013 ‫And so then there's no need to call the API again. 309 00:20:24,300 --> 00:20:29,300 ‫So that's ID equal to current city.id, then just return. 310 00:20:34,290 --> 00:20:36,220 ‫Now here we will just have one problem 311 00:20:38,250 --> 00:20:40,250 ‫and let me actually just show it to you. 312 00:20:42,150 --> 00:20:46,230 ‫So this is something very important that we, 313 00:20:46,230 --> 00:20:48,030 ‫well it's not return, 314 00:20:48,030 --> 00:20:52,413 ‫we want to console.log this actually. 315 00:20:55,110 --> 00:20:56,463 ‫So let's clean this. 316 00:20:57,450 --> 00:20:59,133 ‫And here we are still undefined. 317 00:21:00,570 --> 00:21:01,833 ‫Let's try another one. 318 00:21:02,730 --> 00:21:06,300 ‫So what I wanted to show you here is that the second thing 319 00:21:06,300 --> 00:21:09,990 ‫so this ID right here is actually a number. 320 00:21:09,990 --> 00:21:12,660 ‫So that's why it has this purple color here. 321 00:21:12,660 --> 00:21:16,890 ‫While the ID that we have right here is a string. 322 00:21:16,890 --> 00:21:19,140 ‫And the reason for that is that we are actually 323 00:21:19,140 --> 00:21:24,140 ‫reading this ID somewhere in that component from the URL. 324 00:21:24,270 --> 00:21:25,590 ‫And so everything that's coming 325 00:21:25,590 --> 00:21:28,740 ‫from the URL will automatically be a string. 326 00:21:28,740 --> 00:21:31,980 ‫And so if you want to do any comparisons like this 327 00:21:31,980 --> 00:21:36,903 ‫then you always need to convert this to a number. 328 00:21:39,540 --> 00:21:40,373 ‫Now, right? 329 00:21:40,373 --> 00:21:44,610 ‫And so now if we then load two times the same city in a row 330 00:21:44,610 --> 00:21:46,980 ‫then it should be instantaneous. 331 00:21:46,980 --> 00:21:48,453 ‫So you notice that. 332 00:21:49,920 --> 00:21:51,780 ‫So in order to load the city 333 00:21:51,780 --> 00:21:54,750 ‫it of course needs to load from the API, 334 00:21:54,750 --> 00:21:57,933 ‫but if we then click the same again, it doesn't do that. 335 00:21:59,160 --> 00:21:59,993 ‫Okay. 336 00:21:59,993 --> 00:22:03,390 ‫And with this we really finished just make sure, again 337 00:22:03,390 --> 00:22:05,910 ‫to review everything that we did here 338 00:22:05,910 --> 00:22:08,070 ‫and how we are now handling 339 00:22:08,070 --> 00:22:12,690 ‫these related state updates together in these events. 340 00:22:12,690 --> 00:22:16,290 ‫So again, this combination of a use reducer 341 00:22:16,290 --> 00:22:20,460 ‫and the context API is a pretty common pattern in React. 342 00:22:20,460 --> 00:22:22,350 ‫And so therefore, it's important 343 00:22:22,350 --> 00:22:24,900 ‫that you now know that it exists 344 00:22:24,900 --> 00:22:27,030 ‫and that you hopefully also know 345 00:22:27,030 --> 00:22:28,830 ‫how to implement it yourself. 346 00:22:28,830 --> 00:22:32,430 ‫And by the end of this section, I will give you, of course 347 00:22:32,430 --> 00:22:35,433 ‫a challenge so that you can practice this as well.