How to Implement State Management in React Using Redux Toolkit?

Introduction

When building modern React applications, managing state becomes difficult as the application grows. Passing data from one component to another using props (prop drilling) becomes messy and hard to maintain.

This is where state management tools like Redux Toolkit come into the picture.

Redux Toolkit (RTK) is the official, recommended way to use Redux in React applications. It simplifies the setup, reduces boilerplate code, and makes state management easier to understand.

In this article, we will learn how to implement state management in React using Redux Toolkit in simple words, with step-by-step guidance and real-world examples.

What is State in React?

State is data that changes over time and affects what users see on the screen.

Examples of state:

User login status
Shopping cart items
Form input values
Theme (dark/light mode)

In small applications, React's built-in state (useState) works well. But in large applications, managing shared state across multiple components becomes difficult.

What is Redux Toolkit?

Redux Toolkit is a library that helps you manage global state in React applications easily.

It provides:

Simple setup for Redux store
Built-in tools to write reducers
Automatic handling of immutability
Better developer experience

In simple words, Redux Toolkit helps you store and manage application data in one central place.

Why Use Redux Toolkit for State Management?

Using Redux Toolkit in React applications provides several benefits:

Centralized state management
Easy data sharing between components
Predictable state updates
Cleaner and less code compared to traditional Redux

Real-world example:

In an e-commerce app, cart data is needed in multiple components like product page, cart page, and checkout page.

Redux Toolkit allows you to manage this data in one place instead of passing props everywhere.

Core Concepts of Redux Toolkit

To understand Redux Toolkit, you need to know a few basic concepts.

Store

The store is the central place where all application state is stored.

Think of it like a global database for your app.

Slice

A slice is a part of the state along with its logic (reducers and actions).

Example:

User slice
Cart slice

Each slice manages its own part of the state.

Reducer

A reducer is a function that updates the state based on actions.

In Redux Toolkit, reducers are written in a simpler way.

Action

An action is an event that tells Redux what to do.

Example:

Add item to cart
Remove item from cart

Step-by-Step Implementation of Redux Toolkit in React

Let’s now implement Redux Toolkit in a simple React application.

Step 1: Install Required Packages

Install Redux Toolkit and React Redux:

npm install @reduxjs/toolkit react-redux

Step 2: Create a Redux Store

Create a file called store.js and configure the store.

Example:

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

export const store = configureStore({
reducer: {
counter: counterReducer,
},
});

This creates a central store for your application.

Step 3: Create a Slice

Create a slice to manage state logic.

Example:

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

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

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

This defines state and actions in one place.

Step 4: Provide Store to React App

Wrap your app with Provider.

Example:

import { Provider } from 'react-redux';
import { store } from './store';

This makes the store available to all components.

Step 5: Use State and Dispatch Actions

Use hooks to access state and dispatch actions.

Example:

import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './counterSlice';

function Counter() {
const count = useSelector((state) => state.counter.value);
const dispatch = useDispatch();

return (

{count}
<button onClick={() => dispatch(increment())}>+
<button onClick={() => dispatch(decrement())}>-

);
}

Now your component can read and update global state.

Real-World Example: Shopping Cart

Let’s understand with a practical example.

Cart Slice:

Add item
Remove item
Clear cart

With Redux Toolkit:

Cart data is stored in one place
Any component can access it
No need for prop drilling

Example scenario:

User adds item on product page
Cart updates automatically on navbar and cart page

Advantages of Using Redux Toolkit

Less boilerplate code
Easy to understand and maintain
Centralized data management
Better debugging with DevTools

Disadvantages (Important to Know)

Slight learning curve for beginners
Not needed for very small apps
Adds extra setup compared to useState

When Should You Use Redux Toolkit?

Use Redux Toolkit when:

Your app has complex state
Many components need same data
You want predictable state flow

Avoid when:

App is small
State is limited to few components

Summary

Redux Toolkit is a powerful and simple way to manage state in React applications. It helps you keep all your application data in one place and makes it easy to update and share across components.

By using Redux Toolkit, you can avoid messy prop drilling, write cleaner code, and build scalable React applications that are easier to maintain and debug.