Redux Toolkit Explained: A Complete Beginner's Guide

Redux Toolkit (RTK) is the official, recommended way to use Redux. It removes most of the boilerplate and makes state management simpler, faster, and less error-prone—especially useful in large React apps like dashboards, eCommerce, or admin panels (which fits well with the projects you usually build).

Why Redux Toolkit?

Traditional Redux had problems:

• Too much boilerplate
• Manual action types & reducers
• Complex async logic

RTK solves all of this by providing a set of tools that simplify Redux development, including:

Key Benefits

• Less code
• Built-in immutability (via Immer)
• Easy async API handling
• Best practices by default
• Works perfectly with TypeScript

Core Concepts of Redux Toolkit

configureStore

Replaces createStore

import { configureStore } from '@reduxjs/toolkit'
import userReducer from './userSlice'

export const store = configureStore({
  reducer: {
    user: userReducer,
  },
})

createSlice

Creates actions + reducer in one place

import { createSlice } from '@reduxjs/toolkit'

const userSlice = createSlice({
  name: 'user',
  initialState: {
    isLoggedIn: false,
    profile: null,
  },
  reducers: {
    login: (state, action) => {
      state.isLoggedIn = true
      state.profile = action.payload
    },
    logout: (state) => {
      state.isLoggedIn = false
      state.profile = null
    },
  },
})

export const { login, logout } = userSlice.actions
export default userSlice.reducer

    
    

Note: Direct state mutation is allowed (Immer handles immutability)

Using Redux in React

import { Provider, useDispatch, useSelector } from 'react-redux'
import { store } from './store'

function App() {
  return (
    <Provider store={store}>
      <Dashboard />
    </Provider>
  )
}

const dispatch = useDispatch()
const user = useSelector((state) => state.user)

dispatch(login({ id: 1, name: 'Jitendra' }))

Async API Calls (VERY IMPORTANT)

createAsyncThunk

Perfect for API calls (Axios / Fetch)

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

export const fetchUsers = createAsyncThunk(
  'users/fetch',
  async () => {
    const res = await axios.get('/api/users')
    return res.data
  }
)

    
const userSlice = createSlice({
  name: 'users',
  initialState: {
    data: [],
    loading: false,
    error: null,
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchUsers.pending, (state) => {
        state.loading = true
      })
      .addCase(fetchUsers.fulfilled, (state, action) => {
        state.loading = false
        state.data = action.payload
      })
      .addCase(fetchUsers.rejected, (state, action) => {
        state.loading = false
        state.error = action.error.message
      })
  },
})

    

RTK Query (Best Feature)

Handles API caching, loading, errors automatically

Create API Slice

    
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

export const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    getProducts: builder.query({
      query: () => '/products',
    }),
  }),
})

export const { useGetProductsQuery } = api

Use in Component

    
const { data, error, isLoading } = useGetProductsQuery()
    

• No reducers
• No actions
• Auto caching
• Auto refetch

When to Use What?

Conclusion

Redux Toolkit is a powerful, efficient way to manage state in React applications. With its simplified API, built-in best practices, and RTK Query for data fetching, it’s the go-to choice for modern React development. Start integrating RTK into your projects today to experience cleaner code and better state management!

Additional Resources

• Official Redux Toolkit Documentation
• RTK Query Guide
• React-Redux Integration

Related: State Management in ReactJS

For more details on when to use different state management solutions in React, check out our State Management in ReactJS guide. Here's a quick comparison:

For API data, NOT UI state

useQuery({
  queryKey: ["products"],
  queryFn: fetchProducts,
});

Handles:

• Caching
• Background refetch
• Pagination
• Loading & error states

Best for

• REST / GraphQL APIs
• Real-time data
• Large data fetching

State Management Comparison