动作创建者完成之前的路由更改 [英] Route change before action creator completes

问题描述

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

假设有人在第 3 个响应到来之前改变了路线，第 4 个呼叫将不会进行.我如何确保不会发生这种情况?

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

注意:可以从顶部的导航栏更改路线.

解决方案

方法 1 -

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

//你可以传递一个像isShown这样的prop来切换可见性，这里使用了**react-bootstrap**库中的Modal组件//背景和键盘假道具意味着它是不可关闭的<Modal className="loader" show={this.props.isShown} background={false} keyboard={false}><Modal.Body className="text-center"><div><img className="loader-image" src="https://d1ykm90fp7q29d.cloudfront.net/assets/images/misc/loader.gif"/>

<br/><h2>加载程序文本 </h2></Modal.Body></模态>

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

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

伪代码:

//主传奇功能* mainSaga(参数){const [result1, result2, result3] = yield all([call(apiCall1, params1),//函数 apiCall1 应该调用你的 Api1调用(apiCall2，params2)，call(apiCall3And4, params3And4)//apiCall3And4 是下面实现的另一个 saga])}//apiCall3And4 传奇函数* apiCall3And4(params){const call3result = yield call(apiCall3, params3);if(call3Result != null){//调用api 4屈服调用(apiCall4，params4)；}}

In my react-redux application, I have an action creator which makes 4 server calls, first three calls are made async and then last one waits on the response of 3rd call.

Lets us say someone changes the route before response of 3rd came, 4th call wont be made. How can I ensure this does not happen?

Either I should not allow route change until actioncreator has done its job (users won't like this). Or, I should allow 4th call to happen even if the route is changed, looks like a reasonable solution from users perspective. I don't know how to code any of the solution, please opine.

Note: Route change can happen from navigation bar on the top.

解决方案

Method 1 -

If you want to show a non dismissible overlay to the user while your API call is running, you can do so like this -

//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>

You can create a separate Modal component like above and import it where you want to use it. Visibility can be toggle by any state variable which is accessible in your api call.

Method 2 - Ideally, even if your route changes, it should not effect your action and action creators and your async api calls should run as it is. You may have not implemented the api calls properly. You can use redux saga like this -

Pseudo Code:

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

这篇关于动作创建者完成之前的路由更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！