动作创建者完成之前的路线更改答案

【问题标题】：Route change before action creator completes动作创建者完成之前的路线更改
【发布时间】：2017-09-14 17:00:48
【问题描述】：

在我的 react-redux 应用程序中，我有一个动作创建器，它进行 4 个服务器调用，前三个调用是异步的，然后最后一个等待第三个调用的响应。

假设有人在第 3 次响应到来之前更改了路线，则不会进行第 4 次调用。如何确保不会发生这种情况？

在 actioncreator 完成工作之前，我不应该允许更改路线（用户不会喜欢这样）。或者，即使路线改变，我也应该允许第四次呼叫发生，从用户的角度来看，这似乎是一个合理的解决方案。我不知道如何编写任何解决方案，请提出意见。

注意：可以从顶部的导航栏更改路线。

【问题讨论】：

您是否使用任何库（如 thunk/saga 等）进行服务器调用？如果没有，我建议您看一下 redux saga，因为它可以简化异步调用，并且可以使用 saga 效果轻松解决您的情况。（虽然最初的学习曲线会有点困难）。
我已经用过saga，但不知道saga的效果。
我不确定我是否正确理解了您的问题。您想知道并行执行 3 个调用和第 4 个调用以等待第 3 个调用完成的代码吗？或者您想知道如何在通话进行时阻止您的用户更改路由？（这可以通过在您的 api 调用运行时向用户显示进度对话框来轻松防止）
我想知道如何在通话进行时阻止用户更改路由
function doSomething { dispatch(A()); dispatch(B()); dispatch(C()); dispatch(D()); }

标签： javascript ajax reactjs redux react-router

【解决方案1】：

方法一——

如果您想在 API 调用运行时向用户显示不可关闭的覆盖，您可以这样做 -

//You can pass a prop like isShown to toggle the visibility, Here Modal component is used from **react-bootstrap** library
//backdrop and keyboard false prop means it's non dismissible
<Modal className="loader" show={this.props.isShown} backdrop={false} keyboard={false}>
    <Modal.Body className="text-center">
      <div><img className="loader-image" src="https://d1ykm90fp7q29d.cloudfront.net/assets/images/misc/loader.gif"/>
      </div>
      <br/>
      <h2> Loader text </h2>
    </Modal.Body>
</Modal>

您可以像上面一样创建一个单独的 Modal 组件并将其导入您想要使用的地方。可见性可以通过您的 api 调用中可访问的任何状态变量来切换。

方法二—— 理想情况下，即使您的路线发生变化，它也不应该影响您的动作和动作创建者，并且您的异步 api 调用应该按原样运行。您可能没有正确实现 api 调用。你可以像这样使用 redux saga -

伪代码：

//Main saga
function* mainSaga(params){
  const [result1, result2, result3]  = yield all([
    call(apiCall1, params1), //function apiCall1 should call your Api1 
    call(apiCall2, params2),
    call(apiCall3And4, params3And4) //apiCall3And4 is another saga which is implemented below
  ])
}

//apiCall3And4 saga
function* apiCall3And4(params){
  const call3result = yield call(apiCall3, params3);
  if(call3Result != null){
    //call api 4
    yield call(apiCall4, params4);
  }
}

【讨论】：

我会检查这个传奇的解决方案。
好的。这里的“call”和“all”是传奇效果。您可以在官方文档中阅读更多关于它们的信息。

【解决方案2】：

您可以选择以下之一：

React Router (v4) 支持preventing transitions
默认情况下，完整的客户端 React App 将进行后台计算（称为应用程序状态）。

您也可以使用server-side rendering 从 API 中预取数据。

【讨论】：

React Router (v4) 支持阻止转换，它只会阻止不强制执行。
完整的客户端 React App 默认会做后台计算（称为应用状态）。我不知道你这是什么意思。
当你在路由之间切换时（使用 React Router）你仍然有持久化存储。这意味着，React Router 只是在导航中更改渲染的 DOM 和路径，而不是刷新整个应用程序。因此，如果您触发 Ajax 调用，它将在后台获取，直到访客刷新您的应用程序。
我检查了这个，但这并没有发生。如果第 4 次通话尚未开始，正在等待 3d 完成，而我更改了路线，则第 4 次通话未进行。