javascript - Action 创建者完成之前路线更改

Question

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

假设有人在第三次响应到来之前更改了路线，则不会进行第四次调用。我怎样才能确保这种情况不会发生？

要么在actioncreator完成其工作之前我不应该允许路由更改(用户不会喜欢这样)。或者，即使路线发生更改，我也应该允许进行第四次调用，从用户的 Angular 来看，这看起来是一个合理的解决方案。我不知道如何编写任何解决方案，请发表意见。

注意:可以通过顶部的导航栏更改路线。

Answer 1

方法 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 调用中可访问的任何状态变量进行切换。

方法 2 -理想情况下，即使您的路线发生变化，它也不应该影响您的操作和操作创建者，并且您的异步 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);
  }
}