title: React Router Link onClick redux action call not calling reducer
body: <p>Using react router's Link tag to pass an action on 'onClick' before updating the new state data and rendering in new component on display. Reducer isn't called or any changes made to state. No idea why. Any help would be greatly appreciated.  </p>
  
  <h2>Reducer that doesn't log 'reducer working'. On home screen logs 'reducer called'</h2>
  
  <pre><code>import GATHER_NEIGHBOURS from '../actions';
  import GATHER_REGION from '../actions';
  import GATHER_ALL from '../actions';
  
  import _ from 'lodash';
  
  
  const displayData = (state = {}, action) =&gt; {
      console.log("reducer called!");
      switch (action.type) {
          case 'GATHER_NEIGHBOURS':
              console.log("reducer working!");
              return { display: 'neighbours' };
          case 'GATHER_REGION':
              return {};
          case 'GATHER_ALL':
              return {};
    }
    return state;
  };
  
  export default displayData;
  </code></pre>
  
  <h2>Action that logs 'working'</h2>
  
  <pre><code>export const GATHER_NEIGHBOURS = "GATHER_NEIGHBOURS";
  
  export function importNeighbourData (data) {
      console.log('action working');
      return {
          type: GATHER_NEIGHBOURS,
          payload: data
      };
  }
  </code></pre>
  
  <h2>Container with onClick that fires</h2>
  
  <pre><code>import React, { Component } from 'react';
  import { Link } from 'react-router-dom';
  import { connect } from 'react-redux';
  import { bindActionCreators } from 'redux';
  import { importNeighbourData, importRegionData, importAllData } from '../actions';
  
  
  class HomeMenu extends Component {
      constructor(props){
          super(props);
          this.handleClick50 =this.handleClick50.bind(this);
          this.handleClick200 =this.handleClick200.bind(this);
          this.handleClickAll =this.handleClickAll.bind(this);
      }
  
      handleClick50(e) {
          console.log('click called');
          importNeighbourData(this.props.planets);
      }
  
      handleClick200(e) {
          importRegionData(this.props.planets);
      }
  
      handleClickAll(e) {
          importAllData(this.props.planets);
      }
  
      render(){
          return (
              &lt;div className="homeMenu"&gt;
                  &lt;div&gt;
                      &lt;Link to="/browse" onClick={this.handleClick50}&gt;
                          &lt;img alt="earth-and-moon-icon" src="imgs/earth-and-moon.png"&gt;&lt;/img&gt; 
                          Neighbourhood&lt;br/&gt;
                          (less than 50 parsecs)
                      &lt;/Link&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;Link to="/browse" onClick={this.handleClick200}&gt;
                          &lt;img alt="solar-system-icon" src="imgs/solar-system.png"&gt;&lt;/img&gt; 
                          Regional&lt;br/&gt;
                          (less than 200 parsecs)
                      &lt;/Link&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;Link to="/browse" onClick={this.props.handleClickAll}&gt;
                          &lt;img alt="galaxy-icon" src="imgs/galaxy-view.png"&gt;&lt;/img&gt; 
                          All
                      &lt;/Link&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  function mapStateToProps({ planets }, ownProps) {
      return { planets };
  }
  
  function mapDispatchToProps(dispatch, ownProps) {
      return bindActionCreators({importNeighbourData, importRegionData, importAllData}, dispatch);
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(HomeMenu);
  </code></pre>