ngrx/component-store 状态改变时触发效果

Question

我有一个带有@ngrx/component-商店的Angular应用。

当用户从设备列表中选择一个条目时，我现在将其存储到组件商店

  component.ts:
  onDeviceClicked(device: DeviceTO) {
    this.inspectionStore.setDeviceSelected(device);
  }

  inspectionStore.ts
  readonly setDeviceSelected = (data: DeviceTO) =>  {this.patchState({selectedDevice: data})};

现在，用户已经选择了设备，应触发副作用。但是，我不确定当状态的一部分变化时，如何触发副作用。

更新状态时我需要这样做吗？

  readonly setDeviceSelected = (data: DeviceTO) =>  {
    this.patchState({selectedDevice: data});
    this.tiggerMySideEffect(data);
  };

还是我可以告诉副作用聆听更改的另一种方式？

Answer 1

由于效果是自动订阅的，因此不需要外部触发器（通过显式调用效果）。效果可以直接对状态变化做出反应。因此，以下内容（作为示例）确实有效：

public readonly selectedDevice$ = this.select(({ selectedDevice }) => selectedDevice);

private readonly effectOnSelectedDevice = this.effect(_ => this.selectedDevice$.pipe(switchMap(selectedDevice => this.service.doSideEffect(selectedDevice))));

此处可以使用任何可观察的内容（例如 this.store 或与 combineLatest 的组合等）。

更进一步，您可以拥有一系列效果（从外部隐藏） - 对先前效果执行的状态更改做出反应以优化数据（对后端进行不同的调用）。

它们都不需要明确的手动触发。

Answer 2

您可以在更新状态后立即从OnDeviceClick中发射效果。

具有类似情况的示例：

指南： https://next.ngrx.io/guide/guide/component-store/usage

Answer 3

示例代码

选择器：

public readonly filter$ = this.select(({ filter }) => filter);

订阅：

public ngrxOnStateInit(): void {
    this.filter$.pipe(takeUntil(this.destroy$), debounceTime(17)).subscribe(() => this.myEffect());
}

然后您可以在效果内触发状态更改，如下所示