Dispatch is not a function react redux

I have a react component that will throws an error when I try to dispatch a redux action. Here is the component:

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 (
            <div>
                <form onSubmit={event => this.onFormSubmit(event)}> 
                    <input className="form-input" placeholder="Title" ref={input => this.titleInput = input} />
                    <input className="form-input" placeholder="Author" ref={input => this.authorInput = input} />
                    <input className="form-input form-text-area" placeholder="Description" ref={input => this.descriptionInput = input} />
                    <button className="form-button" type="submit">Submit</button>
                </form>
            </div>
        )
    }
}

export default connect()(InputForm); 

This is the line that creates the problem:

this.props.dispatch(createBook(newBook)); 

I'm not sure what's going on. Here is the error I get:

Uncaught TypeError: this.props.dispatch is not a function
    at InputForm.onFormSubmit (InputForm.js:15)
    at onSubmit (InputForm.js:21)
    at HTMLUnknownElement.callCallback 

I have another component set up almost identically using a different action. It works fine. Here is that component if anyone wants to compare:

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 (
            <div className="book-container">
                <h4>{this.props.title}</h4>
                <p>{this.props.author}</p>
                <p>{this.props.description}</p>
                <p>{this.props.id}</p>
                <button className="book-delete-button" onClick={event => this.onDelete(event)}>Delete</button>
            </div>
        )
    }
}

export default connect()(Book); 

Dunno what's going on here. Please help!