Flux & Unidirectional Data Flow

The mental model behind modern state management, introduced by Facebook.

State Management5 min readConcept 3 of 22

What is Flux?

Flux is an architectural pattern that Facebook created to complement React. It enforces a **unidirectional data flow** (one-way data flow), making applications much more predictable than traditional MVC (Model-View-Controller) patterns.

In Flux, data always flows in a single, circular direction: **Action → Dispatcher → Store → View**.

Why was it invented?

Before Flux, two-way data binding was common. A View could update a Model, which updated another Model, which updated another View. In large applications (like Facebook's unread message counter), this led to cascading updates and impossible-to-trace bugs.

Flux solves this by demanding that Views can never mutate data directly. Instead, Views must dispatch "Actions" (simple objects describing what happened), which are processed centrally.

The 4 Pillars of Flux

**1. Actions:** Plain JavaScript objects describing an event. E.g., { type: 'ADD_TODO', text: 'Buy milk' }.

**2. Dispatcher:** A central hub that receives all actions and broadcasts them to every registered store.

**3. Stores:** Where the actual state lives. They listen to the dispatcher, update their data based on the action, and then emit a "change" event.

**4. Views:** React components. They listen for "change" events from the store, re-render with the new data, and can trigger new actions based on user input.

The Flux Loop

Interact with the diagram below to see how a simple click event turns into an Action, travels through the Dispatcher to update the Store, and finally re-renders the View in one predictable loop.

// 1. View dispatches an action function View() { return ( <button onClick={() => dispatcher.dispatch({ type: 'ADD' })}> Trigger Action </button> ); }
ACTION
Dispatcher
View (React)
Count: 0
Store
State Data

Notice how the data strictly flows in one direction. The View cannot update the Store directly; it MUST dispatch an Action to the Dispatcher.

Check yourself

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

  1. 1In the Flux architecture, how does a View (React component) update the state?

Remember this

  • Flux enforces Unidirectional Data Flow.
  • Data flows: Action → Dispatcher → Store → View.
  • Views cannot mutate state directly; they must dispatch Actions.
  • This pattern eliminates cascading, unpredictable UI updates.

Done with this concept?

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