在效果内连接 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，如果成功，return 为真。

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

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

问题是 API 的响应是 true/false 而此操作需要更新的模型，而我只有第一个操作才有。

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

谢谢

=== 编辑 ===

这是API在效果中调用后端的服务：

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

这应该是在 api 调用后调度的操作 returns 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 动作 + 将它挂接到一个减速器上。

这有帮助吗？

在效果内连接 2 Angular NGRX 动作

Concatenate 2 Angular NGRX Actions inside an Effect

typescript

redux

ngrx

ngrx-effects

angular