title: React Redux : Action creator not calling reducer
body: <p>My action creator is not calling my reducer. Any help will be much appreciated. </p>
  
  <p>types.js</p>
  
  <pre><code>export const SELECTED_FOOD = 'selected_food';
  </code></pre>
  
  <p>index.js (action creator / action)</p>
  
  <pre><code>import {
    SELECTED_FOOD
  } from './types';
  
  export function selectedFood({data}) {
  console.log('SELECTED_FOOD **********************',data);
    return({
      type: SELECTED_FOOD,
      payload: data
    });
  }
  </code></pre>
  
  <p>Output from console.log in action creator</p>
  
  <pre><code>Object {_id: "18240", description: "Croissants, apple", score: 0.75, fields: Object}
  </code></pre>
  
  <p>selected_food_reducer.js</p>
  
  <pre><code>import {
  SELECTED_FOOD
  
  } from '../actions/types';
  
  export default function(state = [], action) {
   switch(action.type) {
    case SELECTED_FOOD:
      console.log('Selected Food Reducer *************', state);
      return  action.payload ;
  }
  
  return state;
  }
  </code></pre>
  
  <p>EDIT component failing to call dispatch. </p>
  
  <p>I should have added this on my initial post, it appears there is something wrong in how dispatch is called. ESLint is flagging dispatch on line 3 for defined but never used. </p>
  
  <pre><code>import React from 'react';
  import { connect } from 'react-redux';
  import { dispatch } from 'react-redux';
  import { selectedFood } from '../actions/index';
  
  class TableRow extends React.Component {
    render() {
      const {
        data
      } = this.props;
  
  
      console.log('PROPS TableRow', this.props);
  
      const row = data.map((data) =&gt;
      &lt;tr onClick={() =&gt; selectedFood({data})}&gt;
        &lt;td key={data.description}&gt;{data.description}&lt;/td&gt;
        &lt;td key={data.id}&gt;{data.fields.nutrients[0].amountPer100G}&lt;/td&gt;
        &lt;td key={data.id}&gt;{data.fields.nutrients[1].amountPer100G}&lt;/td&gt;
        &lt;td key={data.id}&gt;{data.fields.nutrients[4].amountPer100G}&lt;/td&gt;
      &lt;/tr&gt;
      );
      return (
        &lt;tbody&gt;{row}&lt;/tbody&gt;
      );
    }
  }
  
  const  mapStateToProps = (state) =&gt; {
    return {
      selectedFood: state.selectedFood
    }
  }
  
  
  const mapDispatchToProps = (dispatch) =&gt; {
    console.log('IN mapDispatchToProps')
    return {
      onClick: ({data}) =&gt; {
        dispatch(selectedFood({data}))
      }
    }
  }
  
  export default connect(mapStateToProps, mapDispatchToProp)(TableRow);
  </code></pre>