Question

我正在构建一个react＆amp; 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)])),
    }
}

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

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

然后，在batchAction中调度模态操作：

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

所以似乎batchActions由于某种原因无法识别“推送”动作，我无法弄清楚原因。

任何人都可以看到为什么batchActions无法正确处理“推送”操作？

此致

Answer 1

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

https://github.com/ReactTraining/react-router/issues/5227中存在描述问题的问题。

<强>解决方案：

您可以使用另一个程序包与function koku_crm_send_sendgrid($sendgrid_api_key, $to, $subject, $text, $html) { $sendgrid = new \SendGrid($sendgrid_api_key); $mail = new KCSendGrid\Mail(); $from = new KCSendGrid\Email(get_bloginfo( 'name' ), get_bloginfo( 'admin_email' )); $mail->setFrom($from); $mail->setSubject(html_entity_decode($subject, ENT_QUOTES, 'UTF-8')); $content = new KCSendGrid\Content("text/plain", $text); $mail->addContent($content); $content = new KCSendGrid\Content("text/html", $html); $mail->addContent($content); $personalization = new KCSendGrid\Personalization(); $to = new KCSendGrid\Email(null, $to); $personalization->addTo($to); $mail->addPersonalization($personalization); $sendgrid->client->mail()->send()->post($mail); }进行批处理操作：react-batch-enhancer。它适用于中间件级别，因此底层批处理操作将由相应的中间件处理。

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

1 个答案: