rxJS和ngrx - 效果中成功/失敗的正確結構是什麼？

Question

我在angular 2 Project中工作並使用ngrx和rxjs技術。

現在我有一個問題：

我試圖聲明的影響。 效果有http請求，只有當它成功我想調用其他http請求，所以只有當它也成功 - 然後分派成功的行動。

我已經通過拋出一個錯誤來測試它，但它總是調度行動！

參見：

 @Effect() 
createEntity$ = this.actions$.ofType(CREATE_ENTITY) 
    .switchMap((action: CreateEntity) => { 

     return this.httpService.getDefaultEntityData(action.payload.type).map((entity) => { 
      return Observable.throw("testing only"); 
      /*if (entity) { 
       entity.title = entity.type; 
       return this.httpService.addEntity(entity); 
      }*/ 
     }) 

      .catch((error) => Observable.of(new createEntityFailure(error))) 
      .map(mappedResponse => ({ type: CREATE_ENTITY_SUCCESS, payload: mappedResponse })) 
    }); 

Answer 1

如何：

this.actions$ 
    .ofType(CREATE_ENTITY) 
    .map((action: CreateEntity) => action.payload) 
    .switchMap(payload => 
     this.httpService.getDefaultEntityData(payload.type) 
     .mergeMap(entity => this.httpService.addEntity(entity)) 
     // .mergeMap(entity => Observable.throw('error')) // or this for testing 
     .mergeMap(response => new actions.Action(...)) 
     .catch(error => new actions.Error(...)) 
    ); 

Answer 2

您可以使用此分割成多個動作或添加另一API調用同樣的效果Observable.forkJoin

 @Effect() createEntity$ = this.actions$.ofType(CREATE_ENTITY) 
.switchMap((action: CreateEntity) => { 
    return Observable.forkJoin(
     this.httpService.callOne(), 
     this.httpService.callTwo() 
    ) 
    .catch((error) => Observable.of(new createEntityFailure(error))) 
    .map(mappedResponse => ({ type: CREATE_ENTITY_SUCCESS, payload: mappedResponse })) 
}); 

由於forkJoin是行不通並行爲你。您只需switchMap第一API調用和返回第二：

 @Effect() createEntity$ = this.actions$.ofType(CREATE_ENTITY) 
.switchMap((action: CreateEntity) => { 
    return this.httpService.callOne(); 
}) 
.switchMap((response) => { 
    return this.httpService.callTwo() 
     .map(secondResponse => ({ 
      type: CREATE_ENTITY_SUCCESS, 
      payload: { 
       first: response, 
       second: secondResponse 
      } 
     })) 
}) 
    .catch((error) => Observable.of(new createEntityFailure(error))) 
}); 

Answer 3

1）如果您在返回Observable你可能想的swithMap代替map

2 ）由於您從catch返回非錯誤Observable，因此操作總是被派遣。更改Observable.of到Observable.throw將拋出錯誤進一步

@Effect() 
createEntity$ = this.actions$.ofType(CREATE_ENTITY) 
    .switchMap((action: CreateEntity) => 
     this.httpService.getDefaultEntityData(action.payload.type) 
    ) 
    .switchMap((entity) => { //          <------ switchMap here 
     return Observable.throw("testing only"); 
     /*if (entity) { 
      entity.title = entity.type; 
      return this.httpService.addEntity(entity); 
     }*/ 
    }) 
    .catch((error) => 
     Observable.throw(new createEntityFailure(error)) //   <------ throw here 
    ) 
    .map((mappedResponse) => 
     ({ type: CREATE_ENTITY_SUCCESS, payload: mappedResponse }) 
    );