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));

但是，我想显示一个敬酒或通知，如果我的成员从服务器成功创建（在我的@Effect方法中定义），请返回新操作“ MemberActions.MemberContactCreateSuccess ”，< strong>但是一旦我的组件被激发，我怎么能在它中捕捉到这个动作？我尝试执行以下类似操作并将其放在我的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动作交互？我已经在线阅读了大量资料，但是大多数示例都停留在“ CreateSuccessful ”操作上，该操作只是将项目推入存储的对象列表中，在此之后，没有继续的UI交互。。**那么组件应该如何接收或捕获** MemberContactCreateSuccess / Failure 操作，并让用户知道您的操作成功与否？

Answer 1

我个人不会在组件中处理通知，但是我会使用@ ngrx / effects显示/隐藏通知。我在Start using ngrx/effects for this中简要介绍了这一点。

但是，如果确实有必要，您可以像在效果中一样聆听组件中的动作。您必须在组件中注入Actions，使用ofType 就像效果一样。唯一的不同是，您将必须订阅该组件中可观察到的actions（在ngrx / effects中，这已为您完成）。

如何捕获UI组件中的效果触发的ngrx动作？

1 个答案: