Reroute on specific state of Redux store - reactjs

Question

I'm using React.js with Redux, React-Router and React-Router-Redux.
I would like to to manually reroute (or call an action) when the store reaches a specific state. How do I listen if the store has a specific state? Where do I reroute or call the action?

Answer 1

If these calls are made async then using an async action creator and the promise would handle this quite well.
// Action creator
function doTheStuff(someData, router) {
return dispatch => {
dispatch(somePendingAction());
return myRequestLib.post('/the-endpoint/', someData)
.then((response) => {
if (response.isTransactionDone) {
dispatch(transactionDoneAction(response));
router.transitionTo('/theUrl');
}
});
}
}
I wouldn't put this into the store since I believe the stores only job is to contain/handle the data.

Answer 2

To initiate a page change when a series of other actions have completed and been persisted to the store, dispatch the following redux-thunk. The key here is that you have a chain of thunks which return promises, and then once they all complete, you can update the router with another action.
In a component:
import React from 'react';
import { push } from 'react-router-redux';
import { connect } from 'react-redux';
import { doStuff, doMoreStuff } from './actions';
class SomeComponent extends React.Component {
...
onClick = e => {
const { doStuff, doMoreStuff, push } = this.props; // these are already wrapped by dispatch because we use connect
...
doStuff()
.then(r => doMoreStuff())
.then(r => push('/newPath')) // if actions succeeded, change route
.catch(e => console.warn('doStuff() or doMoreStuff failed'));
...
}
...
}
export default connect(null, { doStuff, doMoreStuff, push })(SomeComponent);
some actions in ./actions.js:
export function doStuff() {
return (dispatch, getState) => {
return API.getSomeInfo()
.then(info => dispatch({ type: 'GET_SOME_INFO', payload: info }))
}
}
export function doMoreStuff() {
return (dispatch, getState) => {
return API.getSomeMoreInfo()
.then(info => dispatch({ type: 'GET_SOME_MORE_INFO', payload: info }));
}
}
Alternatively, you could make a single promise that looks like this, where the redirect happens:
export function doAllStuff() {
return dispatch => {
return Promise.all(doStuff(), doAllStuff())
.then(results => dispatch(push('/newPath')))
.catch(e => console.warn('Not all actions were successful'))
}
}
the component code that intiates it would just be
onClick = e => {
...
doAllStuff(); // Since we caught the promise in the thunk, this will always resolve
...
}