# Primary Purpose of the Dispatch Function in React and How It Interacts With Reducers
> Learn the primary purpose of the dispatch function in React. See how it acts as a bridge to send actions and update state via reducers in your Redux applications.
- Repository: [Meta/react](https://github.com/facebook/react)
- Tags: deep-dive
- Published: 2026-02-16
---
**The `dispatch` function in React serves as the bridge between UI components and the Redux store, sending action objects to trigger state updates through reducers.**
In the `facebook/react` repository, the `dispatch` mechanism represents the core of state management in React applications using Redux. This function enables the **single-direction data flow** that makes state changes predictable and traceable.
## What Is the Dispatch Function in React?
The **dispatch function** is the primary mechanism for initiating state changes in a Redux-powered React application. Its sole purpose is to transmit an **action**—a plain JavaScript object describing what happened—to the Redux store.
When you call `dispatch`, you trigger a predictable sequence:
```
Component → dispatch(action) → Redux Store → Reducers → New State → Component Re-render
```
This unidirectional flow ensures that all state changes pass through the same centralized pipeline, making debugging and testing straightforward.
## How Dispatch Interacts With Reducers
The interaction between `dispatch` and **reducers** follows a strict contract that ensures immutable state updates.
### The Action Flow
When `dispatch(action)` is called, the Redux store receives the action object and immediately forwards it to the **root reducer**. The store does not modify state directly; it delegates this responsibility to the reducer functions.
### Reducer Execution
Each reducer function receives two arguments:
1. The current slice of state
2. The dispatched action object
The reducer examines the `action.type` and returns a **new state object** based on the action's payload. For example, in [`pandas/core/frame.py`](https://github.com/facebook/react/blob/main/pandas/core/frame.py) (analogous patterns), methods return new instances rather than mutating existing ones—reducers follow this same immutable pattern.
### State Update Propagation
After the root reducer processes the action and returns the new state tree, the Redux store:
1. Replaces the old state with the new state
2. Notifies all subscribed React components
3. Triggers re-renders in components using `useSelector` or `connect`
## Accessing Dispatch in React Components
In React Redux applications, you access the `dispatch` function through the **`useDispatch`** hook or `mapDispatchToProps`.
The implementation traces back to React's core hooks system. In [`packages/react/src/ReactHooks.js`](https://github.com/facebook/react/blob/main/packages/react/src/ReactHooks.js) (lines 73-79), the `useReducer` hook returns `[state, dispatch]`:
```javascript
// From ReactHooks.js - conceptual implementation
function useReducer(reducer, initialState) {
const [state, setState] = useState(initialState);
const dispatch = useCallback((action) => {
setState(prevState => reducer(prevState, action));
}, [reducer]);
return [state, dispatch];
}
```
React Redux's `useDispatch` hook ultimately forwards to the store's `dispatch` method, which is created via `createStore` or `configureStore` in Redux Toolkit.
## Complete Working Example
### Store Setup with Reducer
```javascript
// store.js
import { createStore } from 'redux';
// Reducer function handling state transitions
function counterReducer(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return state;
}
}
export const store = createStore(counterReducer);
```
### Component Using Dispatch
```javascript
// Counter.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
export default function Counter() {
const count = useSelector(state => state);
const dispatch = useDispatch();
const increment = () => dispatch({ type: 'INCREMENT' });
const decrement = () => dispatch({ type: 'DECREMENT' });
return (
);
}
```
### Provider Integration
As demonstrated in [`fixtures/nesting/src/modern/index.js`](https://github.com/facebook/react/blob/main/fixtures/nesting/src/modern/index.js) within the React repository, the `Provider` component makes `dispatch` available throughout the component tree:
```javascript
// App.js
import React from 'react';
import { Provider } from 'react-redux';
import { store } from './store';
import Counter from './Counter';
export default function App() {
return (
);
}
```
## Summary
- The **dispatch function** transmits action objects from React components to the Redux store, initiating all state changes.
- **Reducers** receive dispatched actions and return new state objects based on the action type, ensuring immutable updates.
- The interaction follows a **unidirectional flow**: Component → dispatch → Store → Reducer → New State → Re-render.
- Access `dispatch` via the **`useDispatch`** hook in functional components or `mapDispatchToProps` in class components.
- The implementation traces to [`packages/react/src/ReactHooks.js`](https://github.com/facebook/react/blob/main/packages/react/src/ReactHooks.js) in the `facebook/react` repository, where `useReducer` returns the dispatch mechanism.
## Frequently Asked Questions
### What is the difference between dispatch in Redux and useReducer?
Both Redux's `dispatch` and React's `useReducer` hook return a `dispatch` function that sends actions to reducers. However, `useReducer` manages local component state, while Redux's `dispatch` communicates with a global store. According to the source in [`packages/react/src/ReactHooks.js`](https://github.com/facebook/react/blob/main/packages/react/src/ReactHooks.js) (lines 73-79), `useReducer` returns `[state, dispatch]` for component-level state management, whereas React Redux's `useDispatch` forwards to the store's global `dispatch` method.
### Can I use dispatch without Redux?
Yes, you can use `dispatch` without Redux by using React's built-in `useReducer` hook. This hook provides the same `[state, dispatch]` pattern for local state management within a single component or passed down via context. The `dispatch` function from `useReducer` follows the same action-reducer pattern but operates on component state rather than a global Redux store.
### How does dispatch handle asynchronous actions?
By default, `dispatch` only accepts plain objects and processes them synchronously. To handle async operations, you use middleware like **Redux Thunk** or **Redux Saga**. With Thunk middleware, `dispatch` can accept functions (thunks) that perform async work before dispatching regular actions. The `dispatch` function itself remains synchronous, but middleware intercepts the dispatched value and manages the async flow before passing the final action to the reducers.
### Where is the dispatch function defined in the React source code?
While `dispatch` in React Redux applications comes from the Redux store, React's internal implementation of `dispatch` for the `useReducer` hook is defined in [`packages/react/src/ReactHooks.js`](https://github.com/facebook/react/blob/main/packages/react/src/ReactHooks.js) at lines 73-79. This file shows how React constructs the `dispatch` function that pairs with the reducer to update hook state. In a full React Redux setup, this internal React mechanism is wrapped by the Redux store's `dispatch` method, which is made available through the React-Redux `Provider` component.