Suggest an edit

Improve this article

Refine the answer for “What does the useDispatch() hook do?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

The `useDispatch()` hook is the second (and very important) hook from the **React-Redux** library,
and it exists so a React component can **dispatch actions** to the Redux **store**.

---

## Definition

> `useDispatch()` is a hook that returns the `dispatch()` function,
> which you use to **send actions** to the Redux store.

---

## Signature

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

After that, `dispatch` can be used to call:

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

---

## Usage example

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

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

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

Here:

- `useDispatch()` gives access to `store.dispatch`
- When you click the button → an action is dispatched
- The reducer processes it → a new state is created → React automatically re-renders the component

---

## What happens under the hood

1. `useDispatch()` gets the Redux store itself from context (`<Provider store={store}>`).
2. It returns a reference to `store.dispatch`.
3. When you call `dispatch(action)`:
  - Redux passes the `action` to all reducers;
  - each reducer decides whether the state needs to change;
  - if the state changed → React components using `useSelector()` update.

---

## You can dispatch more than just objects

If you have a **middleware** connected, for example **redux-thunk** or **redux-saga**,
then `dispatch` can accept not just objects, but also functions or generators:

### Example with 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 })
  }
}
```

And in the component:

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

---

## Where to use it

- In event handlers (`onClick`, `onSubmit`, etc.)
- In effects (`useEffect`), if you need to dispatch an action on mount
- In callback functions memoized with `useCallback`

---

## The key idea

> `useSelector()` reads data from Redux
> `useDispatch()` dispatches actions to change that data

They always work **in pairs**.

---

## Summary

| Hook | What it does | Example |
|---|---|---|
| `useSelector()` | Pulls data from Redux state | `const count = useSelector(s => s.counter)` |
| `useDispatch()` | Dispatches an action to the store | `dispatch({ type: 'INCREMENT' })` |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts392 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.