Redux form navigate on submit successfully - reactjs

Question

I'm struggling to understand where is the best practice to handle success submit and navigate to the next page.
I'm working on a login form:
class LogInComponent extends Component {
render() {
const {dispatch} = this.props;
const {loginError, handleSubmit, pristine, reset, submitting} = this.props;
return (
<form onSubmit={handleSubmit((values) => dispatch(login(values))) }>
<Field name="username" type="text" component={renderField} label="Username" />
<Field name="password" type="password" component={renderField} label="Password" />
{loginError && <strong>{loginError}</strong>}
<div>
<button type="submit" disabled={submitting}>Log In</button>
<button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button>
</div>
</form>
)
}
And the action:
export function login(values) {
const email = values.username;
const password = values.password;
return dispatch => {
dispatch(loginSubmit());
firebaseAuth.signInWithEmailAndPassword(email, password).then(function(user) {
dispatch(signInSuccess(user));
}).catch(function(error) {
dispatch(signInError(error));
});
};
}
export function loginSubmit() {
return {
type: SIGN_IN_SUBMIT
};
}
export function signInError(error) {
return {
type: SIGN_IN_ERROR,
payload: error.message
};
}
export function signInSuccess(user) {
return {
type: SIGN_IN_SUCCESS,
payload: user
};
}
If the response was successful, I would like to navigate to the next page. But where should the navigation be? not from the reducer or action, so only from component, but the action does not return response by design..
Am I missing something?

Answer 1

Create a composing function to couple your login code and navigation logic, and dispatch that function on form submit.
Modify the actions file as below:
import { browserHistory } from './react-router';
// no export needed, this is a #private function
function login(values) {
const email = values.username;
const password = values.password;
return dispatch => {
dispatch(loginSubmit());
return firebaseAuth.signInWithEmailAndPassword(email, password)
.then((user) => dispatch(signInSuccess(user)))
.catch((error) => dispatch(signInError(error)));
};
}
export function loginAndRedirect(loginParams) {
return dispatch => dispatch(login(loginParams))
.then(() => browserHistory.push('/success/path'))
.catch(() => browserHistory.push('/failure/path'));
}
// ... other actions
Now in our component we will do this:
<form onSubmit={handleSubmit((values) => dispatch(loginAndRedirect(values))) }>