NgRX 下载媒体文件和调度进度的效果直到完成动作被调度

Question

我正在我的 Podcast 项目中学习 NGRX 和 RXJS。

我当前的问题是：如何根据我的下载操作在@effect 中调用进度操作。

效果如下所示并且有效：

@Effect()
downloadEpisodes$ = this.actions$.ofType( episodeActions.DOWNLOAD_EPISODE )
.pipe(
  map( ( action: episodeActions.DownloadEpisodes ) => action.payload ),
  switchMap( ( episode ) => {
    return this.episodesService
      .download( episode ) // -> download the media file as blobl
      .pipe(
          map( event => this.episodesService.getHttpProgress( event ) ), // => report download progress
          tap( message => {
            console.log( message );

          } ),
          // switchMap( response => new episodeActions.DownloadProgressEpisodes( response ) // => doesn't work cause its not iterable accoring to typescript.
          last(), // => emit last (completed) message to caller
          switchMap( response => {
            return this.episodesService.downloadSuccess( response ) // => process response blob
            .pipe(
              tap( response  => console.log('--->', response )),
              map( response => new episodeActions.DownloadEpisodesSuccess( response ) ),
              catchError( error => of (new episodeActions.DownloadEpisodesFail( error ) ) )
            )
          })
      )
  } )
);

这将在我的控制台中报告以下内容：

Downloading file
episodes.effect.ts:57 File is 7% downloaded.
episodes.effect.ts:57 File is 11% downloaded.
episodes.effect.ts:57 File is 15% downloaded.
episodes.effect.ts:57 File is 18% downloaded.
episodes.effect.ts:57 File is 26% downloaded.
episodes.effect.ts:57 File is 30% downloaded.
episodes.effect.ts:57 File is 44% downloaded.
episodes.effect.ts:57 File is 48% downloaded.
episodes.effect.ts:57 File is 70% downloaded.
episodes.effect.ts:57 File is 74% downloaded.
episodes.effect.ts:57 File is 100% downloaded.
episodes.effect.ts:57 HttpResponse {headers: HttpHeaders, status: 200,             statusText: "OK", url: "http://localhost:3000/episodes/https%3A%2F%2Fwww.s…ple-videos.com%2Faudio%2Fmp3%2Fcrowd-cheering.mp3", ok: true, …}

我想改变什么？

那么，tap message下getHttpProgress直到上载完成函数被调用多次。然后last()呼叫将 转发httpResponse到下一个switchMap。

我想要实现的是new episodeActions.DownloadProgressEpisodes( message )在下载进度（多次）期间分派一个动作来存储剧集内的下载进度（调用减速器更新剧集实体）。

不幸的是，我不明白如何DownloadProgressEpisodes在download不中断或switchMap调用this.episodesService.downloadSuccess( response ). 我试图在 之后添加一个动作调用tap，在last调用之前，因为它似乎是一个Iterator. 但是，它没有调度这些操作，我的 redux devTool 中没有显示任何内容。当我DownloadProgressEpisode在getHttpProgress通话中从我的服务中发送它时，它可以工作，但我不确定这是否是正确的方法。

最后，我想在我的 redux devTool 中看到以下内容：

[Podcast] Download Episode;
[Podcast] Download Episode Progress; // payload 0%
[Podcast] Download Episode Progress; // payload 10%
...etc
[Podcast] Download Episode Progress; // payload 100%
[Podcast] Download Episode Success;

解决这个问题的最佳方法是什么？

或者，我是否应该为下载使用不同的效果，这会为 DownloadProgress 调用一个效果，该效果会重复自己直到完成，然后为 DownloadSuccess 调用和效果？

Answer 1

我会将这个效果分成几个较小的效果。现在，您正在做几件具有相同效果的事情：下载、更新进度并处理结果。您可以尝试为每个效果创建一个效果。

下载剧集：

@Effect()
downloadEpisode$ = this.actions$.pipe(
  ofType(episodeActions.DOWNLOAD_EPISODE),
  switchMap(({ payload }) => this.episodesService
      .download(payload).pipe(
         map(response => new episodeActions.DownloadEpisodesSuccess(response)),
         catchError(err => of(new episodeActions.DownloadEpisodesFail(error))),
      )
  )
)

捕获下载成功操作并处理它：

@Effect()
processEpisode$ = this.actions$.pipe(
  ofType(episodeActions.DOWNLOAD_EPISODE_SUCESS),
  switchMap(({ payload }) => this.episodesService
      .downloadSuccess(payload).pipe(
         map(response => new episodeActions.ProcessEpisodesSuccess(response)),
         catchError(err => of(new episodeActions.ProcessEpisodesFail(error))),
      )
  )
)

关于显示/更新进度：

@Effect()
updateProgress$ = this.actions$.pipe(
  ofType(episodeActions.DOWNLOAD_EPISODE),
  switchMap(({ payload }) => this.episodesService
      .getHttpProgress(payload).pipe(
         map(res => new episodeActions.DownloadEpisodesProgress(res)),
      )
  )
)

这种显示进度的方式假设每次下载新剧集时getHttpProgress方法都会返回一个新的可观察值。我们列出了通知下载已开始的操作，然后将映射切换到 getHttpProgress 的输出。