Angular NgRx effects, how to pass a parameter?

Question

I am trying to send id parameter from the dispatch to the effect, I can't find any example of this case in google.

Here's the code I already have:

The component:

 ngOnInit(): void {
   this.packageClass = `type-${this.package.packageType.toLowerCase()}`;
   // I set the payload to the action
   this.store.dispatch(new LoadClusterInfo({id: this.package.id}));
   this.checkStatus();
 }

The effect (where I need to access the value)

@Effect()
getClusterInfo = 
  this.actions.ofType(resultActions.Type.LOAD_CLUSTER_INFO)
    .pipe(
      switchMap(() => {
        let id = 'HARDCODED_ID';
        return this.service.getPackageCluster(id); // Here is where i need the value
      }),
      map((packageCluster: PackageCluster) => new LoadClusterInfoSuccess(packageCluster)),
      catchError((err: Error) => of(new LoadClusterInfoError(err))),
    );

And last the action:

  export class LoadClusterInfo implements Action {
    readonly type = Type.LOAD_CLUSTER_INFO;
    constructor(readonly payload: any) {}
  }

How can I access the id sent by the component (this.package.id) in the effect?

via `switchMap()` So: `switchMap(payload => { .... })` – penleychan Jan 21 '19 at 20:28 — penleychan, Jan 21 '19 at 20:28
thanks dude! You save my day. – nperez9 Jan 21 '19 at 20:51 — nperez9, Jan 21 '19 at 20:51

score 27 · Accepted Answer · edited Jan 04 '23 at 12:40

You can access the action's payload property in the switchMap operator. A couple of extra things:

Use the pipeable ofType operator because the ofType function is removed in NgRx 7
Type the ofType operator to have a typed action
use map and catchError on the service stream, otherwise when an error occurs the effect stream will get destroyed. See the NgRx docs for more info.

@Effect()
  getClusterInfo = this.actions
  .pipe(
    ofType<LoadClusterInfo>(resultActions.Type.LOAD_CLUSTER_INFO),
    switchMap((action) => {
      return this.service.getPackageCluster(action.id).pipe(
        map((packageCluster: PackageCluster) => new LoadClusterInfoSuccess(packageCluster)),
        catchError((err: Error) => of(new LoadClusterInfoError(err))),
     ); 
    }),  
  );

Update NgRx v8 +

With createAction and createEffect, the action is automatically inferred so you can do this and benefit from the types:

getClusterInfo = createEffect(() => {
  return this.actions.pipe(
    ofType(loadClusterInfo),
    switchMap((action: any) => {
      return this.service.getPackageCluster(action.id).pipe(
        map((packageCluster: PackageCluster) => new LoadClusterInfoSuccess(packageCluster)),
        catchError((err: Error) => of(new LoadClusterInfoError(err))),
     ); 
    }),  
  )
}

In this code action.id gives the typescript error, `Property 'id' does not exist on type 'never'.` — Jim, Jun 05 '21 at 02:16

score 4 · Answer 2 · answered Apr 05 '22 at 19:24

For those trying to get params with mergeMap you can do it like these:

 loadItems$ = createEffect(() =>
        this.actions$.pipe(
          ofType(YOUR_ACTION_NAME),
          mergeMap((action) =>
            this.myService.getAll(action.parameters).pipe(
              map((items) => ({
                type: ITEMS_LOADED_SUCESSFULLY,
                items: itemsList,
              })),
              catchError(() => EMPTY)
            )
          )
        )
      );

To dispatch the action:

this.store.dispatch(loadItems({ parameters: parameter }))

And in your .actions.ts:

export const loadItems = createAction(
YOUR_ACTION_NAME, props<{ parameters: string }>());

Angular NgRx effects, how to pass a parameter?

2 Answers2