Okay, now let's take a look at achieving the same as what we've achieved here with all of this code.
With the counter reducer, we're going to take a look at replicating that functionality and the Action
creator functions using the Redux toolkit.
Instead, we will keep the part at the top, the counter state or the initial state and the counter
state type.
We still need that functionality, but I'm just going to move the functions down.
And in fact I'm going to change this to increment legacy.
And I appreciate that's going to make our contact page have an error.
But I want to use the same names for these action creators in the Redux toolkit.
We don't need to worry about the name of this.
That's fine.
And we're not really going to be using this code, but I'm just going to leave it behind as an example
and something that we can compare it to.
So we're still going to use the initial state and the type we've already created though.
So the way that we use Redux Toolkit is we deal with Redux in terms of slices.
We have one big overall store.
We can refer to that as the pie if you like.
And our pie can have many slices.
We're going to create a counter slice.
Instead of just calling it a counter reducer we're going to say export const and counter slice.
And we're going to use a function from Redux Toolkit called Create Slice.
Then we open up parentheses and curly brackets and we can give our slice a name.
And I'm going to give it a name of counter.
We pass it the initial state as the second parameter here.
And then we specify the reducers we want inside here.
Now I'm going to say reducers colon open curly brackets.
And then we can specify our function.
So we're going to have an increment function.
And we pass this as parameters.
The states are states inside our slice and the action.
And then we open an arrow function and then curly brackets to open up the body of this function.
And then we can say state dot data.
And then inside here we can and do mutate states because in the background.
And this is some of the magic that comes along with Redux Toolkit.
It uses a library called Emma, which makes it much more or much more convenient for us as developers
to handle state inside Redux.
Now, if I just briefly cross to the documentation for Redux, then one of the most essential bits of
advice is do not mutate states.
And they say it's essential.
And it's one of the most common cause of bugs in Redux applications.
And the way that we did it before.
Inside the reducer function is we used the spread operator, which guarantees that we're not going to
mutate that state.
That's going to create some new states and return new states instead of mutating the states.
Or what I'm about to do here is I'm going to say plus equals action.payload.
Now this 100% is mutating states.
And why am I doing this?
Well, it's because our React Redux toolkit, it comes with this library called IMA, which allows us
to write the code as though we're mutating states, but in the background that we do not see here.
It creates a draft of the current state, and it allows us to mutate the draft state as if this was
mutable states, and then it produces a completely new state object based on our mutations without changing
the original state.
So this is perfectly valid code and is the recommended code to use inside Redux toolkit.
I'm just going to add a decrement function as well, and we'll use the state and the action again as
the arguments open up the body of the request, change the period to an angle brackets, and then we'll
say statedata and then minus equals action.payload.
And then what we need to do is export our two actions here.
So I'll just come down to the bottom or I'll just do it underneath the export here I would typically
put this at the bottom because I've got this like legacy code here.
I'm just going to leave that in place and I'm just going to say export const open curly brackets say
equals counter slice dot actions.
And then inside the curly brackets we're going to export our two reducer functions or actions there.
So I'm going to say increment and decrement.
And now we can go ahead and use these in our contact page.
But before we get there we do need to make an adjustment to our store as well because we handle this
in a different way.
So I'm going to go to our store method and below this function that we're not really going to use anymore.
I'll just keep it in place just in case.
For reference, I'm going to say export const store equals.
And then we're going to use configure store which we get from Redux toolkits and open parentheses open
curly brackets.
And then we specify the reducer inside here open more curly brackets.
And I'm going to give the reducer a name of counter.
Add a colon and then say counter slice dot reducer.
And this is what we're going to use as our store for our React Redux provider.
So back to Main.ts.
Let's remove what we have here the const store from configure the store.
And we don't need that console.log either.
So let's just remove the import here as well.
And for our store because we've called it store and we're exporting it, we can then just add the import
from App Store store.
And that's now going to be using the Redux toolkit version of what we've done.
Just one more small change to make in our contact page.
If I just come up here, let's just remove the decrement and the increment.
I'll keep the counter state as we're using it here for the time being.
And I'll, I'll bring in the decrement.
I'll update the import from counter reducer.
And I've still got an error actually.
And the reason for the error.
Let's bring in the other one as well, is we no longer have a default value for our different functions
here.
So I'm just going to specify one and one fully decrement and the increment and keep this one as five.
So now we're back to where we were before.
But what we've got now is a much smaller piece of code for our reducer function, our action creators.
We don't have that nasty looking switch statement that we needed in the original version of just using
Redux.
And we've got some convenience in how we create this code as well, in the fact that we don't need to
worry about the biggest problem that developers had with Redux previously, which is state mutation.
It's just something we don't need to worry about when we're using the Redux toolkit.
So all of these are big advantages and a smaller amount of code, and it's cleaner as well.
But let's make sure it still works after hyping it up.
So I'll just refresh the page, make sure everything's clean.
And there's the first problem is we're we're not using the same kind of selector anymore.
And in fact that's a bit of adjustment we do need to make.
I think we should be able to get the let's see if I use the selector here in this way instead of state
dot data.
What we should be using now is states and say goes to state dot counter.
Yeah, we need to use this in a slightly different way.
Now.
I thought I might be able to get away with that, but we do not.
So let's go back to our store.
TS there's a bit more work we need to do here, and we're going to make our Redux functionality TypeScript
happy.
So to do that, I'm going to export a type and I'm going to call it route.
State equals return type.
And by the way this TypeScript is going to seem a little bit complicated.
But I'm really just getting it from the documentation in the Redux Toolkit docs.
They do suggest if I come to let's see, is it in tutorials?
The TypeScript quick start.
And what I'm doing here is really just using this define typed hooks, which allows us to create better
typed versions of the use dispatch and use selector that we had earlier on.
So if we do come to the documentation, then we can see the kind of thing that we're using here.
And this has actually been updated since I looked at this.
It looks a bit more convenient to use now than what we used previously, an older version of the documentation.
So probably worth coming in to look at this, because this is a bit cleaner than what we used before.
And I'm just going to copy this and I'm going to come back to the code and instead of what I had there,
I'm just going to paste this in.
And then we can just bring in, use dispatch and add the import from React Redux and say use selector,
update the imports.
And we also need these types as well.
So back to the documentation.
And just above this we should have the two types.
And it's this route states and the App dispatch.
So I'm just going to copy these two lines as well.
We don't need the App Store for anything we're doing.
So I'm just going to copy or paste those two in there.
And I don't need that comment either.
Okay.
So the idea being that instead of using use dispatch and use selector, we use use app dispatch and
use app selector.
And that gives us better type safety when we're using our Redux store.
So I'll go back to the contacts page and instead of use selector I'm going to say use app selector.
And then state goes to state Dot.
And then we've got access to our counter slice and then instead of using dispatch, we can use app dispatch
instead.
And let's just clean up things from the top here as well.
And we don't need the counter state in here anymore either.
And then as far as data goes, because we're getting this from our counter slice, then this needs to
be in curly brackets and everything should be good now.
So let's go take a look at our browser.
And if we refresh the page then we've got our contact page back.
We've got the data back to be in 42.
If we increment we go up.
If we decrement, we go down.
And if we increment by five then that's got the desired effect.
And Redux will be much more easy convenient to use with those changes and the use of Redux toolkit.
And another advantage of using Redux is we get access to one of the best developer tools I think I've
ever seen, and we're going to take a look at what that is next.