What is the Flux architecture?

Question

Accepted Answer

**Flux** is an architecture pattern (from Facebook) for managing state with **unidirectional (one-way) data flow**. It was the conceptual basis for Redux and influenced most modern state libraries. The core idea: data flows in a single, predictable direction.

## The unidirectional cycle

```text
  Action  →  Dispatcher  →  Store  →  View
    ↑                                   │
    └───────────────────────────────────┘
         (user interaction creates a new Action)
```

```text
1. Action     — a plain object describing WHAT happened ({ type: 'ADD_TODO', text })
2. Dispatcher — a central hub that sends every action to the stores
3. Store      — holds state + logic; updates itself in response to actions
4. View       — renders from the store; user interactions dispatch new actions
```

The loop is strictly one-directional: views never modify stores directly; they *dispatch actions*, which flow through the dispatcher to the stores, which then update the views.

## Why one-way flow matters

```text
Two-way binding (data flows both ways) → hard to trace WHY state changed,
                                          updates cascade unpredictably.
Flux (one-way) → every change starts with an action → predictable, traceable,
                 easy to debug (you can log every action).
```

The problem Flux solved (in large MVC apps) was tangled, bidirectional data flow where it was impossible to know what changed what. Forcing all changes through dispatched actions makes the data flow explicit and debuggable.

## Flux vs Redux

```text
Flux:  multiple stores, a central dispatcher
Redux: a SINGLE store, no separate dispatcher (the store's dispatch + reducers),
       pure reducer functions — a simplification of Flux's ideas
```

Redux took Flux's unidirectional-flow principle and streamlined it: one store, pure reducer functions instead of stores-with-logic, and no explicit dispatcher.

## The lasting legacy

```text
Unidirectional data flow is now standard — Redux, Vuex/Pinia, NgRx, Zustand,
and even React's own state model all embody "actions/events flow one way."
```

## Why it matters

Flux introduced the **unidirectional data flow** principle that underpins virtually all modern state management.

Understanding it explains *why* Redux and similar tools are structured the way they are (dispatch an action → reducer/store updates → view re-renders) and *why* one-way flow is preferred: it makes state changes predictable, traceable, and debuggable.

Even if you never use "classic" Flux, its core idea is the conceptual foundation of the entire ecosystem.