使用 React-Router 和 Redux 时单击链接时如何调度操作?
Posted
技术标签:
【中文标题】使用 React-Router 和 Redux 时单击链接时如何调度操作?【英文标题】:How to dispatch an action when clicking on Link when using React-Router & Redux? 【发布时间】:2016-11-17 14:38:44 【问题描述】:假设我有一个Link
,它将我发送到一个用于添加/编辑列表条目的页面。
当我点击 Link
本身时,如何调度 Redux 操作,以便在实际重定向到该页面之前先更新 Redux 存储。
例如:
我点击编辑按钮 -> 动作被调度 -> 存储更新,'state': 'edit-mode'
-> 继续重定向。
或者你有其他方法来完成我想要做的事情?
也许当组件挂载后,我会根据某些条件运行stateToEdit
之类的操作?如果是这样,那么请告诉我你的方式。谢谢
PS:我只使用一个组件来进行所有添加/编辑/删除。所以我正在考虑一种基于state
进行渲染的方法,无论是edit-mode
还是delete-mode
等。
【问题讨论】:
您可以使用browserHistory.push(path)
和 onClick
函数,而不是使用 Link
。在此函数中,调度您的操作,然后推送到新位置。
我也在考虑类似的事情,但我不太确定这是否是解决问题的正确方法。我想我现在会使用这种方法。如果还有其他方法,那么我想知道。谢谢
解决此问题的更合适的方法可能是引入redux-thunk
,考虑到您可能想要执行此“发送某些内容,然后移至另一个页面”,这可能有助于更多地组织代码在不同的地方采取行动。在这里看看 Dan 的回答,我相信它会让你了解如何在你的上下文中解决这个问题:***.com/questions/35493352/…
^ 就像这样,设想将其中一个 dispatch(increment)
调用替换为对 browserHistory
的调用
感谢您的回复和信息。你能把你的回复作为答案让我接受吗?
【参考方案1】:
您可以通过以下几种方式解决此问题:
-
不要使用
Link
,而是尝试使用browserHistory.push(path)
和onClick
函数。
在onClick
内,您可以dispatch
您的操作,然后push
到一个新位置。
但是,如果您想在各个组件中执行这一系列操作,您可能会遭受代码重复的困扰。
解决此问题的更可靠的方法是实现redux-thunk
,它提供了一种通用的方式来执行多个“操作”(无论是调用 Redux 操作,还是执行异步操作,或两者兼而有之!)作为响应改变。
Dan 在这里给出了很好的回应,强调了 redux-thunk
实际提供的简单性:Can I dispatch multiple actions without Redux Thunk middleware?
在您的情况下,在 incrementTwice
函数中,假设只需将其中一个 dispatch(increment)
调用替换为对 browserHistory.push(action.path)
的调用,类似于以下内容:
Redux thunk 动作
export const dispatchThenRoute = (myAction, myPath) =>
return (dispatch) =>
dispatch(myAction)
browserHistory.push(myPath);
;
【讨论】:
如果我们采用这种方法,链接预取将不起作用。我对么?或者如何让它发挥作用!react-router
v4 中没有browserHistory
:如果没有要推送的内容,如何处理调度和推送?
@Aerendir 您可以使用withRouter(App)
HOC 将组件连接到路由器。在此之后,App
现在可以访问props
中的location
和history
。像往常一样推动历史。示例export default withRouter(App);
通过github.com/mikechabot/react-boilerplate/blob/master/src/…
<Link to="mypath" onClick=this.props.dispatchAction.bind(this)>...
有什么问题?
@Sumit 你可以这样做,但如果你通过自己的onClick
推送到某个位置(请参阅github.com/ReactTraining/react-router/blob/master/packages/…),你会加倍路由。以上是关于使用 React-Router 和 Redux 时单击链接时如何调度操作?的主要内容,如果未能解决你的问题,请参考以下文章
使用 Redux-Router + React-Router 将基本 URL 添加到应用程序
在将 react-router 5 与 redux 7 一起使用时,react-router <Link> 在转到新路由后不会重置状态
(通用 React + redux + react-router)如何避免在初始浏览器加载时重新获取路由数据?
如何用 redux 和 react-router 组织状态?