WEBVTT 00:00.320 --> 00:00.770 Okay. 00:00.770 --> 00:05.600 So what we're going to take a look at now is a challenge for yourself just to practice using Redux and 00:05.600 --> 00:11.540 dispatching actions to do something, to update the global state in our application and see the effects 00:11.540 --> 00:14.990 as our components rerender after a change is made. 00:14.990 --> 00:18.230 Now we're going to pick on dark mode once again for this challenge. 00:18.230 --> 00:23.480 It's currently working, but what it doesn't do at the moment is survive a refresh, because it goes 00:23.480 --> 00:24.980 back to the previous mode. 00:25.010 --> 00:32.840 Now, Redux isn't actually going to help us solve that problem in order to persist so that it remembers 00:32.840 --> 00:38.690 what the setting was when we refreshed our application, then we need to persist that setting outside 00:38.690 --> 00:40.160 of our application code. 00:40.160 --> 00:46.250 And one place where we can persist data is in our browser storage. 00:46.250 --> 00:52.850 If we go to application tab in Chrome DevTools and we take a look at local storage, then inside here 00:52.850 --> 00:56.450 is a place where we can store key and value pairs. 00:56.450 --> 01:02.340 So I could have a dark mode key and that value could be set to true or false. 01:02.340 --> 01:07.950 And then we can read from this storage so that when our application starts up, we can read the dark 01:07.980 --> 01:14.040 mode key, see what its value is, and then use that to set the dark mode in our application. 01:14.070 --> 01:20.280 Now, because we haven't talked about how we do that, I'm going to show you how we do this using our 01:20.280 --> 01:21.210 current setup. 01:21.210 --> 01:28.650 And then the challenge will be for you to move what we currently have using you states into our Redux 01:28.650 --> 01:32.430 UI slice and get it working via Redux as well. 01:32.460 --> 01:36.060 So first of all, let's take a look at how we deal with local storage. 01:36.060 --> 01:41.160 I'll just close all of this stuff down and I'll open up the app dot TSX. 01:41.160 --> 01:44.280 So what we're currently doing is we're using Usestate. 01:44.310 --> 01:45.810 Now that is fine. 01:46.050 --> 01:53.550 But what I'd like to do is be able to set this use state setting based on what's configured in local 01:53.550 --> 01:54.120 storage. 01:54.120 --> 01:58.110 Now I'm just going to create a little helper function which we can use here. 01:58.110 --> 02:02.020 And then you would be able to use inside the UI slice as well. 02:02.020 --> 02:09.100 But I'll do it inside here and I'm going to say const get initial dark mode equals. 02:09.100 --> 02:10.840 And I'll make this an arrow function. 02:10.840 --> 02:15.790 And I'm just going to say const stored dark mode equals. 02:15.790 --> 02:19.990 And then to use local storage we do have a function that's available to us. 02:19.990 --> 02:22.900 And we can say local storage Getitem. 02:22.900 --> 02:25.600 And we can set it to dark mode. 02:25.600 --> 02:27.400 That's going to be the name of the key. 02:27.610 --> 02:30.490 And then we can return the stored dark mode. 02:30.490 --> 02:33.010 But it might not be set inside local storage. 02:33.010 --> 02:34.780 So we're going to use a ternary here. 02:34.780 --> 02:40.990 And in order to get the value then we need to use Json.parse. 02:40.990 --> 02:45.010 So I'm going to say Json.parse and stored dark mode. 02:45.010 --> 02:46.630 And we're using a ternary here. 02:46.630 --> 02:50.920 So that's what we're going to use if we do have something inside here. 02:50.920 --> 02:53.380 Because if we hover over this it could be null. 02:53.500 --> 02:57.130 So if it is null then we're just going to set it to true. 02:57.160 --> 03:02.720 As in we're always going to start in dark mode unless the user specifies otherwise. 03:02.720 --> 03:08.990 And if they do specify otherwise, then it will be set to false and persisted in local storage in the 03:08.990 --> 03:09.800 browser. 03:10.100 --> 03:12.830 And instead of use state false. 03:12.830 --> 03:18.170 Here I'm just going to use the get initial dark mode function, which is going to use this function 03:18.170 --> 03:20.870 to find out what it is in local storage. 03:20.960 --> 03:23.390 So that works for getting the initial dark mode. 03:23.390 --> 03:26.690 But what we also need to do is in our toggle dark mode. 03:26.720 --> 03:31.100 We also need to set local storage inside there as well. 03:31.130 --> 03:37.790 So to do that inside our toggle dark mode we'll say local storage and set item. 03:37.790 --> 03:39.890 And this needs to be dark mode. 03:39.890 --> 03:43.220 Exactly what we've specified it up here. 03:43.220 --> 03:45.620 So please do make sure that's identical. 03:45.620 --> 03:52.910 And then to store something in local storage we need to use Json.stringify so that our boolean is converted 03:52.910 --> 03:53.630 into a string. 03:53.630 --> 03:56.820 Because the local storage is a key value store. 03:56.820 --> 03:59.640 So it needs a key and the value has to be a string. 03:59.640 --> 04:03.120 So we use Json.stringify here and inside here. 04:03.120 --> 04:05.970 We'll also set this to the opposite of dark mode. 04:05.970 --> 04:12.690 And in fact I'm just going to move this above the set state just in case there's a timing conflict. 04:12.690 --> 04:19.770 And the setting of dark mode here changes it before we've had a chance to update local storage. 04:19.770 --> 04:21.570 So anyway, let's go take a look. 04:21.600 --> 04:25.350 And if we take a look at our progress, I can see that I'm currently in dark mode. 04:25.350 --> 04:28.140 If I refresh the page, I stay in dark mode. 04:28.140 --> 04:32.220 And that's based on the fact that if we don't have a value for stored dark mode, then we're just going 04:32.250 --> 04:33.360 to set that to true. 04:33.390 --> 04:38.250 If I go back, I open up the Chrome DevTools again, go to the application. 04:38.250 --> 04:45.420 I can see there's nothing in dark mode, but if I click the light mode, then notice that this is now 04:45.420 --> 04:47.820 populated with dark mode and it's set to false. 04:47.820 --> 04:48.480 And what that means. 04:48.480 --> 04:52.200 If I refresh my page again, then we persist in light mode. 04:52.200 --> 04:54.840 If I change it to dark, that changes to true. 04:54.840 --> 04:59.240 I refreshed the page again and we persist our user interface setting. 04:59.240 --> 04:59.930 So great. 04:59.930 --> 05:04.520 That was the bit I wanted to explain because we haven't covered how to use local storage yet. 05:04.550 --> 05:05.570 Now we have. 05:05.600 --> 05:11.930 And we've also covered how to use Redux states and how to dispatch actions. 05:11.960 --> 05:19.040 Now for this particular challenge, what I would like you to do is remove the usage of use state and 05:19.040 --> 05:27.260 move this functionality into our UI, slice and dispatch actions to toggle the dark mode state instead. 05:27.260 --> 05:32.510 And you can also take this function and use that directly in the UI slice as well. 05:33.110 --> 05:34.220 So please give this a go. 05:34.250 --> 05:36.980 See if you can get this state moved into your Redux store. 05:37.010 --> 05:40.640 Don't forget to use your Redux troubleshooting DevTools as well. 05:40.640 --> 05:46.640 If you do need some help to see what is going on inside your store, and please give that a go and see 05:46.640 --> 05:49.970 if you can get that functionality moved over into Redux. 05:49.970 --> 05:54.920 And in the next lesson, I'll just demonstrate the solution of how we do this.