salsita / redux-form-actions

MIT License
10 stars 3 forks source link

how to do redirect when the form submission is successful #2

Open istvano opened 7 years ago

istvano commented 7 years ago

Hi,

Thanks for this lib. it is a really nice addition to redux-forms. I was struggling as I am using redux observable. it seems to work great.

As I am very new to redux and redux-form and react-router I am not sure how I should deal with the fact the form was submited successfully.

I followed your example and it works fine with my form.

I have the following action creators: submitCreatePlan, submitCreatePlanFulfilled and one for the error management.

I am wondering how I could trigger and where is the best place to place it if I want to navigate away from the current page if the submission was successful.

What do you think?

Thanks a lot in advance

callmiy commented 7 years ago

@istvano I'm guessing you have a way of notifying your redux store that your submission was successful, for example by having a flag such as isAuthenticated or something of that nature which is set to true. Then in your render function (if using class based component), you can simply:

import { Redirect } from 'react-router-dom';
.
.
.
render(){
  const {isAuthenticated} = this.props;
  if (isAuthenticated) {
    return <Redirect to='/url' />;
  }
}

You can adapt same logic if using a functional component.

DJTB commented 7 years ago

Alternatively, if you don't want to rely on a re-render via state/props and you're using async middleware (redux-thunk, redux-saga, redux-logic etc) you can import { push } from 'react-router-redux' and dispatch that in your success logic.

dispatch(setAuthenticated(token)) // or whatever
dispatch(push('/home')); // navigate to some route

https://github.com/ReactTraining/react-router/tree/master/packages/react-router-redux