In 2014, during the Hacker Way conference, Facebook introduced Flux architecture as an alternative to MVC.
Flux architecture is a software design pattern that helps manage the flow of data in complex applications.
It provides s unidirectional data flow, which makes it easier to understand, maintain, and debug applications.
 

1. What is Flux architecture

Flux is an architectural pattern proposed by Facebook.
These are four parts: Actions, Dispatcher , Stores, Views

 

Actions:  Contains all information necessary to do some action
 
Dispatcher: Is a Single Object that broadcast (actions) to all stores
 
Stores:  Manages the state ( data  ), the store is an event emitter
 
Views: Is the user interface component, Views listen for store changes
 

2. Flux architecture with QML

 

 

Views:  Are QML files
 
Actions: Is a Data type that include event name and data
 
Dispatcher: Is Singleton design pattern that is control center forward actions to all stores
 
Stores:  Use C++ models with QML
 
The following application creates a Data Object class with Q_PROPERTY values that will be accessible as named roles when a QList<DataObject*> is exposed to QML
 
 
3. Why do we should use Flux architecture
 
Today, there are two popular architectures : MV*( Model-View-Control, Model-View-Presenter, …) and  flux
Comparison table between  MVC and Flux architecture
 
 
Merit & Demerit
 
 
4. Demo source

You can refer the below Demo source code.

DemoFluxSrc

 

[Reference Source]

  • https://doc.qt.io/qt-5/qtquick-modelviewsdata-modelview.html
  • https://www.infoq.com/news/2014/05/facebook-mvc-flux/
  • https://www.voidcanvas.com/flux-vs-mvc/

Leave a comment

*