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

如何解决在一个效果中连接 2 个 Angular NGRX 动作

我对 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 以返回更新后的模型，但我想知道是否还有其他可能性。

谢谢

=== 编辑 ===

这是在Effect里面调用后端的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 }>()
);

最后这应该是reducer

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

解决方法

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 操作 + 将其连接到减速器。

这有帮助吗？