CODEWITHSUNDEEP
angularangular7ngrxngrx-effectsangular-state-managmement
Patricio Vargas
Patricio Vargas

Reputation: 5522

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

Upvotes: 0

Views: 4489

Answers (2)

Mohsin Ayaz
Mohsin Ayaz

Reputation: 11

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

Upvotes: 0

MS_AU
MS_AU

Reputation: 412

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

Upvotes: 2

Related Questions