Dispatch

Definition

The method used to send actions to the Redux store. It is the only way to trigger a state change.

Explain Like I'm New

The 'Send' button. You created your Action object, but it's just sitting there doing nothing. You wrap it in `dispatch()` to literally throw it into the Redux Store so the reducers can catch it.

Real World Example

Clicking a 'Logout' button triggers an `onClick` event, which runs `dispatch({ type: 'LOGOUT' })`.

Common Use Cases

•Triggering state changes from React components

Interactive Example

import { useDispatch } from 'react-redux';

function LogoutButton() {
  // 1. Grab the dispatch function from Redux
  const dispatch = useDispatch();

  const handleLogout = () => {
    // 2. Throw the action into the store!
    dispatch({ type: 'auth/logout' });
  };

  return <button onClick={handleLogout}>Log Out</button>;
}

Interview Questions

basic

What React hook is used to get access to the dispatch function in a component?

intermediate

Is the `dispatch` function synchronous or asynchronous?

Flash Cards

Question

Which hook?

Click to reveal answer

Answer

`useDispatch()`

Question

Sync or Async?

Click to reveal answer

Answer

By default, `dispatch` is 100% synchronous. The state is updated immediately, and the UI re-renders immediately. (Middleware like Thunk is required to handle async operations).