Redux-thunk - Dispatch is not a Function

Asked

Viewed 164 times

1

Hi, I’m having trouble with the redux-thunk. The console shows me the error saying that the dispatch is not set within my action, I tried to give a console.log of the arguments I get in the function and I’m not getting anything.

The error happens in the 5th line of the action. In the 3rd I added a console.log returning undefined.

Code:

Action

export function signUp(data) {
  return dispatch => {
    console.log(dispatch)
    if (data.email === '[email protected]') {
      dispatch(signIn(data, () => {
        if (data.type === '2') {
          browserHistory.push('/settings/profile')
        } else {
          browserHistory.push('/')
        }
      }))
    } else {
      return {
        type: ActionTypes.USER_SIGN_UP__ERROR
      }
    }
  }
}`

mapActionsToProps

const mapActionsToProps = dispatch => ({
  signUp (data) {
    console.log(dispatch)
    dispatch(userActions.signUp(data))
  }
})

As you can see, I printed on the console the function dispatch inside mapActionsToProps, and is returning as expected:

  function (action) {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }

    return next(action);
  }

Thank you

react

  • Welcome to Stack Overflow! Welcome to Stackoverflow in English. The official language used here is Portuguese, could you translate your question? If you prefer, you can ask the same question on Stackoverflow.com.

  • Eduardo, welcome! Translate the question and put the error text and the line of code in which it occurred.

  • I don’t understand the syntax of mapActionsToProps. Can you explain the content/purpose of this function?

  • Oi Sérgio, mapActionsToProps is a function that is passed to the connect, of react-redux. this function takes as argument the dispatch to call the Creator action. So far everything is working fine. dispatch(actionCreator(data)), but the Creator action is not receiving the dispatch of redux-thunk.

  • But when you have signUp(data) and then {} does that make sense right? or invokes the function with signUp(data) or declare a new function with `Function signup (date) {...etc``

  • @Sergio, what I wrote differently is: const mapActionsToProps = dispatch => {
 return {
 signUp: (data) => {
 console.log(dispatch)
 dispatch(userActions.signUp(data))
 }
 }
})

  • But missing => in your code, you have signUp (data) {
 console.log(dispatch)...

  • 1

    In ECMAScript 2015, a shorthand notation is available, so that the keyword "function" is no longer necessary: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Method_definitions

Show 3 more comments
No answers

Browser other questions tagged react

You are not signed in. Login or sign up in order to post.