Random Quote Machine in Codepen Help

1

I’m trying to finish Random Quote Machine project with React and Redux in CodePen . But,
I keep getting an error in the console that reads “Uncaught TypeError: e is not a function”.This error is shown when I typed “const thunk = ReduxThunk” on the top of my code. I don’t think I did anything wrong, or maybe I did, or maybe its CodePen’s fault, and I’m not sure. If someones knows how to fix this, it’ll be very helpful.

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

const {createStore, combineReducers, applyMiddleware, bindActionCreators } = Redux;
const { Component } = React;
const thunk = ReduxThunk;

const ROOT_URL = "https://talaikis.com/api/quotes/random/";
const FETCH_QUOTE = "FETCH_QUOTE";

/*---ACTIONS---*/
const fetchQuote = () => {
  return(dispatch)=>{
    return axios.get(ROOT_URL).then((response)=>{
      dispatch(changeQuote(response.data.quote));
    });
  }
}

const changeQuote = (quote) => {
  return {
    type: FETCH_QUOTE,
    payload: quote
  }
}

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

/*---COMPONENTS---*/
class Button extends Component {
  render() {
    return(
      <div>
        <button
          className="btn btn-primary"
          >
          Generate Quote
        </button>
      </div>
    );
  }
}

class TextField extends Component {
  render() {
    return(
      <div>
        <h3>Text</h3>
      </div>
    );
  }
}

/*---RENDER---*/
const store = createStore(quoteReducer, applyMiddleware(thunk));

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

ReactDOM.render(
  <App />,
  document.getElementById('root')
);
2

Just do a classic fetch request in componentDidMount instead of redux / axios… shooting yourself in the foot you are. Then, do the same in your handler.

1 Like
3

This is pretty old but I’m answering anyway for other people that encounter the same issue - I had a similar issue with the “Uncaught TypeError: e is not a function”. I fixed it by changing

const thunk = ReduxThunk;

into:

const thunk = ReduxThunk.default;