Master Redux Toolkit: The Modern Way to Manage State in React

• bilalshafqat42
• June 9, 2025
• React Js, Redux
• 0 Comments

State management has always been one of the most important and sometimes complicated parts of building React applications. If you’ve ever used Redux, you probably know it can get verbose and tricky. But Redux Toolkit (RTK), the official recommended approach for Redux, changes all that.

In this blog post, you’ll learn what Redux Toolkit is, why it’s better than traditional Redux, and how to use its most powerful features.

What is Redux Toolkit?

Redux Toolkit (RTK) is the official, opinionated, and batteries-included toolset for efficient Redux development. It helps you write clean, scalable, and maintainable Redux code with less boilerplate.

RTK provides:

• Simplified store setup
• Slice-based reducer creation
• Built-in support for asynchronous logic
• Best practices out of the box

🚀 Why Use Redux Toolkit Instead of Traditional Redux?

Traditional Redux often requires:

• Writing action types manually
• Creating separate action creators
• Writing repetitive switch/case reducers

Redux Toolkit eliminates most of this repetition. Here’s how it helps:

Traditional Redux Example:

function counterReducer(state = { value: 0 }, action) {
  switch (action.type) {
    case 'increment':
      return { value: state.value + 1 };
    default:
      return state;
  }
}

Redux Toolkit Version:

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

No more switch cases. No more action type constants. Cleaner and easier to read.

Getting Started with Redux Toolkit

Step 1: Install Redux Toolkit and React-Redux

npm install @reduxjs/toolkit react-redux

Step 2: Create a Slice

// features/counter/counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

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

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

Step 3: Configure the Store

// app/store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';

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

Step 4: Connect Your App to Redux

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './app/store';
import App from './App';

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

Handling Async Actions with createAsyncThunk

// features/users/usersSlice.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

export const fetchUsers = createAsyncThunk('users/fetchUsers', async () => {
  const response = await fetch('/api/users');
  return await response.json();
});

const usersSlice = createSlice({
  name: 'users',
  initialState: { users: [], status: 'idle' },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUsers.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchUsers.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.users = action.payload;
      })
      .addCase(fetchUsers.rejected, (state) => {
        state.status = 'failed';
      });
  },
});

export default usersSlice.reducer;

This removes the need to create separate action types or manage thunk logic manually.

Best Practices with Redux Toolkit

• Keep slice logic close to the components that use it
• Use createAsyncThunk for side effects like API calls
• Keep UI logic out of the Redux store
• Use Immer (built-in) for mutating state safely

🔍 Summary: Why Redux Toolkit?

If you want to build large-scale React apps or just want cleaner state logic, Redux Toolkit is the way to go.

📅 Ready to Try It?

You can check out a live example or starter template using Redux Toolkit or follow more guides on:
👉 https://bilalshafqat.com

Want to dive deeper into React? Check out:
👉 7 JavaScript Concepts to Learn Before React

💬 FAQs about Redux Toolkit

Q: Do I still need Redux DevTools?
A: Yes, and it’s integrated by default in configureStore().

Q: Can I use Redux Toolkit with TypeScript?
A: Absolutely! RTK is fully typed and works seamlessly with TS.

Q: Is Redux Toolkit suitable for small apps?
A: Yes, even small apps benefit from the cleaner setup.

Q: Does RTK replace Redux?
A: No. RTK is Redux. It just modernizes the API and usage.