title: ngrx Effects: Are actions dispatched by one effect processed immediately by other effects?
body: <p>I have an Angular (2) app with four ngrx actions:</p>
  
  <ul>
  <li>START
  
  <ul>
  <li>Not processed by the reducer (no state change)</li>
  <li>ngrx Effect calls an async task and maps to SUCCESS or ERROR</li>
  </ul></li>
  <li>SUCCESS
  
  <ul>
  <li>Processed by the reducer</li>
  <li>ngrx Effect maps to ADVANCE</li>
  </ul></li>
  <li>ADVANCE
  
  <ul>
  <li>Not processed by the reducer</li>
  <li>ngrx Effect navigates to a different route</li>
  </ul></li>
  <li>ERROR
  
  <ul>
  <li>Processed by the reducer</li>
  <li>No Effect</li>
  </ul></li>
  </ul>
  
  <p><strong>The problem is that the Effect that catches ADVANCE seems to run before the reducer that processes SUCCESS</strong></p>
  
  <p>Here's the Effects code:</p>
  
  <pre><code>@Effect() start$ = this.actions$
      .ofType('START')
      .map(toPayload)
      .switchMap(input =&gt; doAsyncTask(input)
          .map(result =&gt; ({type: 'SUCCESS', payload: result}))
          .catch(error =&gt; ({type: 'ERROR', payload: error})));
  
  @Effect() success$ = this.actions$
      .ofType('SUCCESS')
      .map(() =&gt; ({type: 'ADVANCE'}));
  
  @Effect({dispatch: false}) advance$ = this.actions$
      .ofType('ADVANCE')
      .withLatestFrom(this.store$.select(state =&gt; state.route))
      .map(action_route =&gt; action_route[1])
      .do(route =&gt; this.router.navigate([route.foo.bar]));
  </code></pre>
  
  <p>The error that I am getting is <code>Cannot read property 'bar' of null</code>. The property <code>foo</code> is set by the reducer that processes SUCCESS.</p>
  
  <p><strong>If I add a delay to the SUCCESS effect, it all works nicely:</strong></p>
  
  <pre><code>@Effect() success$ = this.actions$
      .ofType('SUCCESS')
      .delay(1)
      .map(() =&gt; ({type: 'ADVANCE'}));
  </code></pre>
  
  <p>But having to add this delay doesn't make sense to me.</p>
  
  <p>I added <code>console.log</code> statements everywhere and the output looks like this:</p>
  
  <ol>
  <li>SUCCESS effect</li>
  <li>ADVANCE effect (showing route.foo === null)</li>
  <li>SUCCESS reducer (showing route.foo === something)</li>
  <li>Error</li>
  </ol>
  
  <p>I expected the SUCCESS effect and the SUCCESS reducer to run before the ADVANCE effect.</p>
  
  <p><strong>Am I doing something wrong?</strong></p>
  
  <p><strong>Is it incorrect to expect that actions are processed by the reducers in the same order that they are dispatched?</strong></p>
  
  <hr>
  
  <p>Versions:</p>
  
  <ul>
  <li>@angular/cli: 1.0.0-beta.32.3</li>
  <li>node: 7.5.0</li>
  <li>os: darwin x64</li>
  <li>@angular/common: 2.4.7</li>
  <li>@angular/compiler: 2.4.7</li>
  <li>@angular/core: 2.4.7</li>
  <li>@angular/forms: 2.4.7</li>
  <li>@angular/http: 2.4.7</li>
  <li>@angular/platform-browser: 2.4.7</li>
  <li>@angular/platform-browser-dynamic: 2.4.7</li>
  <li>@angular/router: 3.4.7</li>
  <li>@angular/cli: 1.0.0-beta.32.3</li>
  <li>@angular/compiler-cli: 2.4.7</li>
  <li>@ngrx/core@1.2.0 </li>
  <li>@ngrx/effects@2.0.0 </li>
  <li>@ngrx/store@2.2.1</li>
  <li>rxjs: 5.1.1</li>
  </ul>