如何在 Ngrx 中将值传递给 Effect - Angular

Question

我对 NgRx 还很陌生。我想将一个值传递给 Effect。该值是要在服务中搜索的参数。

效果TS文件

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

如您所见，我有一个名为 getParam() 的方法，它订阅包含搜索参数的 BehavioralSubject。我无法在我的 Effect 中调用 getParam() 方法。还有另一种方法吗？还是从另一个 .ts 文件直接传递给 Effect？我使用负载吗？

组件TS文件

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

减速机TS

 case ActionTypes.SEARCH_USERS:
      return action.payload;

动作 TS

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

Answer 1

您将需要使用动作负载来实现此目的。

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

然后映射到效果中的动作负载。

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

Answer 2

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

您没有在操作上发送任何值您的操作需要一个类型为字符串的值

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

这是你的动作，它有一个构造函数和一个有效负载，像这样在动作参数上发送值

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

您没有向操作发送任何值，这就是它无法识别 action.payload 效果的原因

如何在 Ngrx 中将值传递给 Effect - Angular

How pass value to Effect in Ngrx - Angular

angular

angular7

ngrx

ngrx-effects

angular-state-managmement