# Smarter state management with Redux Toolkit (RTK)

[Redux](https://redux.js.org/) is one of the most sought-after tools for state management in React and React Native applications.

But one of the major issues developers especially beginners face is the amount of boilerplate and unnecessary code that is required to set up Redux in a project.

While looking for answers, the React team found a solution for the **three common concerns of Redux**

*   "Configuring a Redux store is too complicated"
    
*   "I have to add a lot of packages to get Redux to do anything useful"
    
*   "Redux requires too much boilerplate code"
    

Enters [Redux Toolkit](https://redux-toolkit.js.org/)...

Which according to the documentation is,

> The official, opinionated, batteries-included toolset for efficient Redux development

RTK not only removes a lot of complications in Redux but also offers enhancements giving a better development experience in the process.

It uses Redux core for state management, [Reselect](https://github.com/reduxjs/reselect) as a selector library, [Immer](https://github.com/immerjs/immer) which gives the functionality to directly mutate the state, and [Redux Thunk](https://github.com/reduxjs/redux-thunk) for async tasks.

In this post, we will set up RTK for the good ol' Counter Application.

To begin with we need to install the required dependencies. `npm install react-redux @reduxjs/toolkit`

### Store Configuration

We will create our store in `store/index.js`.

```javascript
// src/store/index.js

import {configureStore, getDefaultMiddleware} from '@reduxjs/toolkit';

import reducer from './counterSlice';

const middleware = getDefaultMiddleware();
const store = configureStore({
  reducer,
  middleware,
});

export default store;
```

### Creating the Slice

Gone are the days of creating separate files for Reducers, Actions, Action Creators, and those lengthy switch cases to handle these Actions in our reducers.

RTK provides us with a `createSlice` function that takes in a single object with the name of the slice, initial state, and all of our reducers.

```javascript
// src/store/counterSlice.js

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  counter: 0,
};

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      ++state.counter;
    },
    decrement: (state) => {
      --state.counter;
    },
  },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;
```

As you can see we are mutating the state directly instead of returning a new object, RTK uses Immer under the hood to handle immutability in the store. We are exporting the `counterSlice.reducer` object which is provided by the `createSlice` method. This is the reducer that we imported and passed to `configureStore` earlier in `store/index.js`. RTK also automatically generates our actions for us, which are available in the `counterSlice.actions` object.

That's all folks. With just two files and a few lines of code, we are able to bootstrap RTK in our application.

Watch this space for more!!