title: React Redux - load response data before render
body: <p>Can someone please help me with this. I can see the response from api but when the page renders, response is too late to render. I could not find what I'm doing wrong. I would really appreciate if someone could explain. Thanks</p>
  
  <p>Below is my reducer</p>
  
  <pre><code>    export default function reducer(state = {
    responseCode : {
    },
    fetching: false,
    fetched: false,
    error: null
  }, action){
    switch(action.type){
      case 'FETCH_RESPONSECODE_PENDING' : {
        return { ...state, fetching: false}
        break;
      }
      case 'FETCH_RESPONSECODE_ERROR' : {
        return { ...state, fetching: false, error: action.payload }
      }
      case 'FETCH_RESPONSECODE_FULFILLED' : {
        return{ 
          ...state,
          fetching: false,
          fetched: true,
          responseCode: action.payload
        }
        break;
      }
    }
    return state;
  }
  </code></pre>
  
  <p>//SearchResponseCode Component</p>
  
  <pre><code>    handleSearch(event){
      event.preventDefault();
    }
  
  render(){
      return (
        &lt;form&gt;
          &lt;div className="col-xs-8"&gt;
            &lt;input type="number" className="form-control" placeholder="e.g. main mailing response code or recruitment campaign code" ref="responseCode" /&gt;
          &lt;/div&gt;
          &lt;div className="col-xs-4"&gt;
            &lt;button className="btn btn-default" onClick={this.handleSearch.bind(this)}&gt;Search&lt;/button&gt;
          &lt;/div&gt;
        &lt;/form&gt;
  
      )    
    }
  </code></pre>
  
  <p>//Main Component</p>
  
  <pre><code>import SearchResponseCode from './search-response-code'
  import { connect } from 'react-redux'
  import { fetchResponseCode } from '../../actions/responseCodeActions'
  
  @connect((store)=&gt;{
    return{
      responseCode: store.responseCode.responseCode
    };
  })
    fetchResponseCode(){
      this.props.dispatch(fetchResponseCode(brandUrl, 2570010))
    }
  
  
    render(){
      const { responseCode } = this.props
      console.log(this.responseCode)
      return(
        &lt;Tabs selectedIndex={0}&gt;
          &lt;TabList&gt;
            &lt;Tab&gt;Search By Responce Code&lt;/Tab&gt;
            &lt;Tab&gt;Search By Item Code&lt;/Tab&gt;
            &lt;Tab&gt;Searh All&lt;/Tab&gt;
          &lt;/TabList&gt;
          &lt;TabPanel&gt;
            &lt;SearchResponseCode fetchResponseCode={this.fetchResponseCode.bind(this)} /&gt;
          &lt;/TabPanel&gt;
          &lt;TabPanel&gt;
            &lt;SearchItemCode /&gt;
          &lt;/TabPanel&gt;
          &lt;TabPanel&gt;
          &lt;/TabPanel&gt;
        &lt;/Tabs&gt;  
      )
    }
  }
  </code></pre>
  
  <p>//Action</p>
  
  <pre><code>import axios from 'axios'
  
  export function fetchResponseCode(brandUrl, responseCode){
    let url = brandUrl + '/api/offer/' + responseCode;
  
    return function(dispatch){
      axios.get(url)
        .then((response) =&gt; {
          dispatch({
            type : 'FETCH_RESPONSECODE_FULFILLED',
            payload : response.data
          })
        })
        .catch((err) =&gt; {
          dispatch({
            type : 'FETCH_RESPONSECODE_ERROR',
            payload : err
          })
        })
    }
  }
  </code></pre>