How to perform multiple related operations/effects/actions with ngrx/effects
<p>I am working on an application that is using ngrx/store 1.5 along with thunk middleware and I am attempting to move to ngrx/store 2.0 and ngrx/effects.  I have a couple questions with regards to how to handle multiple related actions and/or effects.</p>

<p>I realize that the "mindset" for thunks vs effects is different and I'm trying to get my head around the differences.  I have looked through the available example apps, and haven't found anything that seems to fit what I'm attempting, so perhaps I'm still approaching it completely wrong.</p>

<p><strong>Scenario 1</strong></p>

<p>Here is a side-effect to handle making the request to the server for a login:</p>

<pre><code>@Effect login$: any = this.updates$
    .whenAction(LoginActions.LOGIN)
    .map(toPayload)
    .switchMap(payload =&gt; 
        this.loginService.login(payload.user, payload.password)
            .map(result =&gt; this.actions.loginSuccess(value))
            .catch((error) =&gt; Observable.of(this.loginError(error)))
));
</code></pre>

<p>Given that initial side-effect, what would be the "correct" or "suggested" way to trigger navigation to a "home" screen upon successful login?  This could also be generalized to simply triggering a sequence of actions or operations.</p>

<p>A few options I have considered:</p>

<p>(a) Another effect triggered by login success, that fires a subsequent action to trigger navigation?</p>

<pre><code>@Effect navigateHome$: any = this.updates$
    .whenAction(LoginActions.LOGIN_SUCCEEDED)
    .mapTo(this.actions.navigateHome());
</code></pre>

<p>(b) Another effect triggered by login success, that simply performs the navigation operation? </p>

<pre><code>@Effect navigateHome$: any = this.updates$
    .whenAction(LoginActions.LOGIN_SUCCEEDED)
    .do(this.navigateHome())
    .filter(() =&gt; false);
</code></pre>

<p>(c) Concatenating an additional action to those emitted by the initial login effect? (sample obviously not quite correct, but gives the idea)</p>

<pre><code>@Effect login$: any = this.updates$
    .whenAction(LoginActions.LOGIN)
    .map(toPayload)
    .switchMap(password =&gt; Observable.concat(
        this.loginService.login(passcode)
            .map(result =&gt; this.actions.loginSuccess(value))
            .catch((error) =&gt; Observable.of(this.loginError(error))),
        Observable.of(this.actions.navigateHome())
    ));
</code></pre>

<p>(d) Other?</p>

<p><strong>Scenario 2</strong></p>

<p>Consider a case where a number of requests need to be made in sequence, and as each request begins we want to update the "status" so that feedback can be provided to the user.</p>

<p>Example of a thunk for something along those lines:</p>

<pre><code>multiphaseAction() {
    return (dispatch) =&gt; {
        dispatch(this.actions.updateStatus('Executing phase 1');
        this.request1()
            .flatMap(result =&gt; {
                dispatch(this.actions.updateStatus('Executing phase 2');
                return this.request2();
            })
            .flatMap(result =&gt; {
                dispatch(this.actions.updateStatus('Executing phase 3');
                return this.request3();
            })
            ...
    }
}
</code></pre>

<p>Again, what would be the "correct" or "suggested" way to go about this in using the effects approach? </p>

<p>This one I'm more stuck on, not really sure what could be done other than adding some <code>.do(this.store.dispatch(this.actions.updateStatus(...))</code> somehow...</p>