title: NgRX Effect for downloading media file and dispatching progress Actions until Finish action is dispatched
body: <p>I am learning NGRX and RXJS in my Podcast project.</p>
  
  <p>My current question is: how to call progress Actions within my @effect based on my Download Action.</p>
  
  <p>The effect looks like this and works:</p>
  
  <pre><code>@Effect()
  downloadEpisodes$ = this.actions$.ofType( episodeActions.DOWNLOAD_EPISODE )
  .pipe(
    map( ( action: episodeActions.DownloadEpisodes ) =&gt; action.payload ),
    switchMap( ( episode ) =&gt; {
      return this.episodesService
        .download( episode ) // -&gt; download the media file as blobl
        .pipe(
            map( event =&gt; this.episodesService.getHttpProgress( event ) ), // =&gt; report download progress
            tap( message =&gt; {
              console.log( message );
  
            } ),
            // switchMap( response =&gt; new episodeActions.DownloadProgressEpisodes( response ) // =&gt; doesn't work cause its not iterable accoring to typescript.
            last(), // =&gt; emit last (completed) message to caller
            switchMap( response =&gt; {
              return this.episodesService.downloadSuccess( response ) // =&gt; process response blob
              .pipe(
                tap( response  =&gt; console.log('---&gt;', response )),
                map( response =&gt; new episodeActions.DownloadEpisodesSuccess( response ) ),
                catchError( error =&gt; of (new episodeActions.DownloadEpisodesFail( error ) ) )
              )
            })
        )
    } )
  );
  </code></pre>
  
  <p>This will report the following in my console:</p>
  
  <pre><code>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, …}
  </code></pre>
  
  <p><strong>What do I want to change?</strong></p>
  
  <p>Well, the <code>tap message</code> under the <code>getHttpProgress</code> function is called as many times until the upload is done. Then the <code>last()</code> call forwards the <code>httpResponse</code> to the next <code>switchMap</code>.</p>
  
  <p>What I would like to achieve is to dispatch an action <code>new episodeActions.DownloadProgressEpisodes( message )</code> during the Download progress (multiple times) to store the download progress within the episode (call the reducer to update the episode entity).</p>
  
  <p>Unfortunately, I don't understand how to dispatch multiple <code>DownloadProgressEpisodes</code> actions during the <code>download</code> process without breaking or the last <code>switchMap</code> that calls the <code>this.episodesService.downloadSuccess( response )</code>. 
  I tried to add a action call after the <code>tap</code>, before the <code>last</code> call as it seemed to be an <code>Iterator</code>. However, it didn't dispatch those actions, nothing showed up in my redux devTool. 
  When I dispatch the <code>DownloadProgressEpisode</code> from my service within the <code>getHttpProgress</code> call, It works but I am not sure if that is the proper way.</p>
  
  <p>In the end I want to see the following in my redux devTool:</p>
  
  <pre><code>[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;
  </code></pre>
  
  <p>What is the best way to solve this?</p>
  
  <p>Or alternatively, should I use different effects for the Download, which calls an effect for the DownloadProgress which repeats itself until finished and then call and effect for DownloadSuccess?</p>