1

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.

Adam Krawesky
  • 1,313
  • 11
  • 23

1 Answers1

2

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
Dario
  • 6,152
  • 9
  • 39
  • 50
  • i wasn't sure if it was appropriate to do routing from within a saga, but with more reading and using react-router-redux, i see the router as just another piece of application state. i'll also add an optional `redirect` prop to the action i pass to the saga, and use that in the `put(push())` – Adam Krawesky Mar 15 '18 at 13:48