Suggest an edit

Improve this article

Refine the answer for “What principles is Redux based on?”. 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)

## 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:
> 1. A single source of truth
> 2. State changes only through actions
> 3. 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.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.