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

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

Допрацюйте відповідь до «Що таке pure reducer (чиста функція)?». Ваші зміни проходять модерацію перед публікацією.

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

Контент

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

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

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

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

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

## Визначення

**Pure reducer (чиста функція-редьюсер)** - це функція, яка **завжди повертає одне й те саме значення при однакових вхідних даних**
і **не має побічних ефектів**.

> Простіше кажучи:
> Reducer - це **чиста функція**, яка лише обчислює **новий стан** на основі старого і action - і **нічого більше не робить**.

---

## Формально

Чиста функція:

```javascript
newState = reducer(oldState, action)
```

- Не змінює `oldState` напряму.
- Не робить запитів, логування, таймерів тощо.
- Не звертається до зовнішніх змінних.
- Завжди повертає один і той самий результат при однакових вхідних даних.

---

## Приклад чистого reducer'а

```javascript
function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 }
    case 'DECREMENT':
      return { count: state.count - 1 }
    default:
      return state
  }
}
```

Чиста функція:

- Не мутує `state`
- Не викликає API
- Не використовує `Math.random()`
- Не залежить від зовнішніх змінних

---

## Приклад **нечистого** reducer'а

```javascript
function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      fetch('/api/log') // побічний ефект (виклик API)
      return { count: state.count + 1 }

case 'DECREMENT':
      return { count: state.count - Math.random() } // непередбачуваність

default:
      return state
  }
}
```

Чому це погано:

- Reducer повинен бути **передбачуваним**.
- Redux порівнює старий і новий стан -> якщо функція непередбачувана, це ламає логіку.
- Побічні ефекти (запити, таймери, логування) повинні виконуватись **у middleware** (наприклад, Redux Thunk, Saga тощо), а не в reducer'і.

---

## Правила чистого reducer'а

| Правило | Що означає |
|---|---|
| Не мутуй state | Використовуй `...spread`, `map`, `filter`, `concat`, але не `push`, `splice`, `assign` |
| Не викликай побічні ефекти | Ніяких `fetch`, `console.log`, `setTimeout`, `alert` тощо |
| Не звертайся до зовнішніх даних | Не використовуй глобальні змінні, `localStorage` тощо |
| Повертай новий стан | `return { ...state, ...changes }` |
| Один і той самий input -> один і той самий output | Передбачуваність |

---

## Чому це важливо

1. **Передбачуваність** - результат reducer'а завжди зрозумілий.
2. **Тестованість** - можна просто передати `state` і `action` і перевірити результат.
3. **Відлагодження** - Redux DevTools може "перемотувати" стан назад і вперед, бо функції не мають побічних ефектів.

---

## Підсумок

| Термін | Значення |
|---|---|
| **Pure function** | Функція без побічних ефектів і з детермінованим результатом |
| **Reducer** | Чиста функція, яка описує, як стан змінюється у відповідь на action |
| **Переваги** | Передбачуваність, простота тестування, підтримка time-travel debugging |

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

Для рев’юера

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

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