Отправлять второе действие после завершения первого действия из компонента в NGRX / RXJS

Я новичок в использовании NGRX / RXJS в моем приложении angular, и у меня есть ситуация, когда мне нужно отправить действие из моего компонента, который извлекает данные из API, если свойство пусто и обновляет Store_1 и устанавливает свойство, а затем отправить другое действие, которое использует эти данные из Store_1 для выполнения некоторых функций в Store_2 и обновит состояние после завершения действия 1 и заполнит "pluralconfig". Это код, который я придумал, но я не думаю / считаю, что это наиболее эффективный способ сделать это, и если я правильно использую операторы.

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

angular rxjs rxjs-pipeable-operators ngrx ngrx-effects
person james Makinde    schedule 05.06.2018    source источник
comment
Вы можете сделать switchMap со своими эффектами, чтобы выполнить что-то вроде этого.   -  person penleychan    schedule 06.06.2018

Ответы (1)


arrow_upward
2
arrow_downward

Вся эта логика должна иметь эффект чего-то вроде

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

Взгляните на пример приложения ngrx в https://github.com/ngrx/platform/tree/master/example-app Это я узнал больше всего

person Gabriel Guerrero    schedule 05.06.2018