1つのエフェクトから複数のアクションをディスパッチする

Question

こんにちは私は "loadFullService $"の新しいアクション "LoadConfig"をディスパッチしたいと思います。

どのようにすればいいですか？コンストラクタで

@Effect() 
loadFullService$: Observable<Action> = this.actions$ 
    .ofType<servicesActions.LoadFullService>(servicesActions.LOAD_FULL_SERVICE) 
    .switchMap(action => { 
     return this.apiService 
      .loadFullService(action.payload) 
      .map((service: Service) => new servicesActions.LoadFullServiceSuccess(service)) 
      .catch(error => of(new servicesActions.LoadFailureAction(error))); 
    }) 
    ; 

@Effect() 
loadConfig$: Observable<Action> = this.actions$ 
    .ofType<servicesActions.LoadConfig>(servicesActions.LOAD_CONFIG) 
    .switchMap(action => { 
     console.log("action config", action); 
     return this.apiService 
      .loadConfig(action.id, action.name) 
      .map((config: Configuration) => new servicesActions.LoadConfigSuccess(config)) 
      .catch(error => of(new servicesActions.LoadConfigFailure(error))); 
    }); 

Thxをuが

Answer 1

インポートストアサービス。

どこでも ofType()後のアクション呼び出し this.store.dispatch(newAction)、 doオペレータ（通常）と、内部次に

constructor(
    private store: Store<StoreType>, 
) 

。

@Effect() 
 
loadFullService$: Observable<Action> = this.actions$ 
 
    .ofType<servicesActions.LoadFullService>(servicesActions.LOAD_FULL_SERVICE) 
 
    .do(action => { 
 
    this.store.dispatch(new servicesActions.LoadConfig(action.payload.id, action.payload.name)) 
 
    }) 
 
    .switchMap(action => { 
 
    return this.apiService 
 
     .loadFullService(action.payload) 
 
     .map((service: Service) => new servicesActions.LoadFullServiceSuccess(service)) 
 
     .catch(error => of(new servicesActions.LoadFailureAction(error))); 
 
    });

私が好きに使用される別の一般的なアプローチは、新たに観察を作成している：

@Effect() 
 
loadFullService$: Observable<Action> = this.actions$ 
 
    .ofType<servicesActions.LoadFullService>(servicesActions.LOAD_FULL_SERVICE) 
 
    .switchMap(action => { 
 
    return this.apiService 
 
     .loadFullService(action.payload) 
 
     .mergeMap((service: Service) => { 
 
     return new Observable(observer => { 
 
      const successAction = new servicesActions.LoadFullServiceSuccess(service)); 
 
      const newAction = new servicesActions.LoadConfig(action.id, successAction.name)); 
 
      observer.next(successAction); 
 
      observer.next(newAction); 
 
      observer.complete(); 
 
     }); 
 
    }) 
 
    .catch(error => of(new servicesActions.LoadFailureAction(error))); 
 
});

欠点は、それはより多くの解約を追加するということですコードをたどると時には少し難しくなります。最後に

、第三のアプローチ：

@Effect() 
 
loadFullService$: Observable<Action> = this.actions$ 
 
    .ofType<servicesActions.LoadFullService>(servicesActions.LOAD_FULL_SERVICE) 
 
    .switchMap(action => { 
 
    return this.apiService 
 
     .loadFullService(action.payload) 
 
     .mergeMap((service: Service) => { 
 
     const successAction = new servicesActions.LoadFullServiceSuccess(service)); 
 
     const newAction = new servicesActions.LoadConfig(action.id, successAction.name)); 
 
     return Observable.from([successAction, newAction]); 
 
     }) 
 
     .catch(error => of(new servicesActions.LoadFailureAction(error))); 
 
    });