IMRANDEV

State management in React apps is one of the most common challenges developers face. As apps grow, managing state across multiple components can become messy, buggy, and hard to maintain. Traditional Redux solves this problem, but it comes with verbose boilerplate code. Redux Toolkit (RTK) was created to simplify Redux, giving developers a cleaner, faster, and more maintainable approach to state management.

Why Redux Toolkit is a Game-Changer

Redux Toolkit reduces boilerplate while providing scalable, production-ready state management. Key features include configureStore(), createSlice(), createAsyncThunk(), and optional RTK Query for automatic data fetching and caching.

Setting Up Redux Toolkit in a React App

Step 1: Install Dependencies

npm install @reduxjs/toolkit react-redux

Step 2: Create a Slice

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

export const fetchTodos = createAsyncThunk(
  'todos/fetchTodos',
  async () => {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos?_limit=5');
    return response.json();
  }
);

const todoSlice = createSlice({
  name: 'todos',
  initialState: { todos: [], loading: false, error: null },
  reducers: {
    addTodo: (state, action) => { state.todos.push(action.payload); },
    removeTodo: (state, action) => {
      state.todos = state.todos.filter(todo => todo.id !== action.payload);
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchTodos.pending, (state) => { state.loading = true; })
      .addCase(fetchTodos.fulfilled, (state, action) => {
        state.loading = false;
        state.todos = action.payload;
      })
      .addCase(fetchTodos.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message;
      });
  },
});

export const { addTodo, removeTodo } = todoSlice.actions;
export default todoSlice.reducer;

Step 3: Configure the Store

import { configureStore } from '@reduxjs/toolkit';
import todoReducer from './todoSlice';

export const store = configureStore({
  reducer: { todos: todoReducer },
});

Step 4: Provide the Store in Your App

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

ReactDOM.render(
  <Provider store={store}><App /></Provider>,
  document.getElementById('root')
);

Best Practices for Redux Toolkit

Keep slices focused, organize folders clearly, use selectors and memoization, leverage TypeScript, and optionally use RTK Query for API caching.

Conclusion

Redux Toolkit is a professional-grade state management solution for React apps. It reduces boilerplate, simplifies async operations, and enables scalable, maintainable, and portfolio-worthy apps.

←Back to Blogs

React

Mastering Redux Toolkit: The Ultimate Guide for React Developers