Що робить хук useDispatch()?

ReactJunior~1 хв читання

Хук 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 автоматично перерендерює компонент

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

useDispatch() отримує з контексту (<Provider store={store}>) сам Redux store.
Повертає посилання на store.dispatch.
Коли ти викликаєш 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' })`

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.