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

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

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

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

Контент

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

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

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

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

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

У **Redux** (і в `useReducer` у React) функція `dispatch()` використовується для **відправлення дії (action)** - тобто для того, щоб **повідомити системі, що відбулася подія**, і потрібно оновити стан.

---

## Простими словами

> `dispatch()` - це "кур'єр", який доставляє **action** (опис події) до **reducer**,
> а reducer вже вирішує, як змінити **state**.

---

## Приклад у Redux

```javascript
store.dispatch({ type: 'INCREMENT' })
```

1. Ми викликаємо `dispatch()` і передаємо об'єкт `action` (`{ type: 'INCREMENT' }`).
2. Redux відправляє цей action усім **reducer'ам**.
3. Reducer(и) повертають **новий стан**.
4. Redux оновлює сховище (`store`).
5. Підписані компоненти отримують оновлений state -> відбувається **рендер** з новими даними.

---

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

```javascript
// Reducer
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
  }
}
```

```javascript
// Диспетчеризація
store.dispatch({ type: 'INCREMENT' })
// state.count тепер = 1
```

---

## У React (useReducer)

Те саме, тільки локально в компоненті:

```javascript
function Counter() {
  const [state, dispatch] = useReducer(counterReducer, { count: 0 })

return (
    <>
      <p>{state.count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>
        +
      </button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>
        -
      </button>
    </>
  )
}
```

Коли ти натискаєш кнопку:

1. `dispatch()` відправляє дію `{ type: 'INCREMENT' }`
2. `reducer` отримує цю дію
3. Повертає новий стан `{ count: 1 }`
4. React оновлює компонент з новим значенням

---

## Підсумок

| Що робить `dispatch()` | Аналогія |
|---|---|
| Відправляє action у reducer | Як "повідомити системі", що користувач зробив дію |
| Запускає процес оновлення стану | Як "викликати подію" |
| Не змінює state напряму | Він лише "просить" reducer змінити його |

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

Для рев’юера

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

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