Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке Redux Toolkit?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Визначення

> **Redux Toolkit (RTK)** - це офіційна, рекомендована бібліотека для роботи з Redux,
> яка спрощує логіку станів, зменшує кількість коду й усуває типові помилки.

Пакет:

```javascript
npm install @reduxjs/toolkit react-redux
```

---

## Проблема класичного Redux

Класичний Redux вимагав багато шаблонного коду:

- Окремо описувати `actions`
- Окремо `reducers`
- Багато `switch/case`
- Багато бойлерплейту (коду, що повторюється)
- Складно типізувати (у TypeScript)

Наприклад:

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

---

## Що робить Redux Toolkit

RTK вирішує все це:

Генерує actions і reducers автоматично
Дозволяє писати **іммутабельний код у "мутабельному" стилі** (через бібліотеку **Immer**)
Спрощує створення store
Уміє працювати з асинхронними запитами (`createAsyncThunk`)
Оптимізований під TypeScript
Вбудовані DevTools і middleware

---

## Основні функції RTK

| Функція | Призначення |
|---|---|
| `configureStore()` | Просте створення store з DevTools і middleware |
| `createSlice()` | Автоматично створює reducer і actions |
| `createAsyncThunk()` | Спрощує роботу з асинхронними запитами |
| `createEntityAdapter()` | Зручно керує колекціями даних |
| `createSelector()` | Мемоізація вибірок зі state |

---

## Приклад: лічильник на RTK

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

// 1. Створюємо slice (частину стану)
const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1        // можна мутувати! Immer робить копію під капотом
    },
    decrement: (state) => {
      state.value -= 1
    },
    addByAmount: (state, action) => {
      state.value += action.payload
    }
  }
})

// 2. Експортуємо actions
export const { increment, decrement, addByAmount } = counterSlice.actions

// 3. Створюємо store
const store = configureStore({
  reducer: {
    counter: counterSlice.reducer
  }
})

// 4. Використовуємо
store.dispatch(increment())
console.log(store.getState()) // { counter: { value: 1 } }
```

Все - жодних `switch/case`, `action types`, `combineReducers` і `boilerplate`.

---

## Приклад у 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>
  )
}
```

---

## Приклад асинхронного запиту

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

// Асинхронна дія
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
      })
  }
})
```

---

## Переваги Redux Toolkit

| Перевага | Опис |
|---|---|
| Менше коду | Жодних `switch/case`, все через `createSlice()` |
| Іммутабельність без болю | Можна писати так, ніби "мутуєш", але під капотом працює Immer |
| Модульність | Кожна частина логіки - окремий slice |
| Асинхронність із коробки | `createAsyncThunk()` для запитів |
| DevTools і middleware увімкнені | Нічого не потрібно налаштовувати |
| Офіційний стандарт | Це **офіційний рекомендований спосіб** писати Redux (за документацією [redux.js.org](https://redux.js.org)) |

---

## Підсумок

| Класичний Redux | Redux Toolkit |
|---|---|
| Багато коду | Мінімум бойлерплейту |
| Потрібно писати action types | Створюються автоматично |
| Іммутабельність вручну | Автоматично через Immer |
| Асинхронність через сторонні пакети | Є `createAsyncThunk` |
| DevTools налаштовуються окремо | Вбудовані з коробки |

---

**Підсумок:**

> Redux Toolkit - це "сучасний Redux без болю".
> Він робить роботу зі станом простішою, коротшою і надійнішою.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати599 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.