title: When I try to dispatch an action I am getting an error dispatch is not defined
body: <ul>
  <li>I am new to redux and trying to learn everything from scratch.</li>
  <li>so I too an npm package and implementing in my form</li>
  <li>when I try to dispatch an action I am getting an error dispatch is not defined</li>
  <li>can you let me know how to fix it. I looked into the documentaion
  <a href="https://www.npmjs.com/package/react-redux-loading-bar" rel="nofollow noreferrer">https://www.npmjs.com/package/react-redux-loading-bar</a></li>
  <li>I debugged by putting console but still I am not able to fix it.</li>
  <li>can you tell me how to fix so that infuture I will fix it myself.</li>
  <li>providing my code snippet and sandbox below.</li>
  </ul>
  
  <p><a href="https://codesandbox.io/s/zn812n05v4" rel="nofollow noreferrer">https://codesandbox.io/s/zn812n05v4</a></p>
  
  <pre><code>const SyncValidationForm = props =&gt; {
    const { handleSubmit, pristine, reset, submitting } = props;
    console.log("handleSubmit---&gt;", handleSubmit);
    console.log("handleSubmit props---&gt;", props);
    dispatch(showLoading("sectionBar"));
    return (
      &lt;div&gt;
        &lt;LoadingBar /&gt;
  
        &lt;form onSubmit={handleSubmit}&gt;
          &lt;Field
            name="username"
            type="text"
            component={renderField}
            label="Username"
          /&gt;
  </code></pre>