The Redux Mental Model

Understand the strict, unidirectional data flow that makes Redux predictable and scalable.

State Management6 min readConcept 10 of 22

The Single Source of Truth

Redux is a predictable state container. At its core, the Redux mental model relies on a strict **unidirectional data flow** and a single centralized object called the **Store**.

The Store holds the entire application's state tree in one place. Unlike React component state which is scattered and mutable, the Redux Store is the definitive, read-only single source of truth for your app.

Why enforce unidirectional flow?

In a traditional MVC (Model-View-Controller) architecture, views can update models, and models can update other models, leading to a tangled web of unpredictable state mutations (the 'cascading update' problem).

Redux forces a strict one-way cycle: **State -> UI -> Action -> Reducer -> State**. Data only ever flows in one direction, making it incredibly easy to trace bugs, log state changes over time, and even implement 'time-travel debugging'.

Actions, Dispatching, and Reducers

Because the state is read-only, you cannot mutate it directly. Instead, you describe state changes using **Actions**.

An Action is a plain JavaScript object with a type string describing *what happened* (e.g., "todos/todoAdded"). When an event occurs, the UI **dispatches** this action to the Store.

The Store passes the current state and the action into a **Reducer**. A Reducer is a pure function that calculates and returns the brand new state tree. The Store saves this new state and notifies the UI to re-render.

The Unidirectional Cycle

Watch the data flow predictably through the Redux architecture. When an action is dispatched, it travels one-way through the reducer to produce a new state tree.

// 1. The Store (Single Source of Truth) let state = { todos: [] }; // 2. The Action (Event) const action = { type: 'todos/todoAdded', payload: 'Learn Redux' }; // 3. The Reducer (Pure Function) function reducer(state, action) { if (action.type === 'todos/todoAdded') { return { ...state, todos: [...state.todos, action.payload] }; } return state; }
View (UI)
↓
{ type: 'todos/todoAdded' }
↓
Reducer(state, action) => newState
↓
Store (State){ todos: ['Learn Redux'] }

Unidirectional Data Flow: Actions are dispatched to the Reducer, which calculates the new State, which then updates the View.

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1Which of the following is strictly forbidden inside a Redux Reducer function?

Remember this

  • Redux uses a single Store as the single source of truth.
  • State is read-only and can only be changed by dispatching an Action.
  • Actions are plain objects that describe events that happened.
  • Reducers are pure functions that take the current state and action to calculate the next state.

Done with this concept?

Mark it complete to track your progress. No login needed.