Suggest an edit

Improve this article

Refine the answer for “What is Redux Toolkit?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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
  }
}
```

---

## What Redux Toolkit does

RTK solves all of this:

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](https://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.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts658 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.