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