Random Quote Machine w/ React-Redux

1

Whenever I click my event handler I get this error that reads “Uncaught TypeError: this.props.fetchQuoteRedux is not a function”. It seems like it won’t recognize it as a function or an action creator which clearly is a function and an action creator. I don’t understand why it said it’s not a function when it is a function.

Link to my project: https://codepen.io/Ozubergs/pen/zmbpOR?editors=1010

const {createStore, combineReducers, applyMiddleware, bindActionCreators } = Redux;
const {Provider, connect } = ReactRedux;
const { Component } = React;
const thunk = ReduxThunk.default;

const FETCH_QUOTE_BEGIN = "FETCH_QUOTE_BEGIN";
const FETCH_QUOTE_SUCCESS = "FETCH_QUOTE_SUCCESS";
const FETCH_QUOTE_FAILURE = "FETCH_QUOTE_FAILURE";

/*---ACTIONS---*/
function fetchQuoteRedux() {
  return (dispatch) => {
    dispatch(fetchQuoteBegin());
    return fetchQuote().then(([response, json]) => {
      if(response.status === 200){
        dispatch(fetchQuoteSuccess(json));
      } else {
        dispatch(fetchQuoteError());
      }
    });
  }
}

function fetchQuote() {
  const ROOT_URL = "https://talaikis.com/api/quotes/random/";
  return fetch(ROOT_URL, {method: "GET"})
    .then(response => Promise.all([response, response.json()]));
}

const fetchQuoteBegin = () => {
  return {
   type: FETCH_QUOTE_BEGIN
  }
}


const fetchQuoteSuccess = payload => {
  return {
    type: FETCH_QUOTE_SUCCESS,
    payload
  }
}

const fetchQuoteError = error => {
  return {
    type: FETCH_QUOTE_FAILURE
  }
}

/*--REDUCERS--*/
const quoteReducer = (state = {}, action) =>{
  switch(action.type) {
    case FETCH_QUOTE_BEGIN:
      return state
    case FETCH_QUOTE_SUCCESS:
      return {...state, quote: action.payload};
    default:
      return state;
  }
}

/*---COMPONENTS---*/

class Field extends Component {
  onClick(event){
    event.preventDefault();
    this.props.fetchQuoteRedux();
  }
  
  render() {
    return(
      <div>
        <h3>{this.props.quote}</h3>
        <button
          onClick={this.onClick.bind(this)}
          className="btn btn-primary"
          >
          Generate Quote
        </button>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    quote: state.quote
  }
}

let Container = connect(mapStateToProps, {fetchQuoteRedux})(Field);

/*---CONTAINERS---*/

const store = createStore(quoteReducer, applyMiddleware(thunk));

class App extends Component {
  render() {
    return (
      <div>
        <Field />
      </div>
    );
  }
}

/*---RENDER---*/
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);