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 통화가 취소된다는 것입니다. XHR 통화가 취소 된 경우 switchMap의 사용을 의심했지만, 지금은 mergeMap을 사용할 때가 아닙니다.

이

은 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 조치를 처리하는 효과에서 가져옵니다 티 그는 XHR을 취소했는데, 내가 mergeMap을 사용하고 있어도?

Answer 1

취소는이 효과에 의해 발생 : 그것에 switchMap를 사용하여

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

, 당신은 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; 
    }) 
    )) 
);