WEBVTT 00:00.350 --> 00:04.850 Okay, so I'm just going to present the solution to the small challenge about moving our local state 00:04.850 --> 00:06.620 into Redux state. 00:06.620 --> 00:10.160 And pretty straightforward to approach this. 00:10.160 --> 00:16.520 I'm just going to cut this function, and I'm going to move it to the UI slice in its entirety and just 00:16.520 --> 00:20.870 put it in above the create slice function there. 00:20.870 --> 00:26.060 Now because this is going to be stored in our state, our initial state, we're going to set our dark 00:26.090 --> 00:28.220 mode inside here. 00:28.220 --> 00:29.510 And I'll say dark mode. 00:29.510 --> 00:36.620 And I'm going to use the get initial dark mode function to set it based on what it is in local storage, 00:36.620 --> 00:39.980 if it's there or if not, then it's just going to be set to dark mode. 00:40.010 --> 00:43.040 True, if we do not have anything in local storage. 00:43.070 --> 00:46.010 And then all I need is a reducer function. 00:46.010 --> 00:53.450 So I'm going to say set dark mode and use state and I'll use local storage. 00:53.450 --> 00:57.200 In fact, I'll just cut to what I had inside here. 00:57.500 --> 00:58.790 I'll use local storage. 00:58.790 --> 01:03.710 I'll cut this and I'll paste it into here. 01:03.710 --> 01:09.440 And this is just going to be opposite to whatever state dark mode currently is for local storage. 01:09.440 --> 01:15.190 and then I can say state dark mode is equal to not state dot dark mode. 01:15.190 --> 01:18.880 So it operates as a toggle just like we had before. 01:18.910 --> 01:22.600 Now because we've got this stuff in Redux. 01:22.600 --> 01:27.070 Now if we go back to our app dot TSX, we can start cleaning up some of this code. 01:27.100 --> 01:29.470 Do we need this toggle dark mode function? 01:29.470 --> 01:30.370 No, we do not. 01:30.400 --> 01:35.830 We do not need to pass down either the dark mode setting or the toggle dark mode to the navbar. 01:35.860 --> 01:45.100 Now either we can remove that, and that also means that we can remove the use state and swap it with 01:45.100 --> 01:47.350 a selector from our Redux store. 01:47.380 --> 01:55.330 So I'm going to say const and open curly brackets equals use app selector and say state goes to state 01:55.330 --> 01:56.770 dot UI. 01:57.310 --> 02:02.830 And then we can use the dark mode from our Redux store inside here. 02:02.830 --> 02:04.600 So we don't need use state anymore. 02:04.600 --> 02:09.820 And we don't need to pass down that functionality to our navbar because we can get it from our global 02:09.820 --> 02:10.510 store. 02:10.540 --> 02:16.840 So if I go over to the navbar and inside the navbar, we can now remove the props that we're passing 02:16.840 --> 02:16.990 in. 02:16.990 --> 02:18.550 We don't need the dark mode toggle. 02:18.750 --> 02:22.080 So let's remove that from there. 02:22.080 --> 02:28.320 And we can remove the props that we're passing in and we can use from our states UI. 02:28.350 --> 02:34.170 We can use the and we can use the dark mode from our Redux store. 02:34.200 --> 02:39.600 And we just need the dispatch function so that we can set the dark mode as well. 02:39.630 --> 02:44.610 So I'll say const dispatch equals use app dispatch. 02:45.030 --> 02:52.560 And then inside our icon button we can say we'll add the parentheses at the arrow. 02:52.890 --> 02:55.230 And then we'll use the dispatch. 02:55.920 --> 03:02.880 And we'll use the set dark mode which I need to export from the UI slice of course. 03:02.880 --> 03:06.180 So I'll use the set dark mode inside here. 03:06.210 --> 03:12.510 Go back to the navbar and then use the set Dark mode function. 03:12.510 --> 03:15.390 And what this should mean is everything stays the same. 03:15.420 --> 03:20.880 I've got some warnings in the app, and that's just because I've got an unused import there now and 03:20.880 --> 03:21.960 everything should be clean. 03:21.960 --> 03:25.440 But what we should have now is the same functionality that we did before. 03:25.440 --> 03:30.870 But now everything's happening inside our Redux store, and we're making use of dispatch and selectors. 03:30.900 --> 03:34.920 We've removed the prop parsing down to the navbar, so it's a bit cleaner. 03:34.920 --> 03:39.660 And if we go and take a look at our functionality, we should see that it's still stayed the same. 03:39.660 --> 03:42.270 And I can toggle between the different modes. 03:42.390 --> 03:46.440 And if I do and I refresh, then that's persisted as well. 03:46.440 --> 03:48.840 And that's all happening within Redux now. 03:48.840 --> 03:50.040 So brilliant. 03:50.040 --> 03:54.720 And that's where we wanted to get to for this Redux section. 03:54.720 --> 03:57.780 That's the last action that we're going to take inside here. 03:57.780 --> 04:00.390 So pretty cool stuff that we've been looking at so far. 04:00.390 --> 04:03.690 And we will be using this to build the rest of our application. 04:03.720 --> 04:10.380 So there's plenty of opportunity to practice the concepts that we've been looking at so far and enhance 04:10.380 --> 04:13.230 them to build the rest of our application. 04:13.230 --> 04:18.750 So let's go across to VSCode because we've finished this section now we've reached another milestone 04:18.750 --> 04:23.010 and we're going to commit our hard work into source control. 04:23.010 --> 04:30.480 So I'm just going to stage the changes and then I'm going to say end of section five as the commit message. 04:30.510 --> 04:36.990 I'll click commit and we'll sync these changes with GitHub and we'll wrap up with a summary.