Transition to another route on successful async redux action

Question

I have a pretty simple set of react components:

• container that hooks into redux and handles the actions, store subscriptions, etc
• list which displays a list of my items
• new which is a form to add a new item to the list

I have some react-router routes as follows:

<Route name='products' path='products' handler={ProductsContainer}>   <Route name='productNew' path='new' handler={ProductNew} />   <DefaultRoute handler={ProductsList} /> </Route> 

so that either the list or the form are shown but not both.

What I'd like to do is to have the application re-route back to the list once a new item has been successfully added.

My solution so far is to have a .then() after the async dispatch:

dispatch(actions.addProduct(product)   .then(this.transitionTo('products')) ) 

Is this the correct way to do this or should I fire another action somehow to trigger the route change?

Answer 1

If you don't want to use a more complete solution like Redux Router, you can use Redux History Transitions which lets you write code like this:

export function login() {   return {     type: LOGGED_IN,     payload: {       userId: 123     }     meta: {       transition: (state, action) => ({         path: `/logged-in/${action.payload.userId}`,         query: {           some: 'queryParam'         },         state: {           some: 'state'         }       })     }   }; } 

This is similar to what you suggested but a tiny bit more sophisticated. It still uses the same history library under the hood so it's compatible with React Router.