Okay.
So what we're going to take a look at now is a challenge for yourself just to practice using Redux and
dispatching actions to do something, to update the global state in our application and see the effects
as our components rerender after a change is made.
Now we're going to pick on dark mode once again for this challenge.
It's currently working, but what it doesn't do at the moment is survive a refresh, because it goes
back to the previous mode.
Now, Redux isn't actually going to help us solve that problem in order to persist so that it remembers
what the setting was when we refreshed our application, then we need to persist that setting outside
of our application code.
And one place where we can persist data is in our browser storage.
If we go to application tab in Chrome DevTools and we take a look at local storage, then inside here
is a place where we can store key and value pairs.
So I could have a dark mode key and that value could be set to true or false.
And then we can read from this storage so that when our application starts up, we can read the dark
mode key, see what its value is, and then use that to set the dark mode in our application.
Now, because we haven't talked about how we do that, I'm going to show you how we do this using our
current setup.
And then the challenge will be for you to move what we currently have using you states into our Redux
UI slice and get it working via Redux as well.
So first of all, let's take a look at how we deal with local storage.
I'll just close all of this stuff down and I'll open up the app dot TSX.
So what we're currently doing is we're using Usestate.
Now that is fine.
But what I'd like to do is be able to set this use state setting based on what's configured in local
storage.
Now I'm just going to create a little helper function which we can use here.
And then you would be able to use inside the UI slice as well.
But I'll do it inside here and I'm going to say const get initial dark mode equals.
And I'll make this an arrow function.
And I'm just going to say const stored dark mode equals.
And then to use local storage we do have a function that's available to us.
And we can say local storage Getitem.
And we can set it to dark mode.
That's going to be the name of the key.
And then we can return the stored dark mode.
But it might not be set inside local storage.
So we're going to use a ternary here.
And in order to get the value then we need to use Json.parse.
So I'm going to say Json.parse and stored dark mode.
And we're using a ternary here.
So that's what we're going to use if we do have something inside here.
Because if we hover over this it could be null.
So if it is null then we're just going to set it to true.
As in we're always going to start in dark mode unless the user specifies otherwise.
And if they do specify otherwise, then it will be set to false and persisted in local storage in the
browser.
And instead of use state false.
Here I'm just going to use the get initial dark mode function, which is going to use this function
to find out what it is in local storage.
So that works for getting the initial dark mode.
But what we also need to do is in our toggle dark mode.
We also need to set local storage inside there as well.
So to do that inside our toggle dark mode we'll say local storage and set item.
And this needs to be dark mode.
Exactly what we've specified it up here.
So please do make sure that's identical.
And then to store something in local storage we need to use Json.stringify so that our boolean is converted
into a string.
Because the local storage is a key value store.
So it needs a key and the value has to be a string.
So we use Json.stringify here and inside here.
We'll also set this to the opposite of dark mode.
And in fact I'm just going to move this above the set state just in case there's a timing conflict.
And the setting of dark mode here changes it before we've had a chance to update local storage.
So anyway, let's go take a look.
And if we take a look at our progress, I can see that I'm currently in dark mode.
If I refresh the page, I stay in dark mode.
And that's based on the fact that if we don't have a value for stored dark mode, then we're just going
to set that to true.
If I go back, I open up the Chrome DevTools again, go to the application.
I can see there's nothing in dark mode, but if I click the light mode, then notice that this is now
populated with dark mode and it's set to false.
And what that means.
If I refresh my page again, then we persist in light mode.
If I change it to dark, that changes to true.
I refreshed the page again and we persist our user interface setting.
So great.
That was the bit I wanted to explain because we haven't covered how to use local storage yet.
Now we have.
And we've also covered how to use Redux states and how to dispatch actions.
Now for this particular challenge, what I would like you to do is remove the usage of use state and
move this functionality into our UI, slice and dispatch actions to toggle the dark mode state instead.
And you can also take this function and use that directly in the UI slice as well.
So please give this a go.
See if you can get this state moved into your Redux store.
Don't forget to use your Redux troubleshooting DevTools as well.
If you do need some help to see what is going on inside your store, and please give that a go and see
if you can get that functionality moved over into Redux.
And in the next lesson, I'll just demonstrate the solution of how we do this.