Trying to return a promise from an action creator dispatched from mapDispatchToProps

Question

I have an action creator like so.

export const register = user => {
  return dispatch => {
    dispatch(requestRegistation());
    return new Promise((resolve, reject) => {
      Axios.post(make_url('/users'), { user: user }).then(response => {
        if (response.data.errors) {
          reject(response.data.errors);
        }
        if (response.data.user) {
          resolve(response.data.user);
        }
      });
    });
  };
};

and I have a form like so.

handleSubmit: (values, props) => {
  props.props.register(values).then(
    response => {
      console.debug('response', response);
    },
    errors => {
      console.debug('errors', error);
    },
  );
}
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    register: user => {
      dispatch(register(user));
    },
  };
};

It would look as if I'm not returning a promise as I see this.

signup.js:186 Uncaught (in promise) TypeError: Cannot read property 'then' of undefined

signup.js:186 is relative to props.props.register(values).then(

I fell like I'm close but I'm not sure what I'm missing here?

Try removing the function body `{}` from your props function. `register: user => dispatch(register(user))` to make it implicitly return the promise. You are not returning anything from that function right now. — Tholle, Jul 22 '18 at 19:00
See https://stackoverflow.com/questions/23803743/what-is-the-explicit-promise-construction-antipattern-and-how-do-i-avoid-it — Benjamin Gruenbaum, Jul 22 '18 at 19:01

score 1 · Accepted Answer · answered Jul 22 '18 at 19:05

You are not returning the promise from the register function in mapDispatchToProps. You can remove the function body to make the return implicit, or add a return statement.

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    register: user => dispatch(register(user)),
  };
};

Trying to return a promise from an action creator dispatched from mapDispatchToProps

1 Answers1