Okay, so I'm just going to present the solution to the small challenge about moving our local state
into Redux state.
And pretty straightforward to approach this.
I'm just going to cut this function, and I'm going to move it to the UI slice in its entirety and just
put it in above the create slice function there.
Now because this is going to be stored in our state, our initial state, we're going to set our dark
mode inside here.
And I'll say dark mode.
And I'm going to use the get initial dark mode function to set it based on what it is in local storage,
if it's there or if not, then it's just going to be set to dark mode.
True, if we do not have anything in local storage.
And then all I need is a reducer function.
So I'm going to say set dark mode and use state and I'll use local storage.
In fact, I'll just cut to what I had inside here.
I'll use local storage.
I'll cut this and I'll paste it into here.
And this is just going to be opposite to whatever state dark mode currently is for local storage.
and then I can say state dark mode is equal to not state dot dark mode.
So it operates as a toggle just like we had before.
Now because we've got this stuff in Redux.
Now if we go back to our app dot TSX, we can start cleaning up some of this code.
Do we need this toggle dark mode function?
No, we do not.
We do not need to pass down either the dark mode setting or the toggle dark mode to the navbar.
Now either we can remove that, and that also means that we can remove the use state and swap it with
a selector from our Redux store.
So I'm going to say const and open curly brackets equals use app selector and say state goes to state
dot UI.
And then we can use the dark mode from our Redux store inside here.
So we don't need use state anymore.
And we don't need to pass down that functionality to our navbar because we can get it from our global
store.
So if I go over to the navbar and inside the navbar, we can now remove the props that we're passing
in.
We don't need the dark mode toggle.
So let's remove that from there.
And we can remove the props that we're passing in and we can use from our states UI.
We can use the and we can use the dark mode from our Redux store.
And we just need the dispatch function so that we can set the dark mode as well.
So I'll say const dispatch equals use app dispatch.
And then inside our icon button we can say we'll add the parentheses at the arrow.
And then we'll use the dispatch.
And we'll use the set dark mode which I need to export from the UI slice of course.
So I'll use the set dark mode inside here.
Go back to the navbar and then use the set Dark mode function.
And what this should mean is everything stays the same.
I've got some warnings in the app, and that's just because I've got an unused import there now and
everything should be clean.
But what we should have now is the same functionality that we did before.
But now everything's happening inside our Redux store, and we're making use of dispatch and selectors.
We've removed the prop parsing down to the navbar, so it's a bit cleaner.
And if we go and take a look at our functionality, we should see that it's still stayed the same.
And I can toggle between the different modes.
And if I do and I refresh, then that's persisted as well.
And that's all happening within Redux now.
So brilliant.
And that's where we wanted to get to for this Redux section.
That's the last action that we're going to take inside here.
So pretty cool stuff that we've been looking at so far.
And we will be using this to build the rest of our application.
So there's plenty of opportunity to practice the concepts that we've been looking at so far and enhance
them to build the rest of our application.
So let's go across to VSCode because we've finished this section now we've reached another milestone
and we're going to commit our hard work into source control.
So I'm just going to stage the changes and then I'm going to say end of section five as the commit message.
I'll click commit and we'll sync these changes with GitHub and we'll wrap up with a summary.