Clarificaiton React Redux with Async Action - Ajax call

[arul-prasad]

I am using Redux as a state container for my web application, my challenge is to develop a dynamic React component which emit the aynch action using redux to fetch data from the server bind the store state to my component props.

Example:

var HomePage  = React.createClass({

//dispatch an synch redux action to call an ajax call, on ajax call success store will have the status = success    
 componentWillMount: function() {
           this.props.dispatch(homeActions.homeWgtsInit);
},
  render: function() {
     if(this.props.status=="success"){
      var welcomeText = this.props.data.welcomeText;
     return (  <div> { welcomeText } </div> );
    } 
  } 

})

function mapStateToProps(state,ownProps) {
        return {
            data : state.home.data,
            status : state.home.status
        }
    }

var HomePageComp =  ReactRedux.connect(mapStateToProps)(HomePage); ```

I am having my state.home as global, But the good practice is to keep the state local to the component when the state is not required in global. 

Which is the alternate way to have a dynamic React Component with async action and have a state only at component level not in global ?

[markerikson]

This is a usage question, and should be asked on Stack Overflow instead.

You may also want to read some of the articles in Redux Architecture - Encapsulation.