What is flux?

Flux is an application architecture (not a framework or library) designed by Facebook to manage data flow in React applications. It was created as an alternative to the traditional MVC (Model-View-Controller) pattern, and it emphasizes a unidirectional data flow to make state changes more predictable and easier to debug.

Flux complements React by organizing the way data moves through your application, especially in large-scale or complex projects.

Core Concepts of Flux

Flux operates using four key components, each with a specific responsibility:

• Actions
  • Plain JavaScript objects or functions that describe what happened (e.g., user interactions or API responses).
  • Example: { type: 'ADD_TODO', payload: 'Buy milk' }
• Dispatcher
  • A central hub that receives actions and dispatches them to the appropriate stores.
  • There is only one dispatcher in a Flux application.
• Stores
  • Hold the application state and business logic.
  • Respond to actions from the dispatcher and update themselves accordingly.
  • They emit change events that views can listen to.
• Views (React Components)
  • Subscribe to stores and re-render when the data changes.
  • They can also trigger new actions (e.g., on user input).

The workflow between dispatcher, stores and views components with distinct inputs and outputs as follows:

Practical Code Example

// Flux Architecture: Unidirectional Data Flow
// Action -> Dispatcher -> Store -> View -> Action
const Action = { type: 'INCREMENT_COUNT' };
AppDispatcher.dispatch(Action);