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: