在 NGRX/RXJS 中的组件完成第一个操作后调度第二个操作

Question

我刚开始在我的 angular 应用程序中使用 NGRX/RXJS，我遇到了一种情况，我必须从我的组件中分派一个操作，该操作从 API 中获取数据如果属性为空并更新 Store_1 并设置属性，然后派发另一个使用 Store_1 中的数据执行 Store_2 中的某些功能的操作并在操作 1 完成后更新状态并填写 "pluralconfig"。这是我想出的代码，但我不认为 think/believe 这是执行此操作的最有效方法，如果我正确使用运算符。

  if(isEmpty(definition.pluralconfig == null))
     {
         this.store$.dispatch(new FormDBAction(definition.formId));

         let id = definition.id;
         this.formLoadSubscription = this.store$.select(getOrderById(id))
         .filter(v => v.pluralconfig != null).subscribe(() =>{

            this.store$.select<TosModel>(getOrderById(id)).subscribe(updatedDefinition => {
              this.store$.dispatch(new OrderDetailAction(updatedDefinition));
            });             
         });
     }
     else{
      this.store$.dispatch(new OrderDetailAction(definition));
     }

Answer 1

所有这些逻辑的效果应该类似于

//Effects file
@Effect()
loadOrderDetail$: = this.actions$.pipe(
ofType(LOAD_ORDER_DETAIL),
flatMap(action => {
    return this.store$.select<TosModel>(getOrderById(action.id)).pipe(first());
})
map(definition => definition.pluralconfig ? new FormDBAction(definition.formId): new OrderDetailAction(definition)})
)

@Effect()
formDb$: = this.actions$.pipe(
ofType(FORM_DB_ACTION),
switchMap(action => {
    ///call api and fire  new FormDbActionSuccess(response.definition) which reducer will store
})

@Effect()
onSuccessOrderDetail$: = this.actions$.pipe(
ofType(FORM_DB_ACTION_SUCESS),
map(action => new OrderDetailAction(action.definition))

//Component
definition$ = this.store.select(getOrderById(id));
store.dispatch( new LoadOrderDetail(id));

查看 https://github.com/ngrx/platform/tree/master/projects/example-app 中的 ngrx 示例应用程序那是我学到最多的

在 NGRX/RXJS 中的组件完成第一个操作后调度第二个操作

Dispatch second action after first action completes from component in NGRX/RXJS

rxjs

ngrx

ngrx-effects

angular

rxjs-pipeable-operators