複数のアクションを送信し、次の送信完了を待ちます

Question

1つのエフェクトから複数のアクションを戻していますが、concatMapはアクションを順番に送信しますが、次のアクションを送信するまで完了するのを待っていません。彼はloadDetailsS​​uccess

を受信したとき loadDetailsは）私は（HttpResultActions.httpRequestUpdateSuccessfulを呼び出す前にloadDetailsActionを終了したいRESTサービスおよび更新ストアを呼び出します。

どのように達成できますか？ 別のアクションですか？

@Effect() 
    removeLibelle$ = this.actions$ 
    .ofType(DetailsActions.DELETE_LIBELLE) 
    .map(toPayload) 
    .withLatestFrom(this.store$.select(state => state.tree)) 
    .switchMap(([payload, tree]) => this.libelleService.deleteItem(payload) 
     .concatMap(() => { 
     return [ 
     DetailsActions.clear(), //function dispatch action clear 
      DetailsActions.loadDetails({ entity: tree.entity, 
      dateSearch: tree.search.dateSearch }), //function dispatch GET 
      HttpResultActions.httpRequestUpdateSuccessful() //Dispatch action to show modal success 
     ]; 
     }).catch(error => Observable.of(HttpResultActions.httpRequestError(error)))); 

Answer 1

シングルエフェクトではあまりにも多くのことをしています。あなたは自由にそれを複数のエフェクトに分割できます。このように考える。

DELETE ---> perform delete ----> DELETE_SUCCESS , DELETE_ERROR 

DELETE_SUCCESS ---> clear data ----> DATA_CLEAR_SUCCESS 

DATA_CLEAR_SUCCESS ----> load data ----> LOAD_DATA_SUCCESS 

私は一連のアクションを行いました。パラレルでも実行できます。

DELETE ---> perform delete ----> DELETE_SUCCESS , DELETE_ERROR 

DELETE_SUCCESS ---> clear data ----> DATA_CLEAR_SUCCESS 

DELETE_SUCCESS ----> load data ----> LOAD_DATA_SUCCESS 

今、あなたはこれらのいずれかのアクションでモデルの変更を行うことができます。あなたはすぐに明確なデータと負荷データの両方をトリガーするかもしれ、それはこのようになります。 興味深い部分は、あなたがget httpコールのための同じモデルの変更を持っているか、または削除が成功した後にhttpコールを得るかもしれません。それは、還元の美しさです。

あなたのコードでは、あなたはすぐに成功を収めて削除をユーザーに通知することを望むかもしれないこの

@Effect() 
    removeLibelle$ = this.actions$ 
    .ofType(DetailsActions.DELETE_LIBELLE) 
    .map(toPayload) 
    .withLatestFrom(this.store$.select(state => state.tree)) 
    .switchMap(([payload, tree]) => 
     this.libelleService.deleteItem(payload) 
    )// return DELETE_SUCCESS 
    .catch() //return DELETE_FAIL 

@Effect() 
    removeLibelleDataClear$ = this.actions$ 
    .ofType(DetailsActions.DELETE_LIBELLE) 
     //perform DetailsActions.clear(), 
     //return DATA_CLEAR_SUCCESS action 
     // return DATA_CLEAR_ERROR action 

// If you want to data load in parallell with clear, 
// you can listen on delete_success . If you want to do 
// it after data_clear, then listen on data_clear_success 
@Effect() 
    removeLibelleDataClear$ = this.actions$ 
    .ofType(DetailsActions.DATA_CLEAR_SUCCESS) 
     //perform 
     //DetailsActions.loadDetails({ entity: tree.entity, 
     // dateSearch: tree.search.dateSearch }) 
     // DATA_LOAD_SUCCESS 
     //catch: DATA_LOAD_ERROR 

のように見えます。データをリフレッシュします。または、別のアクションDELETE_SUCCESS_DATA_LOAD_SUCCESSを追加して、削除が成功したことをユーザーに通知できます。

このようにすると、非常に簡単にテストできます。複雑なswitchmap + concat + 3回のhttpコールと比較してください。