Flux: Application Architecture for Building User Interface

Flux: Application Architecture for Building User Interface

04 Mar 2016
0 Comments
Flux: Application Architecture for Building User Interface

Flux is an architecture that complements React and the concept of Unidirectional Data Flow. It is not a framework or a library. It is simply architecture. Flux is an architecture that Facebook uses internally when working with React.

 

Flux applications have three major parts:

Dispatcher: Receives actions and broadcasts payloads to registered callbacks. The Dispatcher is basically the manager of this entire process. The dispatcher receives actions and dispatches the actions and data to registered callbacks. The dispatcher broadcasts the payload to ALL of its registered callbacks. There is only ever one dispatcher, and it acts as the central hub within your application.

Stores: Containers for application state & logic that have callbacks registered to the dispatcher. Stores contain the application state and logic. Stores manage application state for a particular domain within your application. Stores manage the data, data retrieval methods, and dispatcher callbacks. A store exhibits characteristics of both a collection of models and a singleton model.

Views: React Components that grab the state from Stores and pass it down via props to child components. Controller views are really just React components that listen to change events and retrieve Application state from Stores. They then pass that data down to their child components via props. The controller-views call their own render() method via setState() or force update(), updating themselves and all of their children.

 

MVC Application:

As an MVC application grows and controllers, models, and views are added, the dependencies become more complex.

Cryptex Technologies uses Flux architecture to design the best web and mobile applications for clients.




Leave a comment: