Change route on async action finish in React/Redux

Question

I'm using React, Redux and react-router. I have a button "Add member" that opens a "new member" form, using react-router.

In the "app container", I have this:

<Switch>
    //other stuff
    <Route exact path='/addmember' component={ NewMemberForm }/>
</Switch>

and the button:

<Button label='Add member' onClick={ _ => this.props.history.push('/addmember')} />

Form is opened properly. NewMemberForm component has two buttons: Add and Cancel. Cancel button, basically, does this.props.history.push('/') to go back to the home page.

When user clicks Add, form data is read and an async action is dispatched:

//add member using the api and set the generated ID
export const requestAddMember = member => dispatch => {
  return api.addMember(member)
    .then(memberId => dispatch(
      addMember(Object.assign(member, { id: memberId }))));
};

const addMember = member => {
  return { type: ADD_MEMBER, member };
};

I need to go back to the home page (this.props.history.push('/')), when ADD_MEMBER action is dispatched, i.e. when the new member is actually added.

When do I have to handle that action and call this.props.history.push('/')? Should it be in the async action creator before dispatch ADD_MEMBER?

//add member using the api and set the generated ID
export const requestAddMember = member => dispatch => {
  return api.addMember(member)
    .then(memberId => dispatch( // should it be here before this dispatching?
      addMember(Object.assign(member, { id: memberId }))));
};

You can put it in the `.then()`. At the end of the day your route might change before your reducer updates the state. But once the state updates your component should rerender with the updated sate, so it shouldn't really matter. If you're worried about routing before state is updated consider waiting to route until the value you expect has been added to state. — Galupuf, Mar 02 '18 at 16:55
Why not subscribe to members in `NewMemberForm`? When the new one's added, redirect home. — Alex, Mar 02 '18 at 16:59
@Héctor With `react-redux`, it's fairly straightforward; you can use the [`connect` function](https://stackoverflow.com/questions/36212860/subscribe-to-single-property-change-in-store-in-redux#36214059). — Alex, Mar 02 '18 at 17:11
Yes, but what am I supposed to do? Maybe in `mapStateToProps` check if new item is present and if so redirect home? How I know is it added? — Héctor, Mar 02 '18 at 18:55

score 1 · Accepted Answer · answered Mar 07 '18 at 08:10

I found a working solution.

history.js

import createHistory from 'history/createHashHistory'
export default createHistory()

and in the action creator:

actions.js

import history from './history';

...

//add member using the api and set the generated ID
export const requestAddMember = member => dispatch => {
  return api.addMember(member)
    .then(memberId => {
        history.push('/'); //this line
        dispatch(addMember(Object.assign(member, { id: memberId })))
    });
};

Change route on async action finish in React/Redux

1 Answers1