redux - 在 forkJoin 期间，我如何为每个请求分派(dispatch)一个 Action 以及它们何时全部完成？

Question

我在 Angular 项目中使用 ngrx。在这个例子中，我有一个请求数组。我想在每个请求之后以及在所有请求完成之后发送一个 Action 。

到目前为止，我有这样的东西:

Observable.forkJoin(requests).pipe(
  map(() => new actions.requestsSuccessful()),
  catchError(() => of(new actions.requestsFailed()))
);

其中 requests 是一个 Observables 数组。

上面的代码工作正常，当所有请求完成后，我的 requestsSuccessful() 操作被正确调度。

但是，我正在实现一个进度条，我想在发出每个 请求后对其进行更新，但我也希望在所有 处保持操作的调度> 已提出请求。

我不知道如何在每个请求后分派(dispatch)一个 Action ，同时在一切完成后保持该 Action 。

有什么想法吗？

Answer 1

forkJoin 仅在所有 Observable 完成时发出，因此它在这里没有用。相反，您可以使用 concatAll 和 concat。

如果我理解正确的话，这是模拟你想要什么的模型示例。

const makeRequest = (v) => of(v)
  .pipe(
    delay(1000), // Simulate delay
    map(response => ({ action: 'WHATEVER', response })), // Map response into action
  );

const requests = [makeRequest(1), makeRequest(2), makeRequest(3)];

from(requests)
  .pipe(
    concatAll(), // Execute Observables in order one at the time
    concat(of({ action: 'ALL_DONE' })), // Append this when all source Observables complete
  )
  .subscribe(console.log);

查看现场演示(打开控制台):https://stackblitz.com/edit/rxjs6-demo-zyhuag?file=index.ts

此演示将打印以下输出:

{action: "WHATEVER", response: 1}
{action: "WHATEVER", response: 2}
{action: "WHATEVER", response: 3}
{action: "ALL_DONE"}

顺便说一句，在未来的 RxJS 版本中，您可以使用 endWith 运算符来代替 concat ，从而使其更具可读性。 https://github.com/ReactiveX/rxjs/pull/3679