A Detailed Study of Flux: The React.js Application Architecture

See the original posting on DZone Python

Flux is a new kind of architecture that Facebook uses when it works with React. React – a popular front-end technology like AngularJS – is a Javascript framework, but it only works with the View layer, which means you have only the V in the MVC – Model-View-Controller – architecture. React gives you the template language and a few function hooks to render HTML. Since it is component based, you can compose an application with React, and just specify how you want your component to look. React will keep it updated; even the underlying data changes. The core principles of React are (1) Flexibility, (2) Efficiency and (3) Declarative code. As React is flexible, you can use it in several projects, create new apps, and even use it within the existing code base, without doing a rewrite.

What Is Flux?

We learned that React takes care of the V, or View, part of the MVC. Now, what about the M, or the Model, part? Flux, a programming pattern, takes care of that. It is the architecture responsible for creating data layers in JavaScript applications and building client-side web applications. Flux complements React’s Composable view components through its unidirectional data flow. You can also say that Flux is more of a pattern than a framework and it has four main components (we will go in depth later):