Suggest an edit

Improve this article

Refine the answer for “What is a reducer?”. 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)

A **reducer** is a **function** that manages how state changes in response to specific actions (**actions**) and always returns a **new state**.

Put simply:

> A reducer describes **exactly how** the state should change when something happens.

---

### Formally

A reducer is a **pure function** with the signature:

```javascript
(state, action) => newState
```

---

### Example of a simple reducer

Suppose we have a counter:

```javascript
function counterReducer(state, action) {
  switch (action.type) {
    case 'increment':
      return state + 1
    case 'decrement':
      return state - 1
    default:
      return state
  }
}
```

Here:

- state is the current state (for example, the number 0)
- action is an object describing what happened ({ type: 'increment' })
- the function returns the new state (for example, 1)

---

### In React

A reducer is used, for example, with the useReducer() hook:

```javascript
const [state, dispatch] = useReducer(counterReducer, 0)
```

- state is the current value of the counter
- dispatch is the function used to send an action:

```javascript
dispatch({ type: 'increment' })
```

---

### In Redux

A reducer is the foundation of the Redux architecture. Redux keeps a single shared application state, and the reducer controls how it changes with each action.

In Redux, several reducers are usually combined via combineReducers().

---

### Properties of a reducer

1. **A pure function**: no side effects.
  - Does not modify its arguments.
  - Does not make API requests.
  - Returns the same result for the same input.
2. **Immutability**: does not mutate state, but creates a new object:

```javascript
  return { ...state, count: state.count + 1 }
  ```

---

### A memory association

A reducer is like a "state editor": it receives the current state plus an instruction ("increase", "delete", "clear") and returns a new version of the state.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.