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