如何捕获 UI 组件中的 effect 触发的 ngrx 操作？

Question

我是 ngrx 状态管理的新手，我正在使用 @ngrx/store 和 6.0.1 的效果，假设我想保存一个新的会员联系方式，所以我准备了以下内容：

member.effect.ts

@Effect()
memberContactCreate$ = this.actions$.pipe(
    ofType(MemberActions.MemberActionTypes.MemberContactCreate),
    switchMap((action: MemberActions.MemberContactCreate) => {
        return this.memberService.createMemberDetail(action.payload);
    }),
    map(
        (response) => {
            console.log('MemberContactCreate$ MemberContactCreate response: ', response);
            if (!response.didError) {
                return new MemberActions.MemberContactCreateSuccess(response.model as MemberDetailResponse);
            } else {
                return new MemberActions.MemberContactCreateFailure(response.errorMessage);
            }
        },
    ),
);

在我的会员联系组件提交中，我将发送创建操作

this.store.dispatch(new fromAction.MemberContactCreate(<MemberDetailRequest>this.memberDetailForm.value));

但是，我想显示一个 toastr 或通知，如果我的成员从服务器成功创建（在我的 @Effect 方法中定义），return 新操作“MemberActions.MemberContactCreateSuccess", 但是我怎么能在我的组件被触发后立即在我的组件中捕获这个动作？ 我尝试做如下的事情并将它放在我的 ngOnInit 中认为它可以像订阅一样使用，但它不是，事实上它每次都会像页面加载一样触发，甚至我没有发送我的 memberContactCreate 操作...

this.store.select(fromSelector.getMemberCreateSuccess)
      .subscribe((stateSelector) => {
        console.log('getMemberCreateSuccess: ', stateSelector);
        setTimeout(() => {
          this.toastr('Hooray',
            'New contact has been created successfully!');
        }, 800);
        this.tableData = stateSelector;
      });

那么我的组件如何与触发的 ngrx 操作交互，就像 subject/subscription 一样？我已经在网上阅读了很多材料，但大多数示例都停留在“CreateSuccessful”操作，该操作只是将一个项目推入存储的对象列表，没有继续UI 之后的交互...**那么组件应该如何接收或捕获 **MemberContactCreateSuccess/Failure 操作并让用户知道您的操作是否成功？

Answer 1

我个人不会处理组件内的通知，但我会使用@ngrx/effects 到show/hide 通知。我在 Start using ngrx/effects for this.

中简要介绍了这一点

但如果确实有必要，您可以像在效果中一样在组件中收听您的动作。您必须在组件中注入 Actions，使用 ofType 运算符就像在效果中一样。唯一的区别是您必须订阅组件内的 actions observable（在 ngrx/effects 中，这是为您完成的）。

如何捕获 UI 组件中的 effect 触发的 ngrx 操作？

How to catch an ngrx action triggered from effect in UI component?

ngrx

ngrx-effects

ngrx-store

angular5

angular6