[英]How to dispatch an action when clicking on Link when using React-Router & Redux?
Let's say I have a Link
that sends me to a page for adding/editing a list entry. 假设我有一个
Link
,它将我发送到一个页面,用于添加/编辑列表条目。
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. 当我单击
Link
本身时,如何调度Redux操作,以便在实际重定向到该页面之前,我可以先更新Redux存储。
Eg: I click on Edit button -> Action is dispatched -> Store updated, {'state': 'edit-mode'}
-> Proceed to redirect. 例如:我点击编辑按钮 - >调度操作 - >存储更新,
{'state': 'edit-mode'}
- >继续重定向。
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? 也许当组件已经安装时,我会根据某些条件运行
stateToEdit
类的操作? If so, then please show to me your way. 如果是的话,那么请向我展示你的方式。 Thanks
谢谢
PS: I'm using only one component for all add/edit/delete. PS:我只使用一个组件进行所有添加/编辑/删除。 So I'm thinking of a way to render based on the
state
whether its on edit-mode
or delete-mode
etc. 所以我正在考虑一种基于
state
进行渲染的方法,无论是edit-mode
还是delete-mode
等。
Here are a couple ways you could go about addressing this issue: 您可以通过以下几种方式解决此问题:
Link
, try utilizing browserHistory.push(path)
with an onClick
function. Link
,尝试使用带有onClick
函数的browserHistory.push(path)
。
onClick
, you can dispatch
your action, then push
to a new location. onClick
,您可以dispatch
您的操作,然后push
送到新位置。 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
,它提供执行多个“操作”的通用方法(无论是调用Redux操作,还是执行异步操作,或两者兼而有之!)以响应更改。
redux-thunk
actually offers: Can I dispatch multiple actions without Redux Thunk middleware? redux-thunk
实际提供的简单性: 我可以在没有Redux Thunk中间件的情况下调度多个动作吗? incrementTwice
function, imagine just replacing one of the dispatch(increment)
calls with a call to browserHistory.push(action.path)
, similar to the below: incrementTwice
函数中,假设只是通过调用browserHistory.push(action.path)
替换其中一个dispatch(increment)
调用,类似于以下内容: Redux thunk action Redux thunk行动
export const dispatchThenRoute = (myAction, myPath) => {
return (dispatch) => {
dispatch(myAction)
browserHistory.push(myPath);
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.