React / redux - Onclick对reducer的反应

Question

I have a react/redux application and I have the following challenge. When I click on a button I want to save the form data and if a validation error occures in the backend I want to display and message and otherwise redirect.

In my component I have this function

doSubmit = (data) => {
    const {actions, linkUtils, myObject} = this.props

    return actions.checkAuthentication()
      .then(actions.sendMyObject(myObject, data) )
        .then(linkUtils.openRoute('nextUrl'))
  }

Now the action uses dispatch to invoke the reducer and I can verify the reducer is invoked. I use action types and I use a switch case on the action type:

case types.SAVE_SUCCESS:
 return {
   ...state,
   save: true,
}
case types.SAVE_ERROR:
  return {
    ..state,
    saved: false,
    fieldErrors: action.payload.errors
}

Now in the doSubmit I would like something like this:

return actions.checkAuthentication()
 .then(actions.sendMyObject(myObject, data) )
  .then( if (saved) { linkUtils.openRoute('nextUrl') } )

So that only when saving of the object is successful a redirect is done.

How can I do this?

Answer 1

You could just switch on the data sendMyObject returns:

return actions.checkAuthentication()
  .then(actions.sendMyObject(myObject, data) )
    .then((saved) => {
      if (saved) {
        return linkUtils.openRoute('nextUrl');
      } else {
        // something else
      }
    });

For this to work, your promise sendMyObject needs to resolve saved or some other information telling the next promise in the chain whether or not it was successful.