Question

我从一个效果返回多个动作，concatMap按顺序发送动作但不等待完成发送下一个动作。 loadDetails在收到loadDetailsSuccess

时调用REST服务并更新存储

我想在调用HttpResultActions.httpRequestUpdateSuccessful（）之前完成loadDetailsAction。

怎么能实现呢？从不同的行动？

@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

现在，您可以在任何这些操作中执行模型更改。有趣的是，你可以对获得http调用进行相同的模型更改，或者在删除成功后获得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

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

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

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

1 个答案: