The Flux Architecture – Truly Complementing React.js

  • Posted on : December 18, 2014
  • Modified: November 5, 2020

  • Author : SPEC INDIA
  • Category : Java ,   React

What is Flux Architecture?

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 the 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-architecture

Flux comprises of four core components – Actions, Dispatcher, Stores and Controller Views.

The Four Components of Flux

Flux-architecture_1

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 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.
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
  • 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

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.

Author: SPEC INDIA


less words, more information

Tech
IN 200
words

Read our microblogs

Subscribe Now For Fresh Content

Loading

Guest Contribution

We are looking for industry experts to contribute to our blog section through fresh and innovative content.

Write For Us

Our Portfolio

Proven Solutions Across Industries
Technology for Real-Life

Visit Our Portfolio

Scroll Up