使用 NGXS 发送 UI 通知的正确方法

Question

我是 NGXS 的新手，我试图找出使用 NGXS 在 success/error HTTP 响应后发送 UI toast 通知的正确方法？我们应该在状态下处理它吗：

  @Action(SomeRequestSuccess)
  public success(ctx: StateContext<SomeModel>, action: SomeRequestSuccess) {
    // like this
    this.store.dispatch([new SuccessToastNotification(msg)])
    // or just use service
    this.toastsService.showToast(action.payload.message, ToastsTypes.SUCCESS);
  }

或者以某种方式保持 error/success 响应状态，然后在组件中使用它：

@Select(selectors.someRequestSuccess) public success$: Observable<any>;

ngOnInit() {
  this.success$.subscribe(s => 
      this.toastsService.showToast(s.message, ToastsTypes.SUCCESS);
      this.reloadReport();
  );
}

// and same way for error
...

或您可以建议的任何其他方式。提前致谢！

Answer 1

你的第一个例子，使用服务，是我最喜欢的这种功能的方法。请记住，如果此服务 return 是 Subscribable 或 Promise，您可以 return 调用 showToast 方法以将操作生命周期与异步连接操作。

另一种方法是分派一个动作，也在您的第一个示例中，然后使用 ActionStream 获取此动作，如下所示：

import { Injectable } from '@angular/core';
import { State, Actions, ofActionDispatched } from '@ngxs/store';

@State({...})
@Injectable()
export class MyState implements NgxsAfterBootstrap {
  constructor(action$: Actions) {}

  ngxsAfterBootstrap() {
    // synchronos
    action$.pipe(
      ofAction(SuccessToastNotification),
      tap(msg => this.toastsService.showToast(msg, ToastsTypes.SUCCESS))
    )

    // asynchronos
    action$.pipe(
      ofAction(SuccessToastNotification),
      mergeMap(msg => this.toastsService.showToast(msg, ToastsTypes.SUCCESS))
    )
  }
}

如果您想了解有关操作处理程序的更多信息，可以在 NGXS docs 中找到。这两种方法之间的选择将取决于您的团队偏好和准则。

使用 NGXS 发送 UI 通知的正确方法

Proper way to send UI notifications using NGXS

javascript

notifications

angular

ngxs