Redux-thunk - dispatch is not a function

Question

I'm having trouble with redux-thunk. It's saying dispatch is not a function inside my action creator, I tried consoling the returned arguments and there is none.

Here goes the 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))
  }
})

By the way, you can see I consoled the dispatch function inside the mapActionsToProps, and it is returning as it was supposed to:

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

    return next(action);
  }

jdrzejb jdrzejb · Accepted Answer · 2017-01-24T12:43:17

Dispatch is not a function, because it's not passed from action creator.

Besides, you should not dispatch any action inside your mapActionsToProps. You just need to bind them to be accessible by connected component.

Your mapActionsToProps

const mapActionsToProps = (dispatch) => {
  return {
    asyncAction: bindActionCreators(asyncAction, dispatch),
  }
}

const Container = connect(mapStateToProps, mapActionsToProps)(Component);

Async action

export const asyncAction = (email) => {
  return (dispatch, getState) => {

    const state = getState();

    dispatch(StartAsync());

    return fetch(`${apiUrl}/endpoint?email=${email}`, {
      method: 'GET'
    })
        .then(response => response.json())
        .then((result) => dispatch(finishedAsync(result)),
              (error) => dispatch(failedAsync(error)))
        .catch(e => {
          console.log('error:', e);
        });
  };
};

Then, in your connected component, you can dispatch this action from props.

Redux-thunk - dispatch is not a function

1 Answers