title: Dispatch is not a function react redux
body: <p>I have a react component that will throws an error when I try to dispatch a redux action. Here is the component: </p>
  
  <pre><code>import React from 'react'; 
  import { connect } from 'react-redux';
  import { createBook } from './actions/books';  
  import './InputForm.css'; 
  
  export class InputForm extends React.Component {
  
      onFormSubmit(event) {
          event.preventDefault(); 
          let newBook = {
              title: this.titleInput.value, 
              author: this.authorInput.value, 
              description: this.descriptionInput.value
          }
          this.props.dispatch(createBook(newBook)); 
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;form onSubmit={event =&gt; this.onFormSubmit(event)}&gt; 
                      &lt;input className="form-input" placeholder="Title" ref={input =&gt; this.titleInput = input} /&gt;
                      &lt;input className="form-input" placeholder="Author" ref={input =&gt; this.authorInput = input} /&gt;
                      &lt;input className="form-input form-text-area" placeholder="Description" ref={input =&gt; this.descriptionInput = input} /&gt;
                      &lt;button className="form-button" type="submit"&gt;Submit&lt;/button&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default connect()(InputForm); 
  </code></pre>
  
  <p>This is the line that creates the problem: </p>
  
  <pre><code>this.props.dispatch(createBook(newBook)); 
  </code></pre>
  
  <p>I'm not sure what's going on. Here is the error I get: </p>
  
  <pre><code>Uncaught TypeError: this.props.dispatch is not a function
      at InputForm.onFormSubmit (InputForm.js:15)
      at onSubmit (InputForm.js:21)
      at HTMLUnknownElement.callCallback 
  </code></pre>
  
  <p>I have another component set up almost identically using a different action. It works fine. Here is that component if anyone wants to compare: </p>
  
  <pre><code>import React from 'react'; 
  import './Book.css'; 
  import { deleteBook } from './actions/books'; 
  import { connect } from 'react-redux'; 
  
  export class Book extends React.Component {
  
      onDelete(event) {
          this.props.dispatch(deleteBook(this.props.id)); 
      }
  
      render() {
          return (
              &lt;div className="book-container"&gt;
                  &lt;h4&gt;{this.props.title}&lt;/h4&gt;
                  &lt;p&gt;{this.props.author}&lt;/p&gt;
                  &lt;p&gt;{this.props.description}&lt;/p&gt;
                  &lt;p&gt;{this.props.id}&lt;/p&gt;
                  &lt;button className="book-delete-button" onClick={event =&gt; this.onDelete(event)}&gt;Delete&lt;/button&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default connect()(Book); 
  </code></pre>
  
  <p>Dunno what's going on here. Please help!</p>