Architecture - sameeri/Code-React GitHub Wiki

Saibaba Vinayakaya Namaha!

Building react components is one thing. Building applications that use react components is another thing. Since react is just the V (the focus of the library is only on the UI and to think in terms of concepts), it can be used in any UI architectural model such as an MVC. However, Facebook, the creators of react, have proposed a model to help build react applications. Flux. Flux in my opinion is a mental model. Its more of an architectural pattern than a framework. It is the representation of certain ideas. It is a way of answering questions such as:

  • Where do i store application state (data)?
  • How do the views get data and interact with the elements that store the application data?
  • How to manage application state changes?

People get kinda confused when they do not see an Angular level implementation as they expect a full blown framework, as there is an npm module called Flux.

The flux elements aka flux players

With every architectural pattern, certain key elements/players exist. I call these players here rather than software components to steer away from causing confusion with React components. Each of them would have a clear responsibility and concerns. They would have a specific role to play. Some unique characteristics.

Flux is no different. It has certain key elements/players. These elements form the vocabulary and set the tone for a discussion at the architecture level. (For, a pattern sets up vocabulary to communicate ideas).

Flux Vocabulary

  • Actions
  • Action Creators
  • Dispatcher
  • Stores
  • Views
  • Controller Views

To flux or not to flux - That is the question!

Since the [flux documentation and examples are a little obscure](What the Flux), people have had a lot of [issues understanding or mapping the mental model out clearly](What the Flux). The flux prescription does not have any rules, any constraints. It just demonstrates how data should flow and names its players.

As a result many have made attempts to redefine or at least make this mental model simpler. Either by imposing certain constraints or by smoothing out the vocabulary. A great list of such thinkers and their models has resulted in confusion. Confusion as to whether to use flux or one of these variants. And the differences in each model.

  • Reflux
  • Fluxxor
  • Flummox
  • NuclearJS
  • Fluxible
  • Redux
  • Relay
  • lux

and the list grows. Many have since redux started appreciating its principles and have taken it as a defacto standard for building react based applications.

However it is important to note that all these variants are flux based. They are children to say the least, of this mother. They just improvise the concepts presented by flux. Either by introducing code elements or by introducing constraints on the model or having better definitions for the players or introducing principles from the wild.