使用 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 实际提供的简单性：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);
    }
};