我应该在 redux 生命周期的哪个位置调用方法来显示通知（toasts）？

Question

我正在使用 ngrx/store 构建 angular2 应用程序。我应该在 redux 生命周期的哪个位置调用方法来显示通知（toasts）？

我目前的猜测是在副作用方面我应该这样做（我使用ngrx/effects）。

@Effect({ dispatch: false }) public newBidPublished$: any = this._actions$
    .ofType(BiddingStatusActions.NEW_BID_PUBLISHED)
    .map((action) => action.payload)
    .map((biddingStatus: GetBiddingStatusApiResponseModel) => {
        let msg = '<p>New bid has arrived.</p>';

        // PROBLEM HERE: I don't have access to previous bidding status here:
        if (biddingStatus.tenderRank !== 1 && previousBiddingStatus.tenderRank === 1) {
            msg += '<p>You are no longer in leading position.</p>';
        }

        this._notificationsService.info(msg);
    });

但是有一个大问题：我需要访问以前的状态才能比较当前出价是否失去了领先地位。我能够访问当前和先前状态的唯一地方是 reducer。但我怀疑这是显示通知的好地方，因为它不是服务，我不能在那里注入 NotificationService。

Answer 1

您可以将商店注入效果 class 并从那里访问它。

constructor(
    private actions$: Actions,
    private store: Store<State>,
) { }

private state$ = this.store.withLatestFrom(state => state).take(1);

现在您在 Observable 中拥有了整个状态，您可以使用 switchMap 将其传递给其他 Observable 或使用其他运算符进行组合。

当然，您应该只select您感兴趣的状态部分，而不是整个状态。

Answer 2

我会使用我自己的应用程序中的示例。要点是使用 selector 它将 select 为您修改之前的当前状态（在将新数据从 Effect 移动到 Reducer 之前）。

@Effect()
logout$: Observable<RouterActions.All | AccountActions.All> = this.actions$
.ofType<AccountActions.Logout>(AccountActions.LOGOUT)
.pipe(
  exhaustMap(() => this.API.auth.revokeToken()),
  // We are using selector to get a slice of the state
  withLatestFrom(this.store.select(fromAccount.selectUser)),
  // The operator above returns an array and we select the second item
  // which is our user/your state.
  map(([, user]) => user),
  map((user: User) => this.redirectUser(user))
);

我应该在 redux 生命周期的哪个位置调用方法来显示通知（toasts）？

Where in the redux lifecycle I should call methods to show notifications (toasts)?

toast

ngrx

angular