react-router-redux push 与 redux-batched-actions 不兼容？答案

【问题标题】：react-router-redux push not compatible with redux-batched-actions?react-router-redux push 与 redux-batched-actions 不兼容？
【发布时间】：2017-07-12 02:59:06
【问题描述】：

我正在构建一个 react&redux 应用程序，但遇到以下问题：在我的一个组件中，我想以编程方式导航到另一个页面，并显示一个模式。

我发现在两个操作中执行此操作在我的应用程序中效果不佳，因为状态被更新了两次（导致我的模态渲染两次，从而导致它消失）。

所以我尝试使用 redux-batched-actions 更新状态一次，通过调用具有两个函数（“push”和“openModal”类型的操作）的 batchActions。但由于某种原因，在 batchActions 中调用“push”不起作用。示例：

import { push } from 'react-router-redux';
import { batchActions } from 'redux-batched-actions'; 

myFunction: function() {
  this.props.newPath("/mypath");
}

const mapDispatchToProps = (dispatch) => {
    return {
        newPath: (path) => dispatch(batchActions([push(path)])),
    }
}

单独调度推送操作可以正常工作，如下所示：

newPath: (path) => dispatch(push(path))

而且，在 batchAction 中调度模态动作是可行的：

newPath: (path) => dispatch(batchActions([displayModal("title", "message"]))

因此，由于某种原因，batchActions 似乎无法识别“推送”操作，我不知道为什么。

谁能明白为什么batchActions 不能正确处理“推送”操作？

问候

【问题讨论】：

标签： reactjs react-redux react-router-redux redux-batched-actions

【解决方案1】：

react-router-redux push 操作由routerMiddleware 处理。 routerMiddleware 仅根据路由器的类型查找特定于路由器的操作。另一方面，redux-batched-actions 将两个或多个动作包装在一个复合动作中，并带有一个特殊的 redux-batched-actions 类型。因此routerMiddleware 在通过中间件并且没有发生路由更改时，不会将此操作标识为路由器操作。

https://github.com/ReactTraining/react-router/issues/5227 中有一个问题描述问题。

解决方案：

您可以将另一个包与 react-redux-router 一起用于批处理操作：react-batch-enhancer。它适用于中间件级别，因此底层批处理操作将由相应的中间件处理。

【讨论】：