Redux Toolkit

Master Redux Toolkit for predictable state management in large applications. This is a foundational concept in component-based UI development that professional developers rely on daily. The explanations below are written to be beginner-friendly while covering the depth and nuance that comes from real-world React experience. Take your time with each section and practice the examples

90 min•By Priygop Team•Last updated: Feb 2026

What is Redux Toolkit?

Redux Toolkit is the official, opinionated, batteries-included toolset for efficient Redux development. It includes utilities to simplify common Redux use cases.. This is an essential concept that every React developer must understand thoroughly. In professional development environments, getting this right can mean the difference between code that works reliably and code that breaks in production. The following sections break this down into clear, digestible pieces with practical examples you can try immediately

Redux Toolkit Setup

Example

// Install Redux Toolkit
npm install @reduxjs/toolkit react-redux

// Create a slice
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;

// Configure store
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

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

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

Using Redux in Components

Example

// Using Redux in components
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './counterSlice';

function Counter() {
    const count = useSelector((state) => state.counter.value);
    const dispatch = useDispatch();

    return (
        <div>
            <h2>Count: {count}</h2>
            <button onClick={() => dispatch(increment())}>
                Increment
            </button>
            <button onClick={() => dispatch(decrement())}>
                Decrement
            </button>
        </div>
    );
}

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

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

const usersSlice = createSlice({
    name: 'users',
    initialState: {
        users: [],
        status: 'idle',
        error: null
    },
    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, action) => {
                state.status = 'failed';
                state.error = action.error.message;
            });
    }
});

Try It Yourself — Redux Toolkit

Try It Yourself — Redux ToolkitHTML

HTML Editor

✓ ValidTab = 2 spaces

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: Arial, sans-serif; padding: 20px; background: #f0f4ff; }
  .card { background: white; border-radius: 12px; padding: 24px; max-width: 340px; box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
  h2 { color: #61DAFB; margin-top: 0; }
  button { background: #61DAFB; color: #333; border: none; padding: 10px 20px; border-radius: 8px; font-weight: bold; cursor: pointer; margin: 4px; }
  button:hover { background: #21b3d4; color: white; }
  #count { font-size: 2rem; font-weight: bold; color: #333; margin: 10px 0; }
</style>
</head>
<body>
<div class="card">
  <h2>⚛️ React-style Counter</h2>
  <div id="count">0</div>
  <button onclick="update(-1)">− Decrement</button>
  <button onclick="update(1)">+ Increment</button>
  <button onclick="reset()">↺ Reset</button>
</div>
<script>
  let state = 0;
  function render() {
    document.getElementById('count').textContent = state;
  }
  function update(n) { state += n; render(); }
  function reset() { state = 0; render(); }
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: Arial, sans-serif; padding: 20px; background: #f0f4ff; }
  .card { background: white; border-radius: 12px; padding: 24px; max-width: 340px; box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
  h2 { color: #61DAFB; margin-top: 0; }
  button { background: #61DAFB; color: #333; border: none; padding: 10px 20px; border-radius: 8px; font-weight: bold; cursor: pointer; margin: 4px; }
  button:hover { background: #21b3d4; color: white; }
  #count { font-size: 2rem; font-weight: bold; color: #333; margin: 10px 0; }
</style>
</head>
<body>
<div class="card">
  <h2>⚛️ React-style Counter</h2>
  <div id="count">0</div>
  <button onclick="update(-1)">− Decrement</button>
  <button onclick="update(1)">+ Increment</button>
  <button onclick="reset()">↺ Reset</button>
</div>
<script>
  let state = 0;
  function render() {
    document.getElementById('count').textContent = state;
  }
  function update(n) { state += n; render(); }
  function reset() { state = 0; render(); }
</script>
</body>
</html>

Result

Click ▶ Run to see the result

Edit the code on the left, then click Run

HTML|30 lines|1048 chars|✓ Valid syntax

UTF-8

Redux Toolkit

90 min•By Priygop Team•Last updated: Feb 2026

What is Redux Toolkit?

Redux Toolkit Setup

Example

// Install Redux Toolkit
npm install @reduxjs/toolkit react-redux

// Create a slice
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;

// Configure store
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

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

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

Using Redux in Components

Example

// Using Redux in components
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './counterSlice';

function Counter() {
    const count = useSelector((state) => state.counter.value);
    const dispatch = useDispatch();

    return (
        <div>
            <h2>Count: {count}</h2>
            <button onClick={() => dispatch(increment())}>
                Increment
            </button>
            <button onClick={() => dispatch(decrement())}>
                Decrement
            </button>
        </div>
    );
}

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

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

const usersSlice = createSlice({
    name: 'users',
    initialState: {
        users: [],
        status: 'idle',
        error: null
    },
    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, action) => {
                state.status = 'failed';
                state.error = action.error.message;
            });
    }
});

Try It Yourself — Redux Toolkit

Try It Yourself — Redux ToolkitHTML

HTML Editor

✓ ValidTab = 2 spaces

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: Arial, sans-serif; padding: 20px; background: #f0f4ff; }
  .card { background: white; border-radius: 12px; padding: 24px; max-width: 340px; box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
  h2 { color: #61DAFB; margin-top: 0; }
  button { background: #61DAFB; color: #333; border: none; padding: 10px 20px; border-radius: 8px; font-weight: bold; cursor: pointer; margin: 4px; }
  button:hover { background: #21b3d4; color: white; }
  #count { font-size: 2rem; font-weight: bold; color: #333; margin: 10px 0; }
</style>
</head>
<body>
<div class="card">
  <h2>⚛️ React-style Counter</h2>
  <div id="count">0</div>
  <button onclick="update(-1)">− Decrement</button>
  <button onclick="update(1)">+ Increment</button>
  <button onclick="reset()">↺ Reset</button>
</div>
<script>
  let state = 0;
  function render() {
    document.getElementById('count').textContent = state;
  }
  function update(n) { state += n; render(); }
  function reset() { state = 0; render(); }
</script>
</body>
</html>

Result

Click ▶ Run to see the result

Edit the code on the left, then click Run

HTML|30 lines|1048 chars|✓ Valid syntax

UTF-8

Redux Toolkit

What is Redux Toolkit?

Redux Toolkit Setup

Using Redux in Components

Try It Yourself — Redux Toolkit

Topics in This Module

Redux Toolkit

What is Redux Toolkit?

Redux Toolkit Setup

Using Redux in Components

Try It Yourself — Redux Toolkit

Topics in This Module