title: Obtaining access to redux dispatch in a react container component
body: <p>I have a container component called <code>ButtonContainer</code> which is passing two bits of state to the button presentational component. The problem is, the container needs to pass an onclick function which uses <code>dispatch</code> but I don't know how to get access to it. See the code below. How can I get access to dispatch?</p>
  
  <h2>ButtonContainer.jsx</h2>
  
  <pre><code>import React from 'react'
  import { connect } from 'react-redux'
  import { fooAction , barAction } from '../foobarActions.js'
  import ButtonComponent from './ButtonComponent.jsx'
  
  const mapStateToProps = (state) =&gt; {
    var buttonText = this.state.foo + this.state.bar
    var buttonOnClick = function(e, coord) {
      e.preventDefault()
      if (e.nativeEvent.which === 1) { // left click
        dispatch(fooAction);
      } else if (e.nativeEvent.which === 3) {
        dispatch(barAction); // right click
      } else {
        console.log("Unknown click");
      }
    }
    return {
      buttonText: buttonText
      buttonOnClick: buttonOnClick
    }
  }
  
  const mapDispatchToProps = (dispatch) =&gt; {
    return {}
  }
  
  const ButtonContainer = connect(
    mapStateToProps,
    mapDispatchToProps
  )(ButtonComponent)
  
  export default ButtonContainer;
  </code></pre>