angularangular7ngrxngrx-effectsangular-state-managmement

How pass value to Effect in Ngrx - Angular


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

Solution

  • 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) => ...)