在一个效果中连接 2 个 Angular NGRX 动作

Question

我对 redux 非常陌生，我面临一个问题，我不知道是否有可能解决，或者我应该更改组件和存储的工作方式。

我有一个按钮，单击该按钮时会发送此操作：

export const updateOrganizationSettings = createAction(
  '[Organization settings effect] Update organization settings via service',
  props<{ organizationSettings: OrganizationSettings }>()
);

此操作会触发以下效果：

updateOrganizationSettings$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType(organizationSettingsActionTypes.updateOrganizationSettings),
        concatMap((action) =>
          this.organizationSettingsService.updateOrganizationSettings(
            action.organizationSettings
          )
        )
      ),
    { dispatch: false }
  );

它调用一个 API，成功时返回 true。

我想要做的是以某种方式在成功时分派另一个 Action ，然后更改存储：

export const organizationSettingsUpdated = createAction(
  '[Organization settings reducer] Organization settings updated successfully',
  props<{ updatedOrganizationSettings: OrganizationSettings }>()
);

问题是来自 API 的响应是真/假，而此操作需要更新的模型，而我只有第一个操作。

有没有办法做到这一点？ 这是与商店合作的糟糕方式吗？ 作为最后一个选项，我可以更改 API 以返回更新的模型，但我想知道是否还有其他可能性。

谢谢

=== 编辑 ===

这是调用效果内部后端的API服务：

updateOrganizationSettings(
    organizationSettings: OrganizationSettings
  ): Promise<boolean> {
    return this.httpService
      .put<boolean>('/general-settings', organizationSettings)
      .then((data) => data);
  }

这应该是在 api 调用返回 true 后分派的操作：

export const organizationSettingsUpdated = createAction(
  '[Organization settings reducer] Organization settings updated successfully',
  props<{ updatedOrganizationSettings: OrganizationSettings }>()
);

最后这应该是减速器

on(
    organizationSettingsActionTypes.organizationSettingsUpdated,
    (state, action) => ({
      ...state,
      organizationSettings: action.updatedOrganizationSettings
    })
  )

Answer 1

updateOrganizationSettings$ = createEffect(() =>
    this.actions$.pipe(
      ofType(organizationSettingsActionTypes.updateOrganizationSettings),
      mergeMap((action) => {
        return this.organizationSettingsService.updateOrganizationSettings(action.organizationSettings).pipe(
          map(response => updateOrganizationSettingsSuccess(response)) --> the action you are asking for
          catchError(error => updateOrganizationSettingsError(error))
       )
    })
));

当然，您应该创建一个updateOrganizationSettingsSuccess和updateOrganizationSettingsError操作+将其连接到减速器。

这有帮助吗？