javascript - ngRx 状態の更新とエフェクトの実行順序

Question

私はこの質問について私自身の意見を持っていますが、再確認して確実に知っておくことをお勧めします. 注意を払い、助けようとしてくれてありがとう。ここにあります：

いくつかの状態変化をトリガーするアクションをディスパッチし、それにいくつかのエフェクトが付加されていると想像してください。したがって、コードは 2 つのことを行う必要があります。状態を変更し、いくつかの副作用を実行します。しかし、これらのタスクの順序は何ですか? それらを同期的に行っていますか？まず、状態を変更してから副作用を実行すると思いますが、これら 2 つのタスクの間に別のことが起こる可能性はありますか? このように: 状態を変更し、以前に行った HTTP 要求に対する応答を取得して処理し、副作用を実行します。

[編集:] ここにコードを追加することにしました。また、私はそれをかなり単純化しました。

州：

export interface ApplicationState {
    loadingItemId: string;
    items: {[itemId: string]: ItemModel}
}

行動：

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) {}
}

レデューサー:

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;
    }
}

効果：

@Effect()
  FetchItemAction$: Observable<Action> = this.actions$
    .ofType('FETCH_ITEM')
    .switchMap((action: FetchItemAction) => this.httpService.fetchItem(action.payload))
    .map((item: ItemModel) => new FetchItemSuccessAction(item));

FetchItemAction をディスパッチする方法は次のとおりです。

export class ItemComponent {
    item$: Observable<ItemModel>;
    itemId$: Observable<string>;

    constructor(private route: ActivatedRoute,
                private store: Store<ApplicationState>) {

        this.itemId$ = this.route.params.map(params => params.itemId);

        itemId$.subscribe(itemId => this.store.dispatch(new FetchItemAction(itemId)));

        this.item$ = this.store.select(state => state.items)
            .combineLatest(itemId$)
            .map(([items, itemId]: [{[itemId: string]: ItemModel}]) => items[itemId])
    }
}

望ましいシナリオ:

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.

悪いシナリオ:

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

問題は単純に、悪いシナリオが実際に起こり得るかどうかです。