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

Ми тільки що витратили кілька годин (або розділів), вивчаючи класичний Redux. Ви могли помітити певний патерн: ми пишемо дуже багато коду, щоб зробити дуже прості речі.

Давайте підсумуємо, що саме "боліло" у розробників до 2019 року.

1. Boilerplate (Шаблонний код)

Щоб додати одну просту кнопку, яка робить count + 1, нам потрібно торкнутися 3-4 файлів:

1. Додати константу в actionTypes.js.
2. Створити функцію в actions.js.
3. Додати case в reducer.js.
4. З'єднати це все в компоненті.

Це призводило до того, що розробники лінувалися виносити логіку в Redux і писали спагетті-код в компонентах.

2. Складність налаштування

Ви пам'ятаєте файл store.js?

const store = createStore(
  rootReducer,
  compose(
    applyMiddleware(thunk),
    window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__() : f => f
  )
);

Щоб просто підключити DevTools і Thunk, нам доводилося писати цей жахливий код конфігурації. І це ми ще не говорили про TypeScript!

3. Небезпека мутацій

Найпоширеніша помилка новачків:

case 'ADD_TODO':
  state.push(action.payload); // ❌ МУТАЦІЯ! Компонент не оновиться!
  return state;

Потрібно завжди пам'ятати про ...state, slice(), map(). Це стомлює і відволікає від бізнес-логіки.

4. Відсутність стандартів

Класичний Redux був дуже гнучким (Unopinionated). Він не казав вам, як називати файли, куди їх класти, як робити асинхронність (Saga? Thunk? Observable?). Кожен проєкт виглядав по-різному, що ускладнювало вхід нових розробників.

Вступ до Redux Toolkit (RTK)

Команда Redux почула цей біль. У 2019 році вони випустили пакет @reduxjs/toolkit.

Це НЕ нова бібліотека. Це обгортка над Redux, яка вже містить в собі найкращі практики.

Що дає RTK:

1. Менше коду: createSlice автоматично генерує action creators та action types.
2. Immer: Можна писати "мутабельний" код (state.value++), який під капотом стає безпечним іммутабельним оновленням.
3. Auto-config: DevTools та Thunk підключені за замовчуванням.
4. TypeScript: Написаний на TS і для TS.

Забудьте про createStore, switch statements та ручне копіювання об'єктів. Ми переходимо до сучасного Redux.

👉 Далі: Налаштування Store з configureStore