How Are React JS & Flux JS Related?
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 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!
Originally published at www.hackreactor.com.