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

Question

我是ngrx状态管理的新手，我正在使用@ ngrx / store和6.0.1的效果，假设我想保存一个新的成员联系人，所以我已经做好了以下准备：

• 成员效应

  @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 ”，但是我如何才能在我的组件中捕获此动作呢？马上被发射？我试图做下面的事情并将其放在我的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显示/隐藏通知。我在“为此开始使用ngrx / effects”中简要介绍了这一点。

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