mergeMapは以前のHTTP呼び出しをキャンセルします

Question

私はダイアログを開いてダイアログ内のフォームコントロールのデータをプリロードするアクションを送出します。アクションは、元のアクションに渡された配列内の各idのデータをプリロードする新しいアクションの配列を戻すエフェクトによってピックアップされます。

@Effect() 
preloadReferenceData$ = this.actions$ 
    .ofType(PRELOAD_REFDATA) 
    .pipe(
    map((action: PreloadRefData) => action.payload), 
    mergeMap(ids => { 
     const actions: Action[] = []; 
     ids.forEach((id) => actions.push(new LoadRefDataForId(id))); 
     return actions; 
    }) 
); 

通常、私はこれは私が同じタイプの複数のアクションを派遣しています初めてです、そしてそれは私が経験したのは初めてだが、効果から複数の新しいアクションを成功裏に派遣するmergeMap演算子を使用しますXHRの呼び出しがキャンセルされることがあります。私はmergeMapを使用したときにXHR呼び出しがキャンセルされた場合にswitchMapの使用を疑ったでしょう。

これら

は actions

LoadRefDataForId {payload: "2441", type: "[Refdata] Load RefData"} 
LoadRefDataForId {payload: "7612", type: "[Refdata] Load RefData"} 
LoadRefDataForId {payload: "9411", type: "[Refdata] Load RefData"} 

の含有量であり、これは、ネットワークログ

@Effect() 
loadRefDataForId$ = this.actions$ 
    .ofType(LOAD_REFDATA_FOR_ID) 
    .pipe(
    map((action: LoadRefDataForId) => action.payload), 
    switchMap((id) => this.service.loadRefData(id) 
    .pipe(
    map((occupations) => { 
     return new LoadRefDataForIdSuccessful({ id: id, occupations: occupations } as RefDataPayload); 
    }), 
    catchError((err, caught) => { 
     console.log(caught); 
     return caught; 
    }) 
    )) 
); 

がなぜLoadRefDataForIdアクションを処理効果から取られますt XHRは、私がmergeMapを使っていてもキャンセルしましたか？解約は、この効果によって引き起こされる

Answer 1

：

@Effect() 
loadRefDataForId$ = this.actions$ 
    .ofType(LOAD_REFDATA_FOR_ID) 
    .pipe(
    map((action: LoadRefDataForId) => action.payload), 
    switchMap((id) => this.service.loadRefData(id) 
    .pipe(
    map((occupations) => { 
     return new LoadRefDataForIdSuccessful({ id: id, occupations: occupations } as RefDataPayload); 
    }), 
    catchError((err, caught) => { 
     console.log(caught); 
     return caught; 
    }) 
    )) 
); 

それでswitchMapを使用することにより、あなたはactions$ストリームを通過するだけで、最後のLoadRefDataForIdアクションが処理/考慮すべきであると語っています。

変更を：

@Effect() 
loadRefDataForId$ = this.actions$ 
    .ofType(LOAD_REFDATA_FOR_ID) 
    .pipe(
    map((action: LoadRefDataForId) => action.payload), 
    mergeMap((id) => this.service.loadRefData(id) 
    .pipe(
    map((occupations) => { 
     return new LoadRefDataForIdSuccessful({ id: id, occupations: occupations } as RefDataPayload); 
    }), 
    catchError((err, caught) => { 
     console.log(caught); 
     return caught; 
    }) 
    )) 
);