What is Flux Architecture?
As commonly misunderstood Flux does not classify as a framework or a library but simply support architecture for React leveraging a Dispatcher library and setting up an event system to manage applications state. It reinforces the concept of Unidirectional Data Flow.
Flux comprises of four core components – Actions, Dispatcher, Stores and Controller Views.
The Four Components of Flux
- Actions pass data to the Dispatcher and are basically Helper methods. Actions introduce the data into the Flux Flow when interacting with the to and fro traffic from the outside. Finally, the data finds a way into the Stores.
- Action Creators are called within views to send actions to the Dispatcher. They are collections of methods. Actions prove to be actual payloads being delivered by the Dispatcher.
The dispatcher receives actions as the first step of its task. The second task carried out by a Dispatcher is broadcasting payloads to callbacks which were registered earlier. It actually orchestrates the complete logic and is in fact at the heart of the application by receiving actions and dispatching these actions along with data to registered callbacks.
- Stores as the name suggest, are used to hold various components. They act as containers for both states of the applications and also the logic for each of the registered callbacks and the related dispatchers.
- The application state of a specific domain in the application is managed by the Stores in Flux. Making a long story short, Stores manages data, data methods as well as dispatcher callbacks in a particular domain within the application.
Controller Views get the state from Stores and from there pass it to child components. They are basically React components.
The Architecture Flow In A Nutshell
Digging in deeper into this architecture, the role of each component and its functionality is made clear as follows:
- The APIs are received and sent by the Action Components.
- Action methods send an action constant for the update to the Dispatcher along with action data.
- When the Dispatcher receives this event the actual dispatch is made differently depending on the origin. API and Views would be treated differently.
- The Dispatcher dispatches the action, constant with data payload to the registered callbacks.
- All the Stores with registered callbacks with the Dispatcher will receive the dispatched event and the related data.
- The action constant and the data are updated in the Store before being sent to the change event.
- Finally, the View gets the change event and updates the relevant child views along with itself to maintain the integrity
- Views keep calling Action creators repetitively
The Flux architecture definitely complements and enhances React.js in all ways to make competent user interfaces.
The anxious wait is on for the React.js conference at Facebook headquarters, Melno Park in California soon in January 2015 where interesting news for Flux are expected.