title: React-redux : listening to state changes to trigger action
body: <p>I have my redux state like this: </p>
  
  <pre><code>{
    parks: [
      {
        _id:"ad1esdad",
        fullName : "Some Name"
      },
      {
        _id:"ad1es3s",
        fullName : "Some Name2"
      }
    ],
    parkInfo: {
      id : "search Id",
      start_time : "Some Time",
      end_time : "Some Time"
    }
  }
  </code></pre>
  
  <p>I have a <code>parkSelector</code> component from which a user selects parkId and start_time and end_time </p>
  
  <pre><code>import React, { Component } from 'react';
  import { changeParkInfo } from '../../Actions';
  
  class ParkSelector extends Component {
  
    constructor(props) {
      super(props);
  
      this.handleApply = this.handleApply.bind(this);
      this.rederOptions = this.rederOptions.bind(this);
  
      this.state = {
        startDate: moment().subtract(1, 'days'),
        endDate: moment(),
        parkId : this.props.parks[0]
      };
    }
  
    handleApply(event) {
      this.setState({
        parkId : event.target.parkId.value
        startDate: event.target.start_time.value,
        endDate: event.target.end_time.value,
      });
      this.props.changeParkInfo(this.state.parkId,this.state.startDate,this.state.endDate);
    }
  
  
    rederOptions(){
      return _.map(this.props.parks,(park,index)=&gt;{
        return(
          &lt;option value={park._id} key={park._id}&gt;{park.profile.fullName}&lt;/option&gt;
        );
      });
    }
  
    render() {
  
      return (
        &lt;div className="row"&gt;
          &lt;div className="pb-4 col-sm-3"&gt;
            &lt;form onSubmit={this.handleApply}&gt;
            &lt;select name="parkId" value={this.state.parkId} className="form-control input-sm"&gt;
                {this.rederOptions()}
            &lt;/select&gt;
            &lt;input name="start_time" type="date" /&gt;
            &lt;input name="end_time" type="date" /&gt;
            &lt;button type="submit"&gt;Apply&lt;/button&gt; 
            &lt;/form&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  
  function mapStateToProps(state){
    return {
      parks : state.parks
    };
  }
  
  export default connect(mapStateToProps,{ changeParkInfo })(ParkSelector);
  </code></pre>
  
  <p>I have another component 'stats' which needs to displays information related with <code>parkInfo</code> which will be loaded my api request.</p>
  
  <pre><code>import React, { Component } from 'react';
  import StatsCard from '../../components/StatsCard';
  import { getDashboardStats } from '../../Actions';
  
  class Dashboard extends Component {
  
    constructor(props) {
      super(props);
    }
  
    render() {
  
      return (
        &lt;div className="animated fadeIn"&gt;
          &lt;div className="row"&gt;
            &lt;StatsCard text="Revenue Collected" value={9999} cardStyle="card-success" /&gt;
            &lt;StatsCard text="Total Checkins" value={39} cardStyle="card-info" /&gt;
            &lt;StatsCard text="Total Checkouts" value={29} cardStyle="card-danger" /&gt;
            &lt;StatsCard text="Passes Issued" value={119} cardStyle="card-warning" /&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
      )
    }
  }
  
  function mapStateToProps(state){
    return {
      parkInfo : state.parkInfo,
      dashboardStats : state.dashboardStats
    };
  }
  
  export default connect(mapStateToProps,{ getDashboardStats })(Dashboard);
  </code></pre>
  
  <p>I need to call <code>getDashboardStats</code> action (which makes api call and stores in results in <code>dashboardStats</code> of the redux state) whenever the redux state of <code>parkInfo</code> changes.</p>
  
  <p>What is the best way to call this action, I have tried <code>componentWillUpdate</code> but it keeps on updating infinitely. What is best practice for this scenario ?  </p>