What the Flux?

What is it?

When I first started researching Flux, it was described as an application architecture. I thought, “Great, I know architecture, this should make sense.” Little did I know, architecture in the tech world does not equal the architecture that I know. Flux is more of a pattern rather than a formal framework. It complements React’s composable view components by utilizing a unidirectional data flow.

Flux has 4 major parts:

  • Actions
  • Dispatcher
  • Stores
  • Views / React Components

The unidirectional data flow allows Flux to shy away from the what we’re more familiar with — the MVC structure.

MVC Structure and Flow

When a user interacts with a React View, it kicks off an action through the dispatcher, to the stores that hold the data, which then updates all of the views that are affected.

Flux Structure and Data Flow

The unidirectional pattern means that data flows in a single direction. The action, dispatcher, store, and view are independent nodes with distinct inputs and outputs. The actions are simple objects containing new data and an identifying type property.

Sometimes, the views may cause a new action to be sent through the system depending on the UI.

Actions are provided to the dispatcher through action creators originating from the views, through user interaction. The dispatcher, acting as a central hub, will then take those actions and invoke callbacks registered by the stores and send the actions to the stores. The stores respond to whatever actions are relevant to the state and will emit a change event to the controller-views. These views will listen for that change event through event handlers will call their own setState() method to then re-render themselves and all of their descendants in the component tree.

Flux, with Harry Potter

Severus Snape is patrolling the halls of Hogwarts to make sure no students are out of bed. As the halls are dark, he wants to say a spell that will create a light for him.

So he’ll say an incantation, and send it to the wand. The wand will then take that incantation and dispatch it to the corresponding spell. The spell will check that the incantation was correct, and that the wand movement was right, and if it is, it will produce a visible light. Since it was indeed correct (it isn’t a difficult spell after all), light will be created and Snape can continue patrolling, and / or provide a flashlight to Lupin hoping to get Harry into trouble.


Flux Application