in react-redux and redux-saga what's a proper method of transitioning to a new route after an async call succeeds?

Question

i'm using react, redux, and redux-saga, and react-router-redux. i'm looking for a 'right' way to transition to a new route after a successful async call.

for example, a user submits an order form and is redirected to a thanks page. behind the scenes, we

• current route is orders/new
• dispatch(submitOrder())
• submitOrder() saga runs, async network call
• api returns success, SUBMIT_ORDER_SUCCESS action is dispatched

at this point i want to transition to orders/:orderId/complete.

where/how is the right way to do this?

using OrderFormContainer.componentWillReceiveProps() hook is possible, checking a bool like nextProps.submitDidSucceed and then calling a transition action - but that's brittle and feels fundamentally wrong.

Answer 1

You can use push action creator inside your saga to navigate to a new location:

import { push } from 'react-router-redux';

 //... your saga code
 // api return success
 yield put(SUBMIT_ORDER_SUCCESS); // your existing action
 yield put(push('/orders/:orderId/complete')); //  use push to redirect to desired location