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

Question

假设我有一个Link ，它将我发送到一个页面，用于添加/编辑列表条目。

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

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

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

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

PS：我只使用一个组件进行所有添加/编辑/删除。 所以我正在考虑一种基于state进行渲染的方法，无论是edit-mode还是delete-mode等。

Answer 1

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

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

Redux thunk行动

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