title: How and where to dispatch action when react router changes props
body: <p>I may be missing something here, change in react-router params using Link will cause the props to change with the new param(s) and trigger an update cycle.</p>
  
  <p>You can't dispatch an action in the update cycle but that's the only place where the parameter is available. I need to get new data when the day parameter changes in my stateless component.</p>
  
  <p>The component has 2 links, previous and next day. The previous day looks like this:</p>
  
  <pre><code>&lt;Link to={"/sessions/" + prefDay}&gt;{prefDay}&lt;/Link&gt;
  </code></pre>
  
  <p>[UPDATE]</p>
  
  <p>Here is the solution so far:</p>
  
  <p>The Overview component is just a function taking props and returning jsx, the following is the container that will check if date is set and if it's not it'll redirect. If date is set then it'll return Overview.</p>
  
  <p>It also checks if the router day paramater changed, if it did then it'll set dispatchFetch to true.</p>
  
  <p>This will then cause the render function to asynchronously dispatch the getData action.</p>
  
  <p>Not sure if there would be another way to do this, I would prefer to listen to events from router and dispatch the events from there but there is no (working) way to listen to the router.</p>
  
  <pre><code>import { connect } from 'react-redux';
  import React, { Component } from 'react';
  import Overview from '../components/Overview';
  import { getData } from '../actions';
  import { selectOverview } from "../selectors";
  import { Redirect } from "react-router-dom";
  
  
  const defaultDate = "2018-01-02";
  const mapStateToProps = (lastProps =&gt; (state, ownProps) =&gt; {
    var dispatchFetch = false;
    if (lastProps.match.params.day !== ownProps.match.params.day) {
      lastProps.match.params.day = ownProps.match.params.day;
      dispatchFetch = true;
    }
    return {
      ...selectOverview(state),
      routeDay: ownProps.match.params.day,
      dispatchFetch
    }
  })({ match: { params: {} } });
  const mapDispatchToProps = {
    getData
  };
  class RedirectWithDefault extends Component {
    render() {
      //I would try to listen to route change and then dispatch getData when
      //  routeDay changes but none of the methods worked
      //  https://github.com/ReactTraining/react-router/issues/3554
      //    onChange in FlexkidsApp.js never gets called and would probably 
      //      result in the same problem of dispatching an event in update cycle
      //    browserHistory does not exist in react-router-dom
      //    this.props.history.listen didn't do anything when trying it in the constructor
      //So how does one dispatch an event when props change in stateless components?
      //  can try to dispatch previous and next day instead of using Link component
      //  but that would not update the url in the location bar
      if (this.props.dispatchFetch) {
        Promise.resolve().then(() =&gt; this.props.getData(this.props.routeDay));
      }
      return (this.props.routeDay)//check if url has a date (mapStateToProps would set this)
        ? Overview(this.props)
        : &lt;Redirect//no date, redirect
          to={{
            pathname: "/list/" + defaultDate
          }}
        /&gt;
    }
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(RedirectWithDefault);
  </code></pre>