Suggest an edit

Improve this article

Refine the answer for “How do store, actions, and reducers interact?”. 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)

## 1. What these three parts are

| Element | What it does | Analogy |
|---|---|---|
| **Store** | Holds and manages the whole application state | "a single data storage" |
| **Action** | Describes **what happened** | "an event message" |
| **Reducer** | Describes **how the state should change** in response to the action | "update logic" |

---

## 2. The chain of interaction (the main Redux cycle)

```javascript
[User or event]
      ↓
  dispatch(action)
      ↓
     Reducer
      ↓
    New state
      ↓
     Store
      ↓
   UI update
```

---

## 3. Step by step

### 1. The store is created with a reducer

```javascript
import { createStore } from 'redux'

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

const store = createStore(counterReducer)
```

`store` now:

- holds the current state,
- can accept `actions` via `dispatch()`,
- can notify subscribers via `subscribe()`.

---

### 2. Action describes **what happened**

```javascript
const action = { type: 'INCREMENT' }
```

> It is simply an object with a `type` field (and sometimes `payload` - data).

---

### 3. The action is sent via dispatch

```javascript
store.dispatch(action)
```

→ the `store` receives the action and passes it to the reducer.

---

### 4. The reducer receives state and action

```javascript
function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 } // new state
    default:
      return state
  }
}
```

→ The reducer computes a **new state**, without mutating the old one.

---

### 5. The store saves the new state

Redux calls the reducer → gets `newState` →
replaces the old state with the new one inside the `store`.

---

### 6. Subscribers are notified (`subscribe()`)

```javascript
store.subscribe(() => {
  console.log('State changed:', store.getState())
})
```

→ Every time after `dispatch()`, all listeners are called,
and React components (via `useSelector`) automatically **re-render**.

---

## 4. Visually

```javascript
          ┌──────────────┐
          │   COMPONENT  │
          │ (UI, React)  │
          └──────┬───────┘
                 │ dispatch(action)
                 ▼
          ┌──────────────┐
          │    STORE     │
          ├──────────────┤
          │ stores state │
          │ calls         │
          │ reducer()     │
          └──────┬───────┘
                 │
                 ▼
          ┌──────────────┐
          │   REDUCER    │
          │ (pure fn)    │
          └──────┬───────┘
                 │ returns newState
                 ▼
          ┌──────────────┐
          │   STORE      │
          │ saves         │
          │ new state     │
          └──────┬───────┘
                 │ notifies
                 ▼
          ┌──────────────┐
          │ COMPONENT(UI)│
          │ receives new state │
          └──────────────┘
```

---

## 5. In short

| Step | What happens |
|---|---|
| 1 | The component calls `dispatch(action)` |
| 2 | The store passes the action to the reducer |
| 3 | The reducer returns a new state |
| 4 | The store updates the state |
| 5 | Subscribers (`subscribe()` or React components) are notified and re-render |

---

## 6. In React (via react-redux)

In React it is all the same, just wrapped in hooks:

```javascript
const count = useSelector(state => state.count)
const dispatch = useDispatch()

<button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
```

React subscribes to the store itself and updates the UI on changes.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.