如何使用 redux 处理竞争条件答案

【问题标题】：how to handle with race condition with redux如何使用 redux 处理竞争条件
【发布时间】：2018-06-16 04:06:49
【问题描述】：

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

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

只要输入值发生更改，它就会调度 getList 操作，如您在上面的代码中所见。当用户点击重置时，请求花费的时间太长，并且在该用户输入了一些搜索参数之后，该参数花费的时间少于之前的请求。

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

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

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

最终我的列表被最后一次返回的调用覆盖。我怎样才能防止这样我总是有像 REQ3 这样的最后一个请求的数据其他 2 个应忽略。

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

我知道使用 rxjs 很容易在这里执行 switchMap 之类的操作。提前致谢。如果需要更多详细信息，请告诉我。

【问题讨论】：

派送不派送

标签： javascript typescript redux

【解决方案1】：

根据我的经验，你的救星将是 redux sagas，特别是 takeLatest 助手：docs

基本上，除了解决这个问题之外，您还可以使用美妙的 await yield 模式，它将异步的东西变成最简单的东西。

不利的一面是，它在 ng2-redux 中看到，这可能需要一些设置：github issue

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

您提到该问题与用户发送另一个请求有关...考虑在您的状态中添加一个“isLoading”项目，并在此情况下禁用搜索或显示加载屏幕。想想看，这可能是最快的解决方案:)

希望有帮助！

【讨论】：