如何在使用React-Router&Redux时单击链接时调度操作？

Question

假设我有一个Link向我发送添加/编辑列表条目的页面.

如何在单击Link自身时调度Redux操作,以便在实际重定向到该页面之前,我可以先更新Redux存储.

例如:我点击编辑按钮 - >调度操作 - >存储更新,{'state': 'edit-mode'}- >继续重定向.

或者你有另一种方法来完成我想要做的事情吗？

也许当组件已经安装时,我会stateToEdit根据某些条件运行一个动作？如果是的话,那么请向我展示你的方式.谢谢

PS:我只使用一个组件进行所有添加/编辑/删除.所以我想的方法基础上,以呈现state其是否对edit-mode或delete-mode等

Answer 1

您可以通过以下几种方式解决此问题:

1. 而不是使用Link,尽量使用browserHistory.push(path)与onClick功能.
   • 在里面onClick,您可以dispatch采取行动,然后push到新的位置.
   • 但是,如果要在各种组件中执行这一系列操作,则可能会遇到代码重复问题.
2. 解决此问题的更强大的方法是实现redux-thunk,它提供了执行多个"操作"的通用方法(无论是调用Redux操作,还是执行异步操作,或两者兼而有之!)以响应更改.
   • Dan在这里有一个很好的回应,突出了redux-thunk实际提供的简单性:我可以在没有Redux Thunk中间件的情况下调度多个动作吗？
   • 在你的情况下,在incrementTwice函数中,假设只是通过dispatch(increment)调用替换其中一个调用browserHistory.push(action.path),类似于以下内容:

Redux thunk行动

export const dispatchThenRoute = (myAction, myPath) => {
    return (dispatch) => {
        dispatch(myAction)
        browserHistory.push(myPath);
    }
};