title: Pass Dispatch to onClick Event Redux
body: <p>I'm digging into my first react/redux application and I've been having quite a bit of trouble mapping my dispatch actions to onClick events in my components.</p>
  
  <p>I've tried a couple of variations of trying to bind the onClick Event to the dispatch, but I always end up with either :</p>
  
  <p><code>ReferenceError: onMovieClick is not defined</code></p>
  
  <p>or alternatively when I do end up binding a function correctly I'll get an error related to <code>dispatch is not defined</code>.</p>
  
  <p><strong>My Goal</strong>
  I'm trying to implement a filter(delete) from store function</p>
  
  <p><strong>actions/movieActions.js</strong></p>
  
  <pre><code>import * as actionTypes from './actionTypes'
  
  export const createMovie = (movie) =&gt; {
    return {
      type: actionTypes.CREATE_MOVIE,
      movie
    }
  };
  
  export const deleteMovie = (id) =&gt; {
    console.log('action triggered. movie index:' + id)
    return {
      type: actionTypes.DELETE_MOVIE,
      id
    }
  }
  </code></pre>
  
  <p><strong>reducers/movieReducers.js</strong></p>
  
  <pre><code>export default (state = [], action) =&gt; {
    switch (action.type){
      case 'CREATE_MOVIE':
        return [
          ...state,
          Object.assign({}, action.movie)
        ];
      case 'DELETE_MOVIE':
        return [
          state.filter(({ id }) =&gt; id  !== action.id)
        ]
      default:
            return state;
    }
  };
  </code></pre>
  
  <p><strong>components/MovieList.js</strong></p>
  
  <pre><code>import React from 'react'
  import Slider from 'react-slick'
  import { dispatch, connect } from 'react-redux'
  import {Icon} from 'react-fa'
  import { deleteMovie } from '../../actions/movieActions'
  
  import 'slick-carousel/slick/slick.css'
  import 'slick-carousel/slick/slick-theme.css'
  import './MovieList.scss'
  
  class MovieList extends React.Component{
    constructor(props){
      super (props)
    }
  
    handleClick(id) {
      dispatch(deleteMovie(id))
    }
  
    onMovieClick(id){
     dispatch.deleteMovie(id)
    }
  
    render () {
      // Settings for slick-carousel
      let settings = {
        infinite: true,
        speed: 500
      }
  
      return (
        &lt;div className='col-lg-12'&gt;
          {this.props.movies.map((b, i) =&gt;
            &lt;div key={i} className="col-lg-2"&gt;
              &lt;Slider {...settings}&gt;
                {b.images.map((b, z) =&gt;
                  &lt;div className="img-wrapper"&gt;
                    &lt;Icon name="trash" className="trash-icon" onClick={() =&gt;
                      console.log(this.props.movies[i].id),
                      onMovieClick(this.props.movies[i].id)
                    }/&gt;
                    &lt;img className="img-responsive" key={z} src={b.base64}&gt;&lt;/img&gt;
                  &lt;/div&gt;
                )}
              &lt;/Slider&gt;
              &lt;div className="text-left info"&gt;
                &lt;h2&gt;{b.title}&lt;/h2&gt;
                &lt;p&gt;{b.genre}&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          )}
        &lt;/div&gt;
      )
    }
  }
  
  // map state from store to props
  
  const mapStateToProps = (state) =&gt; {
    return {
      movies: state.movies
    }
  };
  
  // Map actions to props
  const mapDispatchToProps = (dispatch) =&gt; {
    return {
      onMovieClick: (id) =&gt; {
        dispatch(deleteMovie(id))
      }
    }
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(MovieList)
  </code></pre>
  
  <p>Would love some advice if anyone has a moment.</p>