Back to Blog

Understanding How React JS & Flux JS Relate

If you’ve been exploring the world of JavaScript, you’ve likely encountered the terms “React” and “Flux”. But how are React and Flux related? We’ve got all the basic information you need to begin grasping these concepts.

 

Understanding React

Let’s start at the beginning. The year is 2012, and Facebook’s newsfeed has just gotten a makeover. A software designer at the company just launched React JS, a JavaScript library for creating user interfaces (UI). By 2013, React is open-sourced and available to the public.

By itself, React JS is only concerned with user interfaces (like the View in the MVC/Model-View-Controller architecture). It functions by cutting a page into components, which are like pieces of a puzzle that you can separate and work on individually. Using these components, React provides a straightforward technique for building successful web front-ends or layouts. Writing with React means you’re able to simply specify how you want a component to appear in web interactions.

 

How does Flux fit into the picture?

Flux JS is the architecture that Facebook uses when working with React JS. To draw a comparison to the MVC structure, Flux is like the M (Model) stage. It complements React’s component-based design using a unidirectional data flow and allows users to create JavaScript data layers.

Flux applications are composed of 3 main parts. These parts substantiate Flux’s unidirectional flow:

Action: An action taken by a user that is sent to the dispatcher.

Store: Stores that manage data and update all affected views.

Dispatcher: A central dispatcher that receives and transmits action data to the store which hold the application’s data. You are able to define dependencies in your dispatch using the “waitFor” prompt to signal one step depends on a prior step.

Because of how it complements React’s unidirectional flow, Flux is great for isolating data changes and increasing the locality of bugs. In other words, Flux allows you to pinpoint a coding flaw more easily. At the same time, however, it disallows cascading actions. This means that changing one part of your store doesn’t cause another part to change, which adds to Flux’s ability to minimize coding bugs and unnecessary rerendering.

You don’t need to use Flux to write React – but doing so can be a gamechanger. Flux is meant to be a simple application architecture, one that perfectly complements React. The next time you embark on a React endeavor, try incorporating Flux!

--

Want more coding information and lessons? Check out the Hack Reactor blog, or visit our website to find out about our industry-proven software engineering programs.