使用 React-Router 和 Redux 时如何在单击 Link 时分派操作？

Question

假设我有一个 Link 将我发送到 adding/editing 列表条目的页面。

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

例如：我单击“编辑”按钮 -> 操作已发送 -> 商店已更新，{'state': 'edit-mode'} -> 继续重定向。

或者您有其他方法来完成我想要做的事情吗？

也许当组件挂载后，我会运行根据特定条件执行类似stateToEdit的操作？如果是这样，那么请告诉我你的方式。谢谢

PS：我只为所有 add/edit/delete 使用一个组件。所以我正在考虑一种基于 state 渲染的方法，无论它是在 edit-mode 还是 delete-mode 等

Answer 1

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

尝试使用 browserHistory.push(path) 和 onClick 函数，而不是使用 Link。
- 在onClick里面，你可以dispatch你的动作，然后push到一个新的位置。
- 但是，如果要在各个组件中执行这一系列操作，您可能会遇到代码重复问题。
解决这个问题的更稳健的方法是实现 redux-thunk，它提供了一种执行多个 "actions" 的通用方法（无论是调用 Redux 操作，还是执行异步操作，或两者！）以响应变化。
- Dan 在这里做出了很好的回应，强调了 redux-thunk 实际提供的简单性：
- 在您的例子中，在 incrementTwice 函数中，假设只是将 dispatch(increment) 调用之一替换为对 browserHistory.push(action.path) 的调用，类似于以下内容：

Redux thunk 操作

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

使用 React-Router 和 Redux 时如何在单击 Link 时分派操作？

How to dispatch an action when clicking on Link when using React-Router & Redux?

javascript

reactjs

react-router

redux

react-redux