Show Buttons
Share On Facebook
Share On Twitter
Share On Google Plus
Share On Linkdin
Share On Reddit
Share On Stumbleupon
Contact us
Hide Buttons

Reactjs flux architecture — Visualized

The react flux archi­tec­ture exam­ple in the TodoMVC repos­i­tory has quite a bit of code but it takes a long time to under­stand the rela­tion­ship between the dif­fer­ent parts of the the Flux archi­tec­ture itself from that code. In an effort to save you (and my future self) time, I put together a visu­al­iza­tion of the dif­fer­ent pieces of the archi­tec­ture, the way it is done in the TodoMVC exam­ple, and how those parts com­mu­ni­cate with each other.

reactjs flux architecture

Essen­tially, the flux archi­tec­ture has 5 main components.

  • Stores
  • Dis­patcher
  • View Con­trollers
  • Actions
  • Views

all-flux-components

In the sec­tions that fol­low, you will find a brief descrip­tion of each of these com­po­nents and what they are intended to do based upon the TodoMVC example.

Stores

flux store

What is a Store?

  • The only mod­ule in which you are allowed to update the value of the under­ly­ing model.
  • An Even­tEmit­ter that emits an appro­pri­ate event when the value of the under­ly­ing model changes.
  • Reg­is­ters itself with a dispatcher

How does the store work?

  • When the store reg­is­ters itself with the dis­patcher, it pro­vides a call­back method.
  • The call­back receives at least one argu­ment which is sent from the dis­patcher when the call­back is invoked. Lets call this object the dis­patcher payload.
  • In this call­back method, the store exam­ines the action attribute of the pay­load to deter­mine what action needs to be per­formed on the model/underlying data structure.
  • Emits an appro­pri­ate event once the model/underlying data struc­ture has changed.

Dis­patcher

flux store

What is a dispatcher?

  • Con­tains a method that allows stores to reg­is­ter them­selves with the dispatcher.
  • Con­tains a list of reg­is­tered stores. Think about this as a store registry.
  • Han­dles pay­loads from dif­fer­ent sources e.g. — Server Side, Client Side (View).

How does the dis­patcher work?

  • Takes the pay­load received from the source.
  • Wraps it in an object that allows the han­dler iden­tify the event source if required. This wrap­per object is what I would call the dis­patcher payload.
  • Invokes each store in the store reg­istry with the dis­patcher payload.

View Con­troller

flux store

What is a View Controller?

  • Is the mas­ter React component/view that con­tains all other views as sub com­po­nents of its ren­der method.
  • Is the one that sub­scribes to inter­est­ing events on the stores.
  • Prefer­ably never ini­ti­ates change events on the store by itself. This task is left to the sub components/views that actu­ally have the inter­ac­tion logic.

How does the view con­troller work?

  • Sets the ini­tial state by invok­ing a method on the store(s) that returns the state of the under­ly­ing model.
  • Sub­scribes to store events on com­po­nent mount.
  • Unsub­scribes from store events on com­po­nent unmount.
  • In the ren­der method, it passes its own state(which is noth­ing but the state received from the stores) to the sub components/views so that they can ren­der it as per busi­ness logic.

Actions

flux actions

What are Actions?

  • Knows about the dispatcher.
  • Con­tains meth­ods that cor­re­spond to the actions that the user per­forms as per busi­ness logic. Lets call these meth­ods action methods.

How do Actions work?

  • Action meth­ods receive argu­ment that are noth­ing but data sent to it from the view that gen­er­ated the user inter­acted with.
  • The action method can exam­ine the argu­ments and con­struct a pay­load object that con­tains all the infor­ma­tion nec­es­sary to per­form the requested change in the under­ly­ing store.
  • The dis­patcher is then invoked with this action pay­load object.

Views

flux store

What are Views?

  • The only place where user inter­ac­tion is handled.
  • Lis­tens to events on the UI that would lead to a change on the under­ly­ing model.
  • Del­e­gates the data gen­er­ated from the user inter­ac­tion to the appro­pri­ate method in the Action(which, as dis­cussed above, will be wrapped into a pay­load and sent to the dis­patcher which is then again re-wrapped and sent to all the reg­is­tered stores)

I hope this helped you save some time! Do let me know in the com­ments if I missed something.

You may also like...