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 )，以将下载进度存储在情节中（调用reducer更新情节实体）。

不幸的是，我不明白如何在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;

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

或者，我是否应该对Download使用不同的效果，该效果为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 方法每次下载新剧集时都会返回一个新的Observable。我们列出了通知下载已开始的操作，然后将map切换到getHttpProgress的输出。

NgRX效果，用于下载媒体文件和调度进度操作，直到调度完成操作为止

1 个答案: