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

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

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

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

Контент

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

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

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

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

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

Хук `useDispatch()` - другий (і дуже важливий) хук з бібліотеки **React-Redux**,
і він потрібен для того, щоб **надсилати дії (actions)** у Redux-сховище (**store**) з React-компонента.

---

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

> `useDispatch()` - це хук, який повертає функцію `dispatch()`,
> за допомогою якої можна **надсилати action'и** в Redux store.

---

## Сигнатура

```javascript
const dispatch = useDispatch()
```

Після цього `dispatch` можна використовувати для виклику:

```javascript
dispatch({ type: 'ACTION_TYPE', payload: data })
```

---

## Приклад використання

```javascript
import { useSelector, useDispatch } from 'react-redux'

function Counter() {
  const count = useSelector(state => state.counter.value)
  const dispatch = useDispatch()

return (
    <div>
      <p>Лічильник: {count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
    </div>
  )
}
```

Тут:

- `useDispatch()` дає доступ до `store.dispatch`
- Коли натискаєш кнопку → надсилається action
- Reducer обробляє його → створюється новий стан → React автоматично перерендерює компонент

---

## Що відбувається під капотом

1. `useDispatch()` отримує з контексту (`<Provider store={store}>`) сам Redux store.
2. Повертає посилання на `store.dispatch`.
3. Коли ти викликаєш `dispatch(action)`:
  - Redux передає `action` усім reducer'ам;
  - кожен reducer вирішує, чи потрібно змінювати стан;
  - якщо стан змінився → React-компоненти, що використовують `useSelector()`, оновлюються.

---

## Можна надсилати не лише об'єкти

Якщо в тебе підключений **middleware**, наприклад **redux-thunk** або **redux-saga**,
то `dispatch` може приймати не лише об'єкти, а й функції або генератори:

### Приклад з redux-thunk:

```javascript
function fetchUser(id) {
  return async (dispatch) => {
    dispatch({ type: 'USER_FETCH_START' })
    const data = await fetch(`/api/users/${id}`).then(r => r.json())
    dispatch({ type: 'USER_FETCH_SUCCESS', payload: data })
  }
}
```

І в компоненті:

```javascript
dispatch(fetchUser(5))
```

---

## Де використовувати

- В обробниках подій (`onClick`, `onSubmit` тощо)
- В ефектах (`useEffect`), якщо потрібно надіслати action під час монтування
- У callback-функціях, мемоізованих через `useCallback`

---

## Ключова ідея

> `useSelector()` - читає дані з Redux
> `useDispatch()` - надсилає дії, щоб змінити ці дані

Вони завжди працюють **у парі**.

---

## Підсумок

| Хук | Що робить | Приклад |
|---|---|---|
| `useSelector()` | Дістає дані зі стану Redux | `const count = useSelector(s => s.counter)` |
| `useDispatch()` | Надсилає action у store | `dispatch({ type: 'INCREMENT' })` |

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

Для рев’юера

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

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