Let's say I have a Link
that sends me to a page for adding/editing a list entry.
How do I dispatch a Redux action when I click on the Link
itself so that I can update the Redux store first, before actually getting redirected to that page.
Eg: I click on Edit button -> Action is dispatched -> Store updated, {'state': 'edit-mode'}
-> Proceed to redirect.
Or do you have another way in mind to accomplish what I'm trying to do?
Maybe when component has mounted, then I will run an action like stateToEdit
based on certain conditions? If so, then please show to me your way. Thanks
PS: I'm using only one component for all add/edit/delete. So I'm thinking of a way to render based on the state
whether its on edit-mode
or delete-mode
etc.
Here are a couple ways you could go about addressing this issue:
Link
, try utilizing browserHistory.push(path)
with an onClick
function.
onClick
, you can dispatch
your action, then push
to a new location. redux-thunk
, which provides a generic way of performing multiple "actions" (be it calling a Redux action, or performing an async operation, or both!) in response to a change.
redux-thunk
actually offers: Can I dispatch multiple actions without Redux Thunk middleware? incrementTwice
function, imagine just replacing one of the dispatch(increment)
calls with a call to browserHistory.push(action.path)
, similar to the below: Redux thunk action
export const dispatchThenRoute = (myAction, myPath) => {
return (dispatch) => {
dispatch(myAction)
browserHistory.push(myPath);
}
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.