title: dispatch is not defined on my functions using react and redux
body: <p>I am trying to use <a href="https://github.com/mironov/react-redux-loading-bar" rel="nofollow noreferrer">react-redux-loading-bar</a> to show a loading bar during fetching data from API servers, I don't use promise middleware so I decided to use it without, the example says do this</p>
  
  <pre><code>import { showLoading, hideLoading } from 'react-redux-loading-bar'
  
  dispatch(showLoading())
  // do long running stuff
  dispatch(hideLoading())
  </code></pre>
  
  <p>And it gives me this.</p>
  
  <pre><code>Uncaught ReferenceError: dispatch is not defined
  </code></pre>
  
  <p>I had similar issues with other libraries and gave up that time, this time I want to actually understand how this works, so any info is greatly appreciated. Heres the code that causing the error, speicifc function and class names stripped.</p>
  
  <pre><code>import React from 'react'
  import { bindActionCreators } from 'redux'
  import { connect } from 'react-redux'
  
  import { showLoading, hideLoading } from 'react-redux-loading-bar'
  
  
  import * as xxxxxActions from '../../actions/xxxxx'
  
  
  class xxxxxx extends React.Component {
  
      constructor(props) {
          super(props)
  
          this.handleclick = this.handleclick.bind(this)
      }
  
      handleclick(){
          dispatch(showLoading())
          asynchronousGetFunction( target_url, function (data) {
              dispatch(hideLoading())
          })
      }
  
      render() {
  
          return  &lt;li onClick={this.handleclick}&gt;yyyyyyy&lt;/li&gt;
      }
  }
  
  function mapStateToProps( state ){
      return {
      }
  }
  
  function mapDispatchToProps(dispatch, state) {
  
      return {
          xxxxxActions: bindActionCreators( xxxxxActions, dispatch )
      };
  }
  
  export default connect(
      mapStateToProps,
      mapDispatchToProps
  )(xxxxxx)
  </code></pre>