How pass value to Effect in Ngrx - Angular

Question

I'm pretty new to NgRx. I want to pass a value to an Effect. That value is the parameter to be searched in the service.

Effect TS file

export class UsersEffects {
  searchParam: string;
  @Effect()
  users$ = this.actions$.pipe(
    ofType(ActionTypes.SEARCH_USERS),
    map(action => action.payload), //ERROR doesn't recognize payload
    switchMap((payload) =>
      this.githubSearch.getUsers(payload).pipe(
        map(res => new UserActions.GetUsersSuccess(res)),
        catchError(() => of({ type: '[Users API] Users Loaded Error' }))
      )
    )
  );

  constructor(
    private actions$: Actions,
    private githubSearch: GithubSearchService
  ) {}
}

As you can see I have a method called getParam(), which subscribe to a BehavioralSubject that contains the search param. I'm not able to call that the getParam() method inside of my Effect. Is there another way to do so? or to pass it straight to the Effect from a different .ts file? Do I use the payload?

Component TS file

    onSearch(): void {    
     this.githubSearchService.setSearchParam(this.searchForm.value.searchParam);
            this.store.dispatch(new UsersActions.SearchUsers());
            this.searchForm.reset();
     }

Reducer TS

 case ActionTypes.SEARCH_USERS:
      return action.payload;

Actions TS

    export class SearchUsers implements Action {
      readonly type = ActionTypes.SEARCH_USERS;
      constructor(public payload: string) {}
    }

MS_AU · Accepted Answer · 2019-05-22 05:08:25Z

2

You will want to use the action payload to achieve this.

this.store.dispatch(new UsersActions.SearchUsers(searchParam));

Then map to the action payload in your effect.

this.actions$.pipe(
    ofType<SearchUsers>(ActionTypes.SEARCH_USERS),
    map(action => action.payload),
    switchMap((payload) => ...)

edited May 22, 2019 at 5:08

answered May 22, 2019 at 3:26

MS_AU

4224 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Patricio Vargas Over a year ago

Hi! thanks for taking your time to help me. I'm getting an error in the reducer. I have updated my questions. ERROR doesn't recognize payload

Patricio Vargas Over a year ago

it works tho... it just doesn't recognize it so I put it like this map(action => action['payload']) and it works

MS_AU Over a year ago

You may need to add the type info: ofType<SearchUsers>(ActionTypes.SEARCH_USERS). This allows the TypeScript compiler to expect the action passed to .map() to be an instance of the SearchUsers action.

Mohsin Ayaz · Accepted Answer · 2019-09-04 09:05:30Z

onSearch(): void {    
 this.githubSearchService.setSearchParam(this.searchForm.value.searchParam);
        this.store.dispatch(new UsersActions.SearchUsers());
        this.searchForm.reset();
 }

You didn't send any value on action your action want a value which type gonna be string

 export class SearchUsers implements Action {
  readonly type = ActionTypes.SEARCH_USERS;
  constructor(public payload: string) {}
}

This is your action that have a constructor and have a payload send the value on action param like this

this.store.dispatch(new UsersActions.SearchUsers(searchParams));

You didn't send any value to action thats why it not recognize action.payload in effect

Collectives™ on Stack Overflow

How pass value to Effect in Ngrx - Angular

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related