Flux Architecture
Flux is an architectural pattern for building client-side applications, introduced by Facebook/Meta alongside React in 2014. Redux is its most famous implementation.
Core idea - unidirectional data flow
text
Action -> Dispatcher -> Store -> View -> Action -> ...Data flows in one direction only - this makes state changes predictable and traceable.
The four parts
1 - Actions - plain objects describing what happened
ts
{ type: 'ADD_TODO', payload: { text: 'Buy milk' } }
{ type: 'USER_LOGGED_IN', payload: { user } }2 - Dispatcher - central hub that receives actions and forwards them
ts
// in Redux this is store.dispatch()
dispatch({ type: 'ADD_TODO', payload: { text: 'Buy milk' } });3 - Store - holds state and update logic
ts
// in Redux this is the reducer
function reducer(state, action) {
switch (action.type) {
case 'ADD_TODO': return [...state, action.payload];
default: return state;
}
}4 - View - React components that read state and dispatch actions
tsx
const todos = useSelector(s => s.todos);
<button onClick={() => dispatch(addTodo('Buy milk'))}>Add</button>Why unidirectional matters
text
// MVC - hard to trace: anything can update anything
Model <-> Controller <-> View
Model <-> Model
// Flux - easy to trace: one direction
View -> Action -> Store -> ViewFlux vs MVC
| MVC | Flux | |
|---|---|---|
| Data flow | Bidirectional | Unidirectional |
| Debugging | Hard to trace | Easy - follow actions |
| State updates | Anywhere | Only in stores |
| Predictability | Low | High |
Flux's key insight was that bidirectional data binding (as in early Angular/Backbone) becomes unmanageable at scale. Unidirectional flow with explicit actions makes state changes auditable and debuggable.
updated
did you know it?