How do store, actions, and reducers interact?

ReactJunior~1 min read

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.

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.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.