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

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

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

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

Контент

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

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

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

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

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

У **Redux** поняття **action (дія)** - це **звичайний об'єкт**, який **описує, що сталося** в застосунку.

> *Action не змінює стан сам - він просто повідомляє reducer'у, яка подія відбулася.*

---

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

**Action** - це об'єкт з обов'язковим полем `type`, яке описує тип події:

```javascript
{ type: 'ADD_TODO' }
```

Можна також передавати **додаткові дані** (payload), щоб повідомити подробиці про дію:

```javascript
{
  type: 'ADD_TODO',
  payload: { text: 'Купити хліб' }
}
```

---

### Приклад

Припустимо, у нас є reducer для списку задач:

```javascript
function todosReducer(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, action.payload]
    case 'REMOVE_TODO':
      return state.filter(todo => todo.id !== action.payload.id)
    default:
      return state
  }
}
```

Тепер можна викликати:

```javascript
store.dispatch({
  type: 'ADD_TODO',
  payload: { id: 1, text: 'Купити хліб' }
})
```

Reducer отримає цей `action` і поверне новий стан.

---

### Правила action'ів

1. **Action - це просто дані**, без логіки.
2. **Обов'язково має бути поле** `type` - рядок, який унікально ідентифікує дію.
3. **Action має бути серіалізовним** (тобто складатися з простих JS-значень, без функцій, класів, Promise тощо).
4. **Reducer вирішує**, що робити з цим action.

---

### Action creator (створювач дій)

Часто action створюють через спеціальні функції:

```javascript
function addTodo(text) {
  return {
    type: 'ADD_TODO',
    payload: { text }
  }
}

// Використання:
dispatch(addTodo('Купити молоко'))
```

Це зручно, тому що:

- Можна перевикористовувати action creator'и
- Можна додати валідацію або додаткові обчислення

---

### Підсумок

| Термін | Що це | Приклад |
| --- | --- | --- |
| **Action** | Опис події | `{ type: 'LOGIN_SUCCESS', payload: user }` |
| **Reducer** | Функція, яка оновлює стан на основі action | `(state, action) => newState` |
| **Dispatch** | Механізм, що відправляє action у store | `dispatch({ type: 'LOGOUT' })` |

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

Для рев’юера

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

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