How to Use useDispatch in React for State Management

In React, useDispatch is a hook from React-Redux that lets you send actions to the Redux store. You call useDispatch() to get the dispatch function, then use it to send actions that update your app's state.

Syntax

The useDispatch hook is imported from react-redux. You call it inside a React functional component to get the dispatch function. Then, you use dispatch to send action objects to the Redux store.

Example parts:

• const dispatch = useDispatch(); — gets the dispatch function.
• dispatch({ type: 'ACTION_TYPE', payload: data }); — sends an action.

javascript

import { useDispatch } from 'react-redux';

function MyComponent() {
  const dispatch = useDispatch();

  function handleClick() {
    dispatch({ type: 'INCREMENT' });
  }

  return <button onClick={handleClick}>Increase</button>;
}

Example

This example shows a simple counter component using Redux and useDispatch. Clicking the button sends an INCREMENT action to update the count in the Redux store.

javascript

import React from 'react';
import { createStore } from 'redux';
import { Provider, useDispatch, useSelector } from 'react-redux';

// Reducer to handle count state
function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    default:
      return state;
  }
}

// Create Redux store
const store = createStore(counterReducer);

// Counter component
function Counter() {
  const dispatch = useDispatch();
  const count = useSelector(state => state.count);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>
        Increment
      </button>
    </div>
  );
}

// App with Provider
export default function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

Output

Count: 0
[Clicking 'Increment' button increases count by 1 each time]

Common Pitfalls

• Forgetting to wrap your app in <Provider> from react-redux causes useDispatch to fail.
• Calling useDispatch outside a React component or inside class components is invalid.
• Dispatching plain objects only; dispatching functions requires middleware like redux-thunk.

javascript

/* Wrong: useDispatch called outside component */
// const dispatch = useDispatch(); // ❌ This will cause an error

/* Right: useDispatch inside component */
function MyComponent() {
  const dispatch = useDispatch(); // ✅ Correct usage
  // ...
}

Quick Reference

useDispatch Hook Cheat Sheet

• const dispatch = useDispatch(); — get dispatch function
• dispatch({ type: 'ACTION_TYPE', payload: data }); — send action
• Use only inside React functional components
• Requires Redux store and <Provider> wrapping
• Dispatch plain objects by default

Key Takeaways

useDispatch returns the dispatch function to send actions to Redux store.

Always call useDispatch inside React functional components wrapped by Provider.

Dispatch plain action objects unless using middleware for async actions.

Use dispatch to update state by sending action objects with type and optional payload.

Forgetting Provider or calling useDispatch outside components causes errors.