Extracting data from an action using NgRx8

Question

Extracting data from an action using NgRx8

Hey everyone, I'm looking for some guidance on how to destructure action type and props in an ngrx effect. I'm struggling with this and could use some help!

This is my list of actions:

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

Here's the effect code:

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

Any advice or suggestions would be greatly appreciated!

angular typescript rxjs ngrx

Answer 1

Answer №1

Revamped: ofType allows you to directly use the accept action creator in this manner:

@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 include `type` and action payload
      const {type, ...payload} = action; 
      // some logic
      console.log(payload)
    })
  );

============== The previous answer remains valid:

Since you are utilizing an action creator that returns a function, you can access the action type through the type property like so:

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

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

Answer 2

Revamped: ofType allows you to directly use the accept action creator in this manner:

@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 include `type` and action payload
      const {type, ...payload} = action; 
      // some logic
      console.log(payload)
    })
  );

============== The previous answer remains valid:

Since you are utilizing an action creator that returns a function, you can access the action type through the type property like so:

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

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

Extracting data from an action using NgRx8

Answer №1

Similar questions

Employing a provider within a different provider and reciprocally intertwining their functions

Encountering a discord bot malfunction while on my Ubuntu server

Positioning Data Labels Outside of Pie or Doughnut Charts in Chart.js

Disappearing act: Ionic tabs mysteriously disappear when the back button

Error: Module 'react' not found. Please make sure it is installed and correctly imported

Leveraging the Power of SASS Variables Across Your Entire NativeScript Application

Typescript polymorphism allows for the ability to create various

What is the best way to create a custom type guard for a type discriminator in TypeScript?

Using ngFor in Angular 6 to create a table with rowspan functionality

Mastering the art of bi-directional data binding with nested arrays in Angular

Ensure that Angular CLI libraries contain all necessary dependencies

The infer keyword fails to provide the intended result due to the absence of a required property

Is there a way for me to determine the value that has been assigned to a <li> key attribute in React using Jest and testing-library/react?

Is there a way for me to extract information from a static HTML page, like the meta tag, in a simple manner

Utilizing Ionic to import and parse an Excel file for data processing

Could we apply 'ngZone: 'noop' specifically to a function or component in Angular?

Attempting to successfully upload this Angular 7 form to my TypeScript code. Making use of ngForm and [(ngModel)] to achieve this

Jhipster entity authentication

Importing 100 .ts files in a dynamic manner

Tips for activating AG Grid Column Auto Sizing on your website