Що таке Redux Toolkit?

ReactJunior~2 хв читання

Визначення

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

Генерує 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)

Підсумок

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

Підсумок:

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

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.