title: React redux async mapStateToProps
body: <p>How come when calling <code>mapDispatchToProps</code> functions in <code>componentDidMount</code>, 
  <code>mapStateToProps</code> <code>totalDoctorCount: state.doctors.totalDoctorCount</code> wont always load on time and I would get <code>undefined</code> result in <code>console.log("this.props.totalDoctorCount: "+this.props.totalDoctorCount );</code>.<br>
  I know it's the nature of <code>async</code>, but is there a way to fix it am i doing something wrong here.</p>
  
  <p>Full Code : </p>
  
  <p>doctorActions</p>
  
  <pre><code>export function getDoctors(filterType){
  return function(dispatch){
      axios.get("/api/doctors/"+filterType)
          .then(function(response){
              dispatch({type:"GET_DOCTORS",payload:response.data});
          })
          .catch(function(err){
              dispatch({type:"GET_DOCTORS_REJECTED",payload:err});
          })
  }
  }
  
  export function getTotalDoctors(){
  return function(dispatch){
      axios.get("/api/getTotalDoctors/")
          .then(function(response){
              dispatch({type:"TOTAL_DOCTORS",payload:response.data});
              console.log(response.data);
          })
          .catch(function(err){
              //console.log(err);
              dispatch({type:"TOTAL_DOCTORS_REJECTED",payload:"there was an error rortal doctors"});
          })
  }
  }
  </code></pre>
  
  <p>doctorReducer</p>
  
  <pre><code>export function doctorsReducers(state={
  doctors:[],
  }, action){
  switch(action.type){
      case "GET_DOCTORS":
      // return the state and copy of boos array from state
          return {...state,doctors:[...action.payload]}
      break;
  
      case "TOTAL_DOCTORS":
      // return the state and copy of boos array from state
          return {
              ...state,
              totalDoctorCount:action.payload
          }
      break;
  
  }
  return state;
  }
  </code></pre>
  
  <p>server API</p>
  
  <pre><code>app.get('/doctors/:filterType',function(req,res){
  let filterType = req.params.filterType;
  var query = {};
  if(filterType == "dateCreated"){
      query = {date_created: 'desc'};
  }else if(filterType == "dateUpdated"){
      query = {date_updated: 'desc'};
  }
  Doctors.find({}).sort(query).limit(3).exec(function(err,doctors){
      if(err){
          throw err;
      }
      res.json(doctors);
  });
  });
  
  app.get('/getTotalDoctors',function(req,res){
  Doctors.count({}, function(err, count){
      if(err){
          throw err;
      }
      res.json(count);
  });
  });
  </code></pre>
  
  <p>component</p>
  
  <pre><code>class MainAdmin extends React.Component{
  
      constructor(){
          super();
          this.state = {
              selected_filter:"dateCreated"
          };
      }
  
      openAddDoctorModal = () =&gt; {
          this.setState({AddDoctorModal:true});
      }
  
      closeAddDoctorModal = () =&gt; {
          this.setState({AddDoctorModal:false});
      }
  
  
      componentDidMount(){
          this.props.getTotalDoctors();
          this.props.getDoctors(this.state.selected_filter);
      }
  
  
  
      loadPage = (pageNum) =&gt; {
          //alert(pageNum);
          this.props.loadPage(pageNum,this.state.selected_filter);
      }
  
  
      render(){
  
          const doctorsList = this.props.doctors.map(function(doctorsArr){
              return(
                  &lt;Col xs={12} sm={12} md={12} key={doctorsArr._id}&gt;
                      &lt;DoctorsItem
                          _id = {doctorsArr._id}
                          doc_fname = {doctorsArr.doc_fname}
                          doc_lname = {doctorsArr.doc_lname}
                      /&gt;
                  &lt;/Col&gt;
              )
          });
  
          //const lengthPage = parseInt(this.props.totalDoctorCount/3);
          console.log("this.props.totalDoctorCount2: "+this.props.totalDoctorCount );
          const pages = parseInt(this.props.totalDoctorCount/3, 10);
          console.log("pages: "+pages );
  
          const pageNums = [...Array(pages)].map((pageNum, i) =&gt; {
              return(
                  &lt;Col xs={2} sm={2} md={2} key={i+1}&gt;
                      &lt;Button onClick={() =&gt; this.loadPage(i+1)} bsStyle="success" bsSize="small"&gt;
                          {i+1}
                      &lt;/Button&gt;
                  &lt;/Col&gt;
              )
          });
  
          return(
              &lt;Well&gt;
                  &lt;Row style={{marginTop:'15px'}}&gt;
                      {doctorsList}
                  &lt;/Row&gt;
                  &lt;Row style={{marginTop:'15px'}}&gt;
                      {pageNums}
                  &lt;/Row&gt;
              &lt;/Well&gt;
          )
  
  
  
      }
  }
  
  function mapStateToProps(state){
      return{
          doctors: state.doctors.doctors,
          totalDoctorCount:state.doctors.totalDoctorCount
      }
  }
  
  
  function mapDispatchToProps(dispatch){
      return bindActionCreators({
          getDoctors:getDoctors,
          loadPage:loadPage,
          getTotalDoctors:getTotalDoctors
      },dispatch)
  }
  export default connect(mapStateToProps,mapDispatchToProps)(MainAdmin);
  </code></pre>