Changing routes after successfully saga

user_1767945 0
Viewed 3691

I'm trying to figure out what the proper way to go about this is.

Lets say we have a store of items. These items can be edited, deleted and created. When editing or adding an item the route changes to /item/add or /item/edit/{id}.

After an item has been added or edited successfully by saga we want to send them back to the base route. What's the proper way to go about this?

I've seen two ways, one where you inject a history object into a and then include the history object in the saga's as well. Another to keep a "status" ("", "failed", "success") in the item store using in the components and resetting that status when the component unmounts since add and edit both need to use the status.

Which is the proper way to go about this problem though?

redux-saga react-router-v4 redux reactjs
3 Answers

There's no proper way, just whatever works with you. I prefer the minimal:

//history.js
...
export const history = createHistory();


//Root.js
import { history } from './history';
<Root history={history}>

//mySaga.js
import { history } from './history';
function *mySaga() {
    yield call(history.push, '/myRoute');
}
user_5568230

Check this doc: https://reacttraining.com/react-router/core/guides/redux-integration

According to this doc, the best solution is to include the history object (provided to all route components) in the payload of the action, and your async handler can use this to navigate when appropriate.

If you have history object from the payload to the action, you can use

history.push('requiredRoute');

to requiredRoute.

user_73388450
Related