Question

我正在使用redux-effects-fetch，redux-effect-bind

＆＃13;

//my-container.ts
import {NgRedux} from 'ng2-redux';
export class MyContainer {

  private ngReduxL: any;

  constructor(ngRedux: NgRedux<any>) {
    ngRedux.provideStore(store);
    this.ngReduxL = ngRedux;
  }

mySearchMethod() {
 this.ngReduxL.dispatch(Actions.getList(searchParams));
}
}

//Action.ts
export getList(searchParams){
  return [
    showSpinnerAction('spinnerName'),
    bind(
    effectFetch(
    convertoSearchUrl,
    {method: 'GET'.....}
    ), (response) => {
     return [{
     type: 'SET_SEARCH_LIST_DATA',
     paylaod: response
     }]
    })
  ]
}

＆＃13;

每当输入值发生变化时，就会调度getList操作，如上面的代码所示。当用户点击重置时，请求花费的时间太长，之后用户输入一些搜索参数，该参数小于上一个请求。

REQ1 ===>>> REQ2 ===>>> REQ3 ===>>>

但是当响应回来时，它可以是任何顺序，如

REQ3 ===>>> REQ1 ===>>> REQ2 ===>>>

最终我的列表被最后一次回复的电话覆盖了。我如何防止，以便我总是有最后一个请求的数据，如REQ3 和其他2应该被忽略。

REQ3 ===>>> success REQ1, REQ2 ===>>> cancelled/ignored

我知道rxjs很容易在这里做switchMap这样的事情。提前致谢。如果需要更多细节，请告诉我。

Answer 1

根据我的经验，你的救世主将是redux sagas，特别是takeLatest helper：docs

基本上，除了解决这个问题之外，你还可以使用精彩的等待率模式，将异步内容变成最简单的东西。

在缺点方面，它在ng2-redux中看到，这可能需要一些设置：github issue

假设您使用的是angular2 +，RxJS可能比redux更容易。 Docs for throttle，这是你需要的。

您提到问题与用户调度其他请求有关...考虑添加＆＃39; isLoading＆＃39;项目到您的状态，并禁用搜索或显示加载屏幕，而这是真的。想想看，这可能是最快的解决方案:)。

希望有所帮助！

如何使用redux处理竞争条件

1 个答案: