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

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

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

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

Контент

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

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

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

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

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

**Reducer** - це **функція**, яка керує зміною стану (state) у відповідь на певні дії (**actions**) і завжди повертає **новий стан**.

Простіше кажучи:

> Reducer описує, **як саме** стан має змінитися, коли щось відбулося.

---

### Формально

Reducer - це **чиста функція** із сигнатурою:

```javascript
(state, action) => newState
```

---

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

Припустімо, у нас є лічильник:

```javascript
function counterReducer(state, action) {
  switch (action.type) {
    case 'increment':
      return state + 1
    case 'decrement':
      return state - 1
    default:
      return state
  }
}
```

Тут:

- state - поточний стан (наприклад, число 0)
- action - об'єкт, що описує, що відбулося ({ type: 'increment' })
- функція повертає новий стан (наприклад, 1)

---

### У React

Reducer використовується, наприклад, разом із хуком useReducer():

```javascript
const [state, dispatch] = useReducer(counterReducer, 0)
```

- state - поточне значення лічильника
- dispatch - функція, за допомогою якої надсилається дія:

```javascript
dispatch({ type: 'increment' })
```

---

### У Redux

Reducer - основа Redux-архітектури. Redux зберігає один спільний стан застосунку, а reducer керує тим, як він змінюється за кожної дії.

У Redux зазвичай кілька редʼюсерів об'єднуються через combineReducers().

---

### Властивості reducer'а

1. **Чиста функція** - без побічних ефектів.
  - Не змінює аргументи.
  - Не робить запитів до API.
  - Повертає однаковий результат за однакових вхідних даних.
2. **Іммутабельність** - не мутує state, а створює новий об'єкт:

```javascript
  return { ...state, count: state.count + 1 }
  ```

---

### Асоціація для запам'ятовування

Reducer - як «редактор стану»: він отримує поточний стан + інструкцію («збільш», «видали», «очисти») і повертає нову версію стану.

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

Для рев’юера

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

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