В чому основна ідея Redux?

Повне пояснення

Що це і навіщо Redux — бібліотека для управління станом у JavaScript‑програмах, особливо популярна в React‑екосистемі. Вона забезпечує односторонній потік даних: UI → dispatch action → reducer → store → UI. Це спрощує відстеження змін, дозволяє легко тестувати логіку та підтримувати консистентність стану.

Ключові принципи

1. Store – єдиний джерело правдивості, що містить весь стан.
2. Actions – прості об’єкти з полем type (і опціональними даними), що описують, що сталося.
3. Reducers – чисті функції, які приймають попередній state і action, повертаючи новий state без мутацій.
4. Middleware – розширює dispatch, дозволяючи обробляти асинхронність (наприклад, thunk, saga).

Як це працює

1. Компонент викликає dispatch({type: 'INCREMENT'}).
2. Redux передає action до всіх reducer‑ів, які обчислюють новий state.
3. Store оновлює state і повідомляє підписані компоненти про зміну.

Практика та реалізація

import { createStore } from 'redux';
const counter = (state = 0, action) => {
  switch(action.type){
    case 'INCREMENT': return state + 1;
    default: return state;
  }
};
const store = createStore(counter);
store.subscribe(() => console.log(store.getState()));
store.dispatch({type: 'INCREMENT'});

Тестування

import { counter } from './counter';
test('increments', () => {
  expect(counter(0, {type: 'INCREMENT'})).toBe(1);
});

Особливості в контексті React

• react-redux пропонує Provider для доступу до store та useSelector, useDispatch хуки.
• Redux Toolkit (RTK) спрощує налаштування, додає createSlice, автоматичну генерацію action‑ів і підтримку thunk.

Оптимізація та типові помилки

• Уникайте мутацій state; використовуйте spread/immer.
• Не розміщуйте великий лог у reducer‑і; залишайте його чистим.
• Для асинхронних запитів використовуйте middleware (thunk, saga) замість прямого виклику API у reducer.

Диагностика

• Якщо state не оновлюється: перевірте, чи reducer повертає новий об’єкт, а не мутує старий.
• Якщо UI не реагує: переконайтеся, що компонент підписаний через useSelector або connect.

Альтернативи

• Zustand, Recoil, MobX – менш громіздкі рішення для простих випадків.
• Context API + useReducer – підходить для невеликих додатків без глобального store.