title: TypeError: dispatch is not a function. In React stateless component
body: <p>i'm just getting into React-Redux. I successfully connected a few components to the store with <code>mapDispatchToProps</code> and <code>mapStateToProps</code>, so my setup seems to be correct. Now i have a stateless component with a button that should dispatch an action:</p>
  
  <pre><code>import React from 'react';
  import RaisedButton from 'material-ui/RaisedButton';
  import { connect } from 'react-redux';
  import { bindActionCreators } from 'redux';
  import { toggleSnackbar } from '../../store/actions';
  
  const handleClick = props =&gt; {
      console.log(props.toggleSnackbar)
      props.toggleSnackbar("test")
  }
  
  const ButtonComponent = props =&gt;
      (
        &lt;div&gt;
            &lt;RaisedButton
              onClick={() =&gt; handleClick(props)}
            /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
  
  const mapDispatchToProps = dispatch =&gt; bindActionCreators({
      toggleSnackbar,
  }, dispatch);
  
  export default connect(mapDispatchToProps)(muiThemeable()(ButtonComponent))
  </code></pre>
  
  <p>Now i get the error:</p>
  
  <pre><code>Uncaught TypeError: dispatch is not a function
      at Object.toggleSnackbar (bindActionCreators.js:3)
      at handleClick (BottomCTA.jsx:28)
      at Object.onClick (BottomCTA.jsx:61)
      at EnhancedButton._this.handleClick (EnhancedButton.js:144)
      at Object../node_modules/react-dom/lib/ReactErrorUtils.js.ReactErrorUtils.invokeGuardedCallback (ReactErrorUtils.js:69)
      at executeDispatch (EventPluginUtils.js:85)
      at Object.executeDispatchesInOrder (EventPluginUtils.js:108)
      at executeDispatchesAndRelease (EventPluginHub.js:43)
      at executeDispatchesAndReleaseTopLevel (EventPluginHub.js:54)
      at Array.forEach (&lt;anonymous&gt;)
      at forEachAccumulated (forEachAccumulated.js:24)
      at Object.processEventQueue (EventPluginHub.js:254)
      at runEventQueueInBatch (ReactEventEmitterMixin.js:17)
      at Object.handleTopLevel [as _handleTopLevel] (ReactEventEmitterMixin.js:27)
      at handleTopLevelImpl (ReactEventListener.js:72)
      at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:143)
      at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)
      at Object.batchedUpdates (ReactUpdates.js:97)
      at dispatchEvent (ReactEventListener.js:147)
  </code></pre>
  
  <p>The console logs:</p>
  
  <pre><code>ƒ () {
      return dispatch(actionCreator.apply(undefined, arguments));
    }
  </code></pre>
  
  <p>toggleSnackbar action:</p>
  
  <pre><code>export function toggleSnackbar(message) {
    return {
      type: 'TOGGLE_SNACKBAR',
      payload: message,
    };
  }
  </code></pre>
  
  <p>I cannot figure out what is wrong here?</p>
  
  <p><strong><em>Edit:</em></strong></p>
  
  <p>Here is another component in the same project that works just fine with the same aciton:</p>
  
  <pre><code>import React from 'react';
  import { connect } from 'react-redux';
  import PropTypes from 'prop-types';
  import { bindActionCreators } from 'redux';
  import RaisedButton from 'material-ui/RaisedButton';
  import './BuyingFormContainer.css';
  import { formatDollarToFloat } from '../../shared/formater';
  import { BuyingForm } from '../';
  import { buyTicket, toggleSnackbar } from '../../store/actions';
  import { contentEn } from '../../assets';
  
  const customButton = {
    buttonStyle: { borderRadius: '100px', height: '40px', lineHeight: '35px' },
    overlayStyle: { borderRadius: '100px' },
    style: { borderRadius: '100px', minWidth: '200px', color: '#fffff' },
  };
  
  const handleClick = (props) =&gt; {
      console.log(props.toggleSnackbar)
    props.buyTicket(formatDollarToFloat(props.buyingForm.values.buyingFormInput));
    //TODO: Trigger this after BUY_TICKET_SUCCESS
    props.toggleSnackbar("Prediction Recieved " + props.buyingForm.values.buyingFormInput)
  }
  
  const buyingFormContainer = props =&gt; (
    &lt;div className="buyingForm__container" id={'buyingForm'}&gt;
      &lt;BuyingForm /&gt;
      &lt;RaisedButton
        label={contentEn.topComponent.buttonLabel}
        style={customButton.style}
        buttonStyle={customButton.buttonStyle}
        overlayStyle={customButton.overlayStyle}
        className="buyingForm_raisedButton"
        secondary
        onClick={() =&gt; handleClick(props)}
      /&gt;
    &lt;/div&gt;
  );
  
  buyingFormContainer.propTypes = {
    buyTicket: PropTypes.func.isRequired,
  };
  
  const mapStateToProps = state =&gt; ({
    buyingForm: state.form.buyingForm,
  });
  
  const mapDispatchToProps = dispatch =&gt; bindActionCreators({
    buyTicket,
    toggleSnackbar,
  }, dispatch);
  
  export default connect(mapStateToProps, mapDispatchToProps)(buyingFormContainer);
  </code></pre>