An Introduction to React using Flux Architecture

Flux is developed by Facebook as an application architecture for UI  implementation. React is a JavaScript library which is used to build user interfaces.  So Facebook use Flux architecture when they implementing user interfaces with React.

Applications which are implemented in React using flux architecture have four major parts. These are independent nodes with distinct inputs and outputs.

•    Actions
•    Dispatcher
•    Stores        
•  Controller Views

Unidirectional Data Flow through major parts

Let’s take a look at each major parts.

Actions

Action creators are functions that create actions. Those are called within views to send actions to the Dispatcher. Actions are helper methods that facilitate passing data to the Dispatcher.

Each action has an action type. This is declared as a constant and used to define what action should take place.  Actions can be handled according to their action type and they can be called with data by giving data as its arguments.

Dispatcher

All data flows through the dispatcher and it is working as the manager of this entire process. The dispatcher receives actions and dispatches the actions and data to registered callbacks.  There is only one dispatcher in an application.

Stores

Application state is maintained only in the stores. Stores manage the application state, dispatcher callbacks and data retrieval methods. Stores respond to actions which are relevant to the state they maintain. Stores emit a change event to alert the controller-views when there is a change in a store.

Controller Views

Controller views are just React components which views data in the application. It also listens to change events and retrieve application state from Stores.

When controller-view receives the change event from the store, first it requests new data from the stores using their public getter methods. Then it calls its own setState() or forceUpdate() methods.  This will cause to run render() method in react component and it will show updated view.