What principles is Redux based on?

ReactJunior~2 min read

Redux is based on three core principles

1. Single Source of Truth

The entire application state is stored in one shared store.

Example

javascript

const store = {
  user: { name: "Tim", isAuth: true },
  cart: { items: [/* ... */] },
  theme: "dark"
};

Instead of storing pieces of state across different components or contexts, everything lives in one data structure.

This means:

easier debugging (the whole state is visible in one place);
state can be saved/restored (time-travel, devtools);
data can easily be shared between any components.

2. State is read-only

State cannot be changed directly. The only way to change it is to dispatch an action (an object describing what happened).

Example

javascript

store.dispatch({ type: "ADD_ITEM", payload: { id: 1, name: "Pants" } });

Redux accepts this action and passes it to the reducer.

Not allowed:

javascript

store.state.cart.push(newItem); // this doesn't work

Required:

javascript

store.dispatch({ type: "ADD_ITEM", payload: newItem });

This gives you:

predictability: every change has a "reason" (action);
traceability: all actions can be logged (in DevTools);
immutability: the old state is not mutated, a new one is created.

3. Changes are made with pure functions

To change state, Redux calls reducers, pure functions that take the current state and an action and return a new state.

Example

javascript

function cartReducer(state = { items: [] }, action) {
  switch (action.type) {
    case "ADD_ITEM":
      return { ...state, items: [...state.items, action.payload] };
    case "REMOVE_ITEM":
      return {
        ...state,
        items: state.items.filter(i => i.id !== action.payload.id),
      };
    default:
      return state;
  }
}

Features of a reducer:

it does not mutate state directly (return newObject);
it has no side effects (fetch, console.log, setTimeout, etc. are forbidden);
it always returns a new, predictable state.

Visually

javascript

          ┌──────────────┐
          │   Action     │   ←  (a description of what happened)
          └──────┬───────┘
                 │
                 ▼
          ┌──────────────┐
          │   Reducer    │   ←  (a pure function)
          └──────┬───────┘
                 │
                 ▼
          ┌──────────────┐
          │    Store     │   ←  (the new state)
          └──────────────┘

Example of a full cycle

javascript

dispatch({ type: "INCREMENT" });     // Action

// Reducer
function counter(state = { count: 0 }, action) {
  switch (action.type) {
    case "INCREMENT":
      return { count: state.count + 1 };
    default:
      return state;
  }
}

// The store updates → components re-render with the new count

Why these principles matter

Principle	What it gives you
Single source of truth	Centralization, simple synchronization
State is read-only	Safety, predictable changes
Pure reducers	Simple to test, reliable, no side effects

Summary

Redux rests on three pillars:

A single source of truth

State changes only through actions

Changes are made by pure functions (reducers)

These principles make Redux predictable, easy to debug, and scalable, which matters especially for large React applications with many pieces of state.

Short Answer

Interview ready

Premium

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