Managing State in React.js + Flux Applications.

Recently i have been trying out the new kid on the block, React.js and its unidirectional data/state management partner Flux.

The concept of React.js is very simple.

• Your app is a combination of react components. 
  
• Every component has a state and properties.
  
• Whenever there is any change in the state or properties of the components the component is rerendered.

Though in the above points i used the state and properties very casually. Usually its very important to get your head around when to use state and when to use properties.  You can refer to this article https://github.com/uberVU/react-guide/blob/master/props-vs-state.md to find out more about props vs state. 

On the other hand Flux which calls itself an architectural pattern rather than a framework, is also straight forward.

• There is a dispatcher whose main goal is to dispatch the event to all the registered objects.
  
• There is a store, the store basically encapsulates the state of a component or group of components. The store registers itself with the dispatcher and receives the events with data from the dispatcher. it can choose which actions it should react to and modify the data it is holding.
• Actions are sent to the dispatcher with a payload to be distributed to the registered objects.

This example can make it more clear

now a component can listen to this store by registering a listiner and whenever there is a change an event is emitted form the store and the component’s listener method is called back which can update its state.