title: React-Redux : Data gets consumed in UI only after change in state
body: <p>In our application I am trying to get the data from an API and add it to an array which would be fed to the UI but the data in the UI would be empty until there is any change in any state. That is the UI would not show any data but after I click on a button which changes a state, the data would be visible or is being consumed in the UI. But when I console.log and check the array the data would be present in it from the begining.</p>
  <p>Page.js</p>
  <pre><code>import React from 'react;
  .
  .
  .
  //reducer from which data is taken
  @connect((store) =&gt; {
      return {
          alertTrends: store.alertTrendsReducer,
        };
  })
  
  export default class AlertTrendsPage extends React.Component{
  
      constructor(props){
          super(props)        
          this.state = {
              startDatePicker: moment().add('days'),
              endDatePicker: moment().add('days'),
          }
          this.vehicleCount=[]
          this.occuranceCount=[]
      }
  
      //calling the API
      componentDidMount() {
          this.props.dispatch(fetchAlertTrends(null, startDate, endDate));                
      }
  
      //calling the methods in componentDidUpdate after the data is fetched
      componentDidUpdate(prevProps, prevState){
          if(JSON.stringify(prevProps.alertTrends.alertTrends) != JSON.stringify(this.props.alertTrends.alertTrends)){
              this.getVehicleCount()
              this.getOccuranceCount()
          }
      }
  
      //to create total vehicle count for a alert
      getVehicleCount(){
          let data = this.props.alertTrends.alertTrends.machineAlerts;
          let count = [];
          //logic
  
          this.vehicleCount= count
       }
  
      getOccuranceCount(){
          let data = this.props.alertTrends.alertTrends.headers
          let count = []
          //logic
  
          this.occuranceCount= count
      } 
      
      render(){
          console.log('alertTrends', this.props.alertTrends)
  
          return (
              //example code
              &lt;div&gt;
                   &lt;div&gt;
                      &lt;h2&gt;Alert One&lt;/h2&gt;
                      &lt;p&gt;Occurance: ${this.occuranceCount[0]}&lt;/p&gt;
                      &lt;p&gt;Total Vehicle: ${this.vehicleCount[1]}&lt;/p&gt;
                   &lt;/div&gt;
                   &lt;div&gt;
                      &lt;h2&gt;Alert Two&lt;/h2&gt;
                      &lt;p&gt;Occurance: ${this.occuranceCount[1]}&lt;/p&gt;
                      &lt;p&gt;Total Vehicle: ${this.vehicleCount[2]}&lt;/p&gt;
                   &lt;/div&gt;
                   //and the same continues few more times
  
              &lt;/div&gt;
         )
      }
  }
  </code></pre>
  <p>Here map function cannot be used to feed the data as it is not suitable for the UI design.</p>
  <p>I tried to make the arrays vehicleCount and occuranceCount as states and that does not help as well because the the API gets called multiple times and reducer would return empty data.</p>
  <pre><code>this.state = {
              startDatePicker: moment().add('days'),
              endDatePicker: moment().add('days'),
              vehicleCount:[],
              occuranceCount:[]
          }
  </code></pre>
  <p>I am sorry if not provided enough data. Can anyone please let me know how this can be taken care or what would have been wrong here. Please let me know if you need any further details.</p>