ngrx/效果的嵌套操作未在模板上消失答案

【问题标题】：Nested actions on ngrx/effects not diplaed on templatengrx/效果的嵌套操作未在模板上消失
【发布时间】：2022-01-15 18:08:22
【问题描述】：

我有 2 个 API。它们都在页面加载后立即启动。其中一个 API_1 从 API_2 获取参数。我能够从 Effects 获取日志，但在 .ts 上未定义。

已为这两个 API 创建了操作和选择器。对于第一个 API，有 3 个操作：load、loadSucess、loadFailure。而第二个 API 只实现了 2：loadSucess 或 load Failure，因为它将根据第一个 API 的 LoadSucess 开始工作。

effects.ts 文件

 loadUserALLData$ = createEffect(() => {
    return this.actions$.pipe(
      ofType(UserSettingsAction.loadUserALLDataModelAction),
      mergeMap(() =>
        this.settingsService.GetEditUserInfo().pipe(
          map((userAllDataModel: IUserModel[]) =>
            UserSettingsAction.loadUserALLDataSuccess({
              userAllDataModel: userAllDataModel,
            }),
          ),
          catchError((error) =>
            of(UserSettingsAction.loadUserALLDataFailure({ error })),
          ),
        ),
      ),
    );
  });

  loadImageavatarData$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType(UserSettingsAction.loadUserALLDataSuccess),
        switchMap(
          (x) =>
            {
              return this.settingsService
                .loadProfilePicture({
                  guids: [x['Data']],
                })
                .pipe(
                  map((userAllDataModel: any) =>
                    {
                      console.log('got some data here', userAllDataModel),
                        UserSettingsAction.loadImageAvatarSuccessAction({
                          userAllDataModel: userAllDataModel,
                        });
                    },
                  ),                 
                  catchError((error) =>
                    of(
                      UserSettingsAction.loadImageAvatarFailureAction({
                        error,
                      }),
                    ),
                  ),
                );
            },

        ),
      ),
    { dispatch: false },
  );

component.ts 文件中的日志未定义。

<p *ngIf="avatarPicture$ | async as avatarPicture; else loading">Load data here</p>

  avatarPicture$: Observable<any> = this.store
    .select(loadImageAavatarModel)
    .pipe(tap((x) => console.log('from componenet here', x)));

【问题讨论】：

标签： angular observable ngrx ngrx-store ngrx-effects

【解决方案1】：

您可能希望从第二个效果中分派成功操作。删除 { dispatch: false },，我认为它可以工作。

还要确保返回成功操作

- UserSettingsAction.loadImageAvatarSuccessAction({...})
+ return UserSettingsAction.loadImageAvatarSuccessAction({...})

【讨论】：

现在它给出了一些错误@timdeschryver Type 'void | ({ error: string; } & TypedAction)' 不可分配给类型 'Action'。类型“void”不可分配给类型“Action”。
修改1：移除dispatch : false 并返回this.actions$.pipe(但进入组件未定义