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

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

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

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

Контент

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

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

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

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

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

## 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 тримається на трьох китах:
> 1. Одне джерело істини
> 2. Стан змінюється лише через actions
> 3. Зміни виконують чисті функції (reducers)

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

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

Для рев’юера

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

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