NgRx8 разрушает ценности от действия - PullRequest
1 голос
/ 22 сентября 2019

каждый, я хотел бы уничтожить тип действия и подпорки в эффекте ngrx, я застрял в том, как я могу это сделать

Мои действия:

export const addTab = createAction(
  '[SuperUserTabs] add tab',
  props<{ tab: SuperUserHeaderTab, tabType: TabType }>()
);

export const searchCompanyTab = createAction(
  '[SuperUserTabs] search company tab'
);

export const searchCardholderTab = createAction(
  '[SuperUserTabs] search cardholder tab'
);

Эффект:

@Effect({ dispatch: false })
  addTab$ = this.actions$.pipe(
    ofType(
      TabsActions.addTab,
      TabsActions.searchCompanyTab,
      TabsActions.searchCardholderTab
    ),
    withLatestFrom(this.store.pipe(select(getTabs))),
    tap(([action, tabs]) => {
      // destruct here 
      const {type, props} = action;
      // some logic
    })
  );

Есть предложения?

1 Ответ

0 голосов
/ 22 сентября 2019

Обновлено : ofType принять создателя действия, поэтому вы можете использовать его напрямую:

@Effect({ dispatch: false })
  addTab$ = this.actions$.pipe(
    ofType(
      TabsActions.addTab,
      TabsActions.searchCompanyTab,
      TabsActions.searchCardholderTab
    ),
    withLatestFrom(this.store.pipe(select(getTabs))),
    tap(([action, tabs]) => {
      // this object will contain `type` and action payload
      const {type, ...payload} = action; 
      // some logic
      console.log(payload)
    })
  );

============= Старый ответ также работает:

, потому что вы используете создатель действия, который возвращает функцию, поэтому вы можете получить доступ к типу действия через свойство type, например:

@Effect({ dispatch: false })
  addTab$ = this.actions$.pipe(
    ofType(
      TabsActions.addTab.type,
      TabsActions.searchCompanyTab.type,
      TabsActions.searchCardholderTab.type
    ),
    withLatestFrom(this.store.pipe(select(getTabs))),
    tap(([action, tabs]) => {
      // this object will contain `type` and action payload
      const {type, ...payload} = action; 
      // some logic
      console.log(payload)
    })
  );

демо: https://stackblitz.com/edit/angular-3t2fmx?file=src%2Fapp%2Fstore.ts

...