title: ngRx state update and Effects execution order
body: <p>I have my own opinion on this question, but it's better to double check and know for sure. Thanks for paying attention and trying to help. Here it is:</p>
  
  <p>Imagine that we're dispatching an action which triggers some state changes and also has some Effects attached to it. So our code has to do 2 things - change state and do some side effects. But what is the order of these tasks? Are we doing them synchronously? I believe that first, we change state and then do the side effect, but is there a possibility, that between these two tasks might happen something else? Like this: we change state, then get some response on HTTP request we did previously and handle it, then do the side effects.</p>
  
  <p>[edit:] I've decided to add some code here. And also I simplified it a lot.</p>
  
  <p>State:</p>
  
  <pre><code>export interface ApplicationState {
      loadingItemId: string;
      items: {[itemId: string]: ItemModel}
  }
  </code></pre>
  
  <p>Actions:</p>
  
  <pre><code>export class FetchItemAction implements  Action {
    readonly type = 'FETCH_ITEM';
    constructor(public payload: string) {}
  }
  
  export class FetchItemSuccessAction implements  Action {
    readonly type = 'FETCH_ITEM_SUCCESS';
    constructor(public payload: ItemModel) {}
  }
  </code></pre>
  
  <p>Reducer:</p>
  
  <pre><code>export function reducer(state: ApplicationState, action: any) {
      const newState = _.cloneDeep(state);
      switch(action.type) {
          case 'FETCH_ITEM':
              newState.loadingItemId = action.payload;
              return newState;
          case 'FETCH_ITEM_SUCCESS':
              newState.items[newState.loadingItemId] = action.payload;
              newState.loadingItemId = null;
              return newState;
          default:
              return state;
      }
  }
  </code></pre>
  
  <p>Effect:</p>
  
  <pre><code>@Effect()
    FetchItemAction$: Observable&lt;Action&gt; = this.actions$
      .ofType('FETCH_ITEM')
      .switchMap((action: FetchItemAction) =&gt; this.httpService.fetchItem(action.payload))
      .map((item: ItemModel) =&gt; new FetchItemSuccessAction(item));
  </code></pre>
  
  <p>And this is how we dispatch FetchItemAction:</p>
  
  <pre><code>export class ItemComponent {
      item$: Observable&lt;ItemModel&gt;;
      itemId$: Observable&lt;string&gt;;
  
      constructor(private route: ActivatedRoute,
                  private store: Store&lt;ApplicationState&gt;) {
  
          this.itemId$ = this.route.params.map(params =&gt; params.itemId);
  
          itemId$.subscribe(itemId =&gt; this.store.dispatch(new FetchItemAction(itemId)));
  
          this.item$ = this.store.select(state =&gt; state.items)
              .combineLatest(itemId$)
              .map(([items, itemId]: [{[itemId: string]: ItemModel}]) =&gt; items[itemId])
      }
  }
  </code></pre>
  
  <p>Desired scenario:</p>
  
  <pre><code>User clicks on itemUrl_1;
  we store itemId_1 as loadingItemId;
  make the request_1;
  user clicks on itemUrl_2;
  we store itemId_2 as loadingItemId;
  switchMap operator in our effect cancells previous request_1 and makes request_2;
  get the item_2 in response;
  store it under key itemId_2 and make loadingItemId = null.
  </code></pre>
  
  <p>Bad scenario:</p>
  
  <pre><code>User clicks on itemUrl_1;
  we store itemId_1 as loadingItemId;
  make the request_1;
  user clicks on itemUrl_2;
  we store itemId_2 as loadingItemId;  
  we receive the response_1 before we made the new request_2 but after loadingItemId changed;
  we store the item_1 from the response_1 under the key itemId_2;
  make loadingItemId = null;
  only here our effect works and we make request_2;
  get item_2 in the response_2;
  try to store it under key null and get an error
  </code></pre>
  
  <p><strong>So the question is simply if the bad scenario can actually happen or not?</strong></p>