The FLUX Architecture

Flux is an architecture designed by facebook. The main idea behinde using flux is to have a simple application architecture. So this makes very easier to maintain when the application become more complex. Flux is not a library or a framework, Its just an architecture that facebook uses internally when working with React

To describe flux better lets do a comparison between Flux and MVC architecture

MVC vs Flux architecture

MVC architecture

In an MVC client side application, the user trigger the controller. The controllers knows how to coordinate changes to one or more models by calling methods on the models. When the model changes It become notifies the attached view and view will updated according to the new model values

Also in MVC the model view communication is bi directional so view can also able to communication with model. So in the case of large application, one model is attached with multiple views. So if a view tries to change the model then it will indirectly affect the another attached view, then this may cause issues.

In MVC, there is no assumptions about wheather data flow within an application should be unidirectional or bidirectional, So when you scale the application it become complex

Flux Architecture

Flux mandate the data flow direction is unique directional. So all the data in the application flows through a central hub called dispatcher

The dispatcher invokes the registered callback, effectively dispatching the action to all stores that have registered with that callback

The views listen for events, retrieve data from the appropriate stores as required and re-render themselves and all their children in the component tree accordingly

Disadvantages

Actions are the main bridge of communication in this architecture and you cant really duplicate them. YOu always have to know about already registered actions, and its bit painful

MVC	Flux
Bi directional data flow	Unidirectional data flow
Data binding is the key	Events or actions are the main players
Controllers handle the business logic	store does all calculation
Somewhat synchronous	can be implemented as asynchoronous

Flux Implementations

Here follows some implementations of flux

Flummox
Alt
Fluxxor
Redux
Flux This
MartyJS
McFly
Fluxible
Delorean
Lux
Reflux
OmniscientJS
Fluxy
Material Flux