Smarter state management with Redux Toolkit (RTK)

#redux #javascript #react #reactnative

Redux 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...

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 as a selector library, Immer which gives the functionality to directly mutate the state and 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.

// 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 which takes in a single object with the name of the slice, initial state, and all of our reducers.

// 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!!