Redux Toolkit Simplified

Redux Toolkit (RTK) is the official, recommended way to use Redux. It reduces boilerplate, simplifies configuration, and makes Redux easier to learn and use.

Why Redux Toolkit?

Traditional Redux is:

• Verbose

• Hard to set up

• Boilerplate-heavy

Redux Toolkit:

• Fewer files

• Cleaner syntax

• Built-in best practices

• Faster development

What Redux Toolkit Provides

• configureStore() – simplified store setup

• createSlice() – actions + reducers in one place

• createAsyncThunk() – async logic made easy

• Built-in Immer for safe state mutation

• DevTools enabled by default

Installation

npm install @reduxjs/toolkit react-redux

1. Create a Slice

A slice contains:

• Initial state

• Reducers

• Actions

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;

RTK uses Immer, so direct mutation is safe.

2. Create the Store

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

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

3. Provide the Store

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

<Provider store={store}>
  <App />
</Provider>

4. Use Redux in Components

Read State (useSelector)

import { useSelector } from "react-redux";

const count = useSelector(state => state.counter.value);

Update State (useDispatch)

import { useDispatch } from "react-redux";
import { increment } from "./counterSlice";

const dispatch = useDispatch();
dispatch(increment());

Async Logic with createAsyncThunk

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

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

Handle in slice:

extraReducers: builder => {
  builder
    .addCase(fetchUsers.pending, state => {
      state.loading = true;
    })
    .addCase(fetchUsers.fulfilled, (state, action) => {
      state.loading = false;
      state.users = action.payload;
    });
}

Redux Toolkit vs Traditional Redux

When to Use Redux Toolkit

✅ Best for:

• Global app state

• Complex data flows

• Medium to large apps

❌ Not needed for:

• Local component state

• Very small apps

Best Practices

• Use one slice per feature

• Keep UI state out of Redux

• Use RTK for all new Redux projects

Key Takeaways

• Redux Toolkit simplifies Redux

• createSlice combines actions + reducers

• configureStore sets up everything

• RTK is the modern Redux standard