CODEWITHSUNDEEP
reactjsreact-redux
C0G1T0
C0G1T0

Reputation: 350

Redirect after dispatch with history.push

I create a form and when the user clicks on submit it triggers this action:

export const sendMessage = (newMessage, history) => dispatch => {
  axios
    .post("/message", newMessage)
    .then(res =>
      dispatch({
        type: THANK_U,
        payload: res.data
      }).history.push("/thank-you")
    )
    .catch(err =>
      dispatch({
        type: GET_ERRORS,
        payload: err.response.data
      })
    );
};

If there is an error in the form, it shows properly. But if the form is filled correctly instead of redirecting the user to the thank-you page I have an error message:

Cannot read property data of undefined.

If I remove .history.push("/thank-you"), everything works fine so I am guessing it is the problem but I can't find what's wrong.
Thank you for your help.

Upvotes: 0

Views: 553

Answers (1)

Jed Richards
Jed Richards

Reputation: 12437

I think you just have your formatting/syntax a bit messed up. You're trying to chain history.push off dispatch, when instead you need to call them separately.

export const sendMessage = (newMessage, history) => dispatch => {
  axios
    .post("/message", newMessage)
    .then(res => {
      dispatch({
        type: THANK_U,
        payload: res.data
      })
      history.push("/thank-you")
    })
    .catch(err =>
      dispatch({
        type: GET_ERRORS,
        payload: err.response.data
      })
    );
};

Upvotes: 2

Related Questions