What is Redux Toolkit?

ReactJunior~2 min read

Definition

Redux Toolkit (RTK) is the official, recommended library for working with Redux, which simplifies state logic, reduces the amount of code, and eliminates common mistakes.

Package:

javascript

npm install @reduxjs/toolkit react-redux

The problem with classic Redux

Classic Redux required a lot of boilerplate code:

Describing actions separately
reducers separately
Lots of switch/case
A lot of repeated boilerplate code
Hard to type (in TypeScript)

For example:

javascript

// actions.js
const INCREMENT = 'INCREMENT'

// reducer.js
function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case INCREMENT:
      return { count: state.count + 1 }
    default:
      return state
  }
}

It generates actions and reducers automatically It lets you write immutable code in a "mutable" style (via the Immer library) It simplifies creating the store It knows how to work with asynchronous requests (createAsyncThunk) It is optimized for TypeScript DevTools and middleware are built in

Main RTK functions

Function	Purpose
`configureStore()`	Simple store creation with DevTools and middleware
`createSlice()`	Automatically creates a reducer and actions
`createAsyncThunk()`	Simplifies working with asynchronous requests
`createEntityAdapter()`	Conveniently manages collections of data
`createSelector()`	Memoizes selections from the state

Example: a counter with RTK

javascript

import { createSlice, configureStore } from '@reduxjs/toolkit'

// 1. Create a slice (a piece of state)
const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1        // mutation is allowed! Immer makes a copy under the hood
    },
    decrement: (state) => {
      state.value -= 1
    },
    addByAmount: (state, action) => {
      state.value += action.payload
    }
  }
})

// 2. Export actions
export const { increment, decrement, addByAmount } = counterSlice.actions

// 3. Create the store
const store = configureStore({
  reducer: {
    counter: counterSlice.reducer
  }
})

// 4. Use it
store.dispatch(increment())
console.log(store.getState()) // { counter: { value: 1 } }

That's it, no switch/case, action types, combineReducers, or boilerplate.

Example in React

javascript

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>
      <p>{count}</p>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
    </div>
  )
}

Example of an asynchronous request

javascript

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

// Asynchronous action
export const fetchUser = createAsyncThunk('user/fetch', async (id) => {
  const res = await fetch(`/api/users/${id}`)
  return await res.json()
})

const userSlice = createSlice({
  name: 'user',
  initialState: { data: null, loading: false },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUser.pending, (state) => { state.loading = true })
      .addCase(fetchUser.fulfilled, (state, action) => {
        state.loading = false
        state.data = action.payload
      })
  }
})

Advantages of Redux Toolkit

Advantage	Description
Less code	No `switch/case`, everything through `createSlice()`
Immutability without the pain	You can write as if you're "mutating", but Immer works under the hood
Modularity	Each piece of logic is a separate slice
Async out of the box	`createAsyncThunk()` for requests
DevTools and middleware included	Nothing to configure
Official standard	This is the officially recommended way to write Redux (per the redux.js.org docs)

Summary

Classic Redux	Redux Toolkit
A lot of code	Minimal boilerplate
You need to write action types	Created automatically
Manual immutability	Automatic via Immer
Async through third-party packages	Has `createAsyncThunk`
DevTools configured separately	Built in out of the box

Summary:

Redux Toolkit is "modern Redux without the pain". It makes working with state simpler, shorter, and more reliable.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.