Our little redux application is working as expected and although it might not look like a lot of work, trust me it is, as you create different files for the action, action types, reducers. Looks like a lot of boilerplate. We just created one action and one reducer, but in the real world, you'll be dealing with multiple of them. And honestly, all this boilerplate code is too much work for what we're doing.

As an alternative, redux strongly recommends us to use Redux-toolkit. Redux knew that developers were hating this boilerplate setup, so they had to do something to get them back. This is what they did.

Let's see what it is exactly. Redux Toolkit is our official recommended approach for writing Redux logic. It wraps around the Redux core, and contains packages and functions that we think are essential for building a Redux app. Redux Toolkit builds in our suggested best practices, simplifies most Redux tasks, prevents common mistakes, and makes it easier to write Redux applications. Now after reading all this, you get a feeling that Redux strongly wants you to use it. It follows all the best practices, it takes off the boilerplate code; what else do you need as a developer?

Let's see if it's really worth it. Open the terminal and install it:

# NPM

npm install @reduxjs/toolkit

# Yarn

yarn add @reduxjs/toolkit

Once it's installed, let's start implementing it. Inside the redux folder, we can create a folder slice because every component state is the slice of the overall state. Let's create a new file and call it loginSlice. We can copy the interface and the initial state from the loginReducer file because that is going to be the same. Now this is the time where we will start using redux-toolkit. Let's export const loginSlice. Redux-toolkit gives us createSlice method which accepts an initial state and an object of reducer functions. If we hover over it, it says "A function that accepts an initial state, an object full of reducer functions, and a "slice name", and automatically generates action creators and action types that correspond to the reducers and state." It says it creates action creators and action types on our behalf, so that saves a lot of code for us.

Let's do what it says; pass an object with name which will be login, then let's pass the initialState and pass the reducers. The reducers we created here were using switch statement but here, we will give it an action type; let's call it increment, and like an action creator, it will accept a state and an action, then we can write state.visits is equal to action.payload.

Now, you must be wondering why the hell we are mutating the state. If its most essential redux guideline is to not mutate the state, then why? Well, although it looks like we are mutating the state; behind the scenes, redux toolkit's APIs use a tool which allows us to write mutating update logic that becomes correct immutable updates. So don't worry about it, we're following every guideline of redux.