title: React-Redux Dispatch Action from Component
body: <p>I'm trying to dispatch an action from a button click.</p>
  
  <p>I've created my component.  I connect it to the store that is passed down to the component by a Provider.  But I get an error:</p>
  
  <blockquote>
    <p>Uncaught TypeError: this.doSearchClick is not a function</p>
  </blockquote>
  
  <p>I have my imports:</p>
  
  <pre><code>import React, { Component, PropTypes } from 'react';
  import { connect } from 'react-redux';
  import action_doSearch from '../../actions/searchActions'
  </code></pre>
  
  <p>My component:</p>
  
  <pre><code>class SearchForm extends React.Component {
    constructor(props, doSearchClick) {
      super(props);
      this.search = this.search.bind(this);
      this.doSearchClick = doSearchClick;
    }
  
    search() {
      this.doSearchClick('bla bla from search');
    }
  
    render() {
      return(
        &lt;div&gt;
          &lt;button onClick={this.search}&gt;Search&lt;/button&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Not sure if this is required:</p>
  
  <pre><code>SearchForm.propTypes = {
    doSearchClick: PropTypes.func.isRequired
  };
  </code></pre>
  
  <p>Finally the <code>connect</code> stuff:</p>
  
  <pre><code>const mapStateToProps = (state) =&gt; {
    return {
      state
    }
  };
  
  const mapDispatchToEvents = (dispatch) =&gt; {
    return {
      doSearchClick: (searchCriteria) =&gt; {
        dispatch(action_doSearch(searchCriteria));
      }
    };
  };
  const SearchFormConnected = connect(
    mapStateToProps,
    mapDispatchToEvents
  )(SearchForm);
  </code></pre>
  
  <p>At the top level I pass the store down via Provider:</p>
  
  <pre><code>import { Provider } from 'react-redux'
  
  const finalCreateStore = compose(
     applyMiddleware(
        middleware,
        thunk
     ),
     DevTools.instrument()
  )(createStore);
  
  const store = finalCreateStore(reducer);
  
  ReactDOM.render(
    &lt;Provider store={store}&gt;
      ....
  </code></pre>
  
  <p>I have also tried to achieve this by accessing the store via context (didn't work and might be deprecated) and also using the <code>@connect</code> attribute (gave me a similar error).</p>