Question

这是我第一次使用Ngrx Store，我想用它来从数据库中获取一些出版物。我可以为一个简单的出版物做它，但是现在我想为一个特殊的ID做

这是我的作用

  @Effect()
  getPiinsByProfilesEffect$: Observable<Action> = this.actions$
    .pipe(
      ofType<featureActions.GetPiinsByProfile>(featureActions.ActionTypes.GET_PIINS_BY_PROFILE),
      startWith(new featureActions.GetPiinsByProfile()),
      switchMap(action => this.dataService.GetPiinsByProfile(action.id)
        .pipe(
          map(items => new featureActions.GetPiinsByProfileSuccess(items.results)),
          catchError(error =>
            observableOf(new featureActions.GetPiinsByProfileFail(error))
          )
        )
      )
    );

这是我的服务

  GetPiinsByProfile(id: string): Observable<ListPiinsResponse> {
    const limit = '7';
    const page = '1';

    return this.http.get<ListPiinsResponse>(`${this.baseUrl}/piins/profile/${id}`, {
      params: {
        limit: limit, page
      }
    });
  }

这是我的动作

export class GetPiinsByProfile implements Action {
  readonly type = ActionTypes.GET_PIINS_BY_PROFILE;
  constructor(public id: String) { }
}

export class GetPiinsByProfileStart implements Action {
  readonly type = ActionTypes.GET_PIINS_BY_PROFILE_START;
}

export class GetPiinsByProfileFail implements Action {
  readonly type = ActionTypes.GET_PIINS_BY_PROFILE_FAIL;

  constructor(public payload: any) { }
}

export class GetPiinsByProfileSuccess implements Action {
  readonly type = ActionTypes.GET_PIINS_BY_PROFILE_SUCCESS;

  constructor(public payload: Piins[]) { }
}

感谢大家能帮助我：）

Answer 1

在您的组件中，您必须调度一个操作以根据id获得发布。

应该是这样

export class ABC {
    constructor(public store: Store<>,
               public action: PiinsAction) { }
      ngOnInit() {
         this.store.dispatch(this.action.GetPiinsByProfile(id));
     }
}

您还需要使用选择器订阅结果。

https://ultimatecourses.com/blog/ngrx-store-understanding-state-selectors

Answer 2

谢谢大家，我找到了解决方案。

我使用与@vishnu相同的构造函数，但真正的问题出在我身上。那是我的新版本：

  @Effect()
  getPiinsByProfilesEffect$: Observable<ActionsPiins> = this.actions$
    .pipe(
      ofType<featureActions.GetPiinsByProfile>(featureActions.ActionTypes.GET_PIINS_BY_PROFILE),
      startWith(new featureActions.GetPiinsByProfileLoad),
      switchMap(action => {
        console.log(action);
        if (action.type === featureActions.ActionTypes.GET_PIINS_BY_PROFILE) {
          const getPiinsByProfileAction = action as featureActions.GetPiinsByProfile;
          return this.dataService.GetPiinsByProfile(getPiinsByProfileAction.id)
            .pipe(
              tap((list) => console.log(list)),
              map(items => new featureActions.GetPiinsByProfileSuccess(items.results)),
              catchError(error =>
                observableOf(new featureActions.GetPiinsByProfileFail(error))
              )
            );
        } else {
          return observableOf(action);
        }

      }
      )
    );

这是我的新动作：

export class GetPiinsByProfileLoad implements Action {
  readonly type = ActionTypes.GET_PIINS_BY_PROFILE_LOAD;
}

如何在ngrx商店上添加具有id的效果

2 个答案: