Які принципи лежать в основі Redux?

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

Redux заснований на трьох базових принципах

1. Єдине джерело істини (Single Source of Truth)

Весь стан застосунку зберігається в одному спільному сховищі (store).

Приклад

javascript

const store = {
  user: { name: "Tim", isAuth: true },
  cart: { items: [/* ... */] },
  theme: "dark"
};

Замість того щоб зберігати шматки стану в різних компонентах або контекстах, усе знаходиться в одній структурі даних.

Це означає:

простіше налагоджувати (весь стан видно в одному місці);
можна зберігати/відновлювати стан (time-travel, devtools);
легко ділитися даними між будь-якими компонентами.

2. Стан доступний лише для читання (State is read-only)

Змінювати стан напряму не можна. Єдиний спосіб змінити його - це відправити action (об'єкт, що описує, що сталося).

Приклад

javascript

store.dispatch({ type: "ADD_ITEM", payload: { id: 1, name: "Pants" } });

Redux приймає цю дію і передає її редьюсеру.

Не можна:

javascript

store.state.cart.push(newItem); // так не працює

Потрібно:

javascript

store.dispatch({ type: "ADD_ITEM", payload: newItem });

Це дає:

передбачуваність: кожна зміна має "причину" (action);
відстежуваність: можна логувати всі дії (у DevTools);
іммутабельність: старий стан не мутується, створюється новий.

3. Зміни виконуються чистими функціями (Changes are made with pure functions)

Щоб змінити стан, Redux викликає редьюсери (reducers) - чисті функції, які приймають поточний стан і action, і повертають новий стан.

Приклад

javascript

function cartReducer(state = { items: [] }, action) {
  switch (action.type) {
    case "ADD_ITEM":
      return { ...state, items: [...state.items, action.payload] };
    case "REMOVE_ITEM":
      return {
        ...state,
        items: state.items.filter(i => i.id !== action.payload.id),
      };
    default:
      return state;
  }
}

Особливості редьюсера:

не мутує state напряму (return newObject);
не має побічних ефектів (fetch, console.log, setTimeout тощо - заборонені);
завжди повертає новий передбачуваний стан.

Візуально

javascript

          ┌──────────────┐
          │   Action     │   ←  (опис того, що сталося)
          └──────┬───────┘
                 │
                 ▼
          ┌──────────────┐
          │   Reducer    │   ←  (чиста функція)
          └──────┬───────┘
                 │
                 ▼
          ┌──────────────┐
          │    Store     │   ←  (новий стан)
          └──────────────┘

Приклад повного циклу

javascript

dispatch({ type: "INCREMENT" });     // Action

// Reducer
function counter(state = { count: 0 }, action) {
  switch (action.type) {
    case "INCREMENT":
      return { count: state.count + 1 };
    default:
      return state;
  }
}

// Store оновлюється → компоненти перерендеряться з новим count

Чому ці принципи важливі

Принцип	Що дає
Single source of truth	Централізованість, проста синхронізація
State is read-only	Безпека, передбачуваність змін
Pure reducers	Простота тестування, надійність, відсутність побічних ефектів

Підсумок

Redux тримається на трьох китах:

Одне джерело істини

Стан змінюється лише через actions

Зміни виконують чисті функції (reducers)

Ці принципи роблять Redux передбачуваним, придатним для налагодження і масштабованим, що особливо важливо для великих React-застосунків з безліччю станів.

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

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

Premium

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