如何在 ngrx Store 上添加带有 id 的效果

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 Store 上添加带有 id 的效果

How to add an effect with id on ngrx Store

angular

ngrx-store