Question

我刚接触NgRx。我想将一个值传递给效果。该值是要在服务中搜索的参数。

效果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()方法。还有其他方法吗？还是将其从其他Effect文件直接传递到.ts？我要使用有效载荷吗？

组件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

2 个答案: