Question

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

让我们说有人在3号响应来之前改变路线，第4个电话不会发出。我怎样才能确保不会发生这种情况？

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

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

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);
  }
}

Answer 2

您可以选择以下方法之一：

React Router（v4）支持preventing transitions
完整的客户端React App默认会进行后台计算（它被称为应用程序状态）。

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

在动作创建者完成之前路由更改

2 个答案: