Angular 分派多个操作并等待完成以发送下一个操作

我从一个效果返回多个动作，concatMap按顺序发送动作，但不要等到完成后才发送下一个动作。 loadDetails在收到LoadDetailsAccess时调用REST服务并更新存储

我想在调用HttpResultActions.httpRequestUpdateSuccessful（）之前完成LoadDetails操作

如何才能做到这一点？ 来自不同的行动

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

---

你做的事情太多，效果单一。您可以自由地将其分解为多种效果。这样想吧

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调用或get-http调用进行相同的模型更改。这就是redux的魅力所在

您的代码如下所示

@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

您可能希望立即通知用户删除成功。并刷新数据。或者您可以添加不同的操作删除成功数据加载成功并通知用户删除成功

打破这种方式使测试变得非常简单，将其与复杂的switchmap+concat+3个http调用进行比较