State Management in React with Redux Toolkit

When I was working on a mutual fund website that involved managing a lot of complex data across different components, Redux Toolkit (RTK) made my life so much easier.

Initially, managing state in a large application felt overwhelming, with too many actions, reducers, and boilerplate code.

But when I switched to Redux Toolkit, it simplified everything — making it not only easy to manage but also faster to implement.

In this blog, I’ll walk you through how to set up Redux Toolkit in a project and also tackle some common challenges you might face along the way.

Why Choose Redux Toolkit?

Redux Toolkit eliminates a lot of the complexity that comes with traditional Redux.

It:

Reduces boilerplate code — No more writing multiple actions, reducers, and constants manually.
Has built-in Redux DevTools support for easy debugging.
Comes with createSlice and createAsyncThunk that simplify state updates and API calls.

If you're working on a project that needs to manage a lot of state or frequently updates data, Redux Toolkit is the way to go.

Step 1: Install Redux Toolkit and React-Redux

To get started, open your terminal and run:

npm install @reduxjs/toolkit react-redux

That’s it. You’re ready to move on!

Step 2: Set Up Redux Toolkit in Your Project

Create a Redux Folder Structure

In your src folder, create a redux folder with the following structure:

/src

└── /redux

├── /slices

│ └── dataSlice.js

├── store.js

└── /features

└── userFeature.js

Create Your First Slice

Inside redux/slices/dataSlice.js:

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

const initialState = {

data: [],

loading: false,

error: null,

};

const dataSlice = createSlice({

name: "data",

initialState,

reducers: {

setData: (state, action) => {

state.data = action.payload;

setLoading: (state, action) => {

state.loading = action.payload;

setError: (state, action) => {

state.error = action.payload;

});

export const { setData, setLoading, setError } = dataSlice.actions;

export default dataSlice.reducer;

Set Up the Redux Store

Inside redux/store.js:

import { configureStore } from "@reduxjs/toolkit";

import dataReducer from "./slices/dataSlice";

const store = configureStore({

reducer: {

data: dataReducer,

});

export default store;

Wrap Your App with Redux Provider

Open your index.js or main.js and update it:

import React from "react";

import ReactDOM from "react-dom";

import { Provider } from "react-redux";

import store from "./redux/store";

import App from "./App";

ReactDOM.render(

<App />

</Provider>,

document.getElementById("root")

);

Step 3: Using Redux in Components

Access Redux State

To get data in your component:

import React from "react";

import { useSelector } from "react-redux";

const DataList = () => {

const data = useSelector((state) => state.data.data);

return (

<div>

{data.map((item, index) => (

))}

</div>

);

};

export default DataList;

Dispatch Actions

To update state from your component:

import React from "react";

import { useDispatch } from "react-redux";

import { setData } from "../redux/slices/dataSlice";

const AddData = () => {

const dispatch = useDispatch();

const addNewData = () => {

const newData = ["Mutual Fund A", "Mutual Fund B"];

dispatch(setData(newData));

};

return <button onClick={addNewData}>Add Data</button>;

};

export default AddData;

Common Challenges and How to Fix Them

When I first used Redux Toolkit on a large project like the mutual fund website, I faced some issues that might trip you up too. Here’s how I tackled them:

Forgetting to Wrap with Provider
If your Redux state is not accessible, make sure you have wrapped your App component with Provider in index.js.
Incorrect Slice or Reducer Name
Double-check the name of your slices and reducers. If you name your slice dataSlice, your reducer will be available at state.data not state.dataSlice.
Async Operations Not Working Properly
For API calls, make sure you use createAsyncThunk which helps you handle asynchronous actions without extra middleware.

Bonus: Handling APIs with createAsyncThunk

If you need to handle API requests, createAsyncThunk makes it seamless.

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";

import axios from "axios";

// Fetch Data Action

export const fetchData = createAsyncThunk("data/fetchData", async () => {

const response = await axios.get("https://api.example.com/data");

return response.data;

});

const dataSlice = createSlice({

name: "data",

initialState: {

data: [],

loading: false,

error: null,

extraReducers: (builder) => {

builder

.addCase(fetchData.pending, (state) => {

state.loading = true;

})

.addCase(fetchData.fulfilled, (state, action) => {

state.loading = false;

state.data = action.payload;

})

.addCase(fetchData.rejected, (state, action) => {

state.loading = false;

state.error = action.error.message;

});

export default dataSlice.reducer;

Conclusion: Why Redux Toolkit is Worth It

When I implemented Redux Toolkit in the mutual fund project, it simplified complex state management. It reduced the amount of boilerplate code and made it easier to debug and maintain.

If you’re working on a large project or something that involves multiple data sources and complex state management, I highly recommend giving Redux Toolkit a try. Once you get a hang of it, managing state becomes second nature.

Got stuck somewhere? Let me know, and I’ll be happy to help!