Flux is the application architecture that Facebook introduced for building client-side web applications. It's a pattern rather than a framework. When you get the idea what flux does, it’s easier to understand and learn react.
If you have worked with angular, you know that angular follows two-way binding approach. Flux is going on the opposite direction and it follows unidirectional dataflow.
Flux architecture has three major concepts
- Dispatcher
- Store/emitter
- React component
What's actually happens behind the scene is, react initializes each react component and virtually renders them based on values has been set in getInitialState method.
Then, react will compare the virtual Dom with browser Dom and updates only the differences.
React component needs to know when to re-render the view if initial data changes. It happens by registering itself to store/emitter and asking store to run a specific call back method if some changes happens. What needs to be done in this call back method is simply updating the state and setting it to the new value coming from Store, which will force a re-render of this component.
This setting easily can be done in componentDidMount and they can be unregistered from listening in componentWillUnmount method.
When a user interacts with any react components (views). React component lets the dispatcher know that an action has occurred, and the dispatcher let's every store/emitter (which have registered to be notified) know that that action has occurred.
It’s up to the store on what to do with that action, and the data that the dispatcher dispatches along with it.
Important point to notice is that the store doesn't need to emit what has changed. It only needs to emit the event that something has changed because all React needs to do is re-render its virtual DOM based on all the data, and then the DOM diffing algorithm will do the hard work of figuring out what to actually do inside the browser DOM.
React Life Cycle Involved in Flux
architecture
getInitialState: Invoked once before the component
is mounted. The return value will be used as the initial value of this.state.
componentDidMount: Invoked once, only on the client
(not on the server), immediately after the initial rendering occurs.
componentWillUnmount: Invoked immediately before a
component is unmounted from the DOM.
Dispatcher
An application can only one
dispatcher. When user interact with React component. React component call the Dispatch
method of Dispatcher and pass on the action and data.
A dispatcher has two main methods:
Register: It register all the
callbacks (Stores/emitters) that need to be executed/notified
Dispatch: executes all the callbacks that registered to
be executed and pass received data from react component
Emitter
An application can have multiple
stores/emitters. Emitters have two main methods:
On: registers the call-back methods which needs to
be executed when a particular event occurs
Emit: executes all the callbacks
that registered to be executed when this particular event has occurred
references:
https://facebook.github.io/flux/docs/overview.html
https://www.pluralsight.com/courses/react-flux-angular
references:
https://facebook.github.io/flux/docs/overview.html
https://www.pluralsight.com/courses/react-flux-angular
Comments