How to Structure React App using Flux

Why ReactJS?

ReactJs is a Javascript framework , its born in Facebook ad’s organisation. The main purpose of reactJS is to manage complex user interface that change over time.

The concept of reactJS is entirely different from normal web development using MVC because it’s not a general purpose architecture and its actually created to solve the complexity they faced with Facebook. ReactJS never solves all sort of user interface problems, instead it is developed to deal with large set of data that change over time with unidirectional data flow with flux architecture.

How to integrate FLUX Architecture?

Mainly the flux architecture constitutes three components Dispatcher,Store and View. This is not same as Model View Controller. There is no controller in Flux Architecture, instead it uses view-controller concept.
When a user interact with react view, the view propagates an action through Dispatcher to various stores holding the data set and Store will update the View.

Reactjs Flux Structure Architecture

Dispatcher

There is only single global Dispatcher. When a user click send, then Dispatcher will generate action and data, but never process it. Action is what we want to do and data is data we need to do it .

TestDispatcher.dispatch({
        actionName: 'chat',
        data : data 
    });

Store

For our application we need to create store with a collection of logic. A store is not a model but it contains model. A Store is allowed to register Dispatcher callback. The Dispatcher exists to send message from view to store. When Dispatcher dispatches action, Store will perform it. Here, for the action ‘send’.

Var MessageStore= ...

 TestDispatcher.register(function(payload)

{

switch(payload.actionName){

Case ‘chat’ : UserStore.items.push(payload.data);

  UserStore.trigger(‘change’);

break;

}

})

After the action has been executed, the next step is to trigger the change and update view . Dispatcher never triggers the change instead here I use MicroEvent.js which will trigger the change event.

View

After the store update our View has to re-render. So within our View, we need the following function to update change and there must be componentWillUnmount function to clean eventlistener when component unbinds.

componentDidMount : function(){
MessageStore.bind(‘change’,this.messageUpdate)
},
messageUpdate:function(){
this.forceUpdate();
},
componentWillUnmount : function(){
MessageStore.unbind(‘change’,this.messageUpdate)
},
render : function(){
var messages = MessageStore.getAll();
     var messagesHtml = messages.map( function( listItem ) {
             return <li key={ listItem.id }>
           { listItem.message }
         </li>;
   });
    return <div>
       <ul>
            { messagesHtml }
       </ul>
<input type=”text” name=”chat”>
        <button onClick={ this.sendMessage }>Send</button>
    </div>;
}

Conclusion

You can visit http://facebook.github.io/flux/docs/overview.html to know more about flux architecture.

Learn More From Our Techies

Latest Post