Flux Architecture Truly Complementing React.js
The Flux Architecture – Truly Complementing React.js Author : Sara Stanford
The Flux Architecture – Truly Complementing React.js The Flux architecture is internally used along with React.js – the JavaScript library to build user interfaces. React, a simple and declarative library is used both by Facebook and Instagram along with Flux to develop their very competent UIs. React fosters creation of reusable UI components and to build composable user interfaces. 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
•
•
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 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.
Dispatcher
•
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
•
•
Stores as name suggest, are used to hold various components. They act as containers for both states of the applications and also the logics 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
•
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 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 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.