在角度服务中使用选择器从 NgRx 存储读取并使用该值调用另一个函数的正确方法是什么?

Question

我有一个像这样定义的 NgRx 选择器

selectedRows = createSelector(
someState,
state => state[fromDataSource.someSliceKey].selectedRows);

每当在组件 (UI( 上选择某些项时，selectedRows都会使用最新的选定项进行更新。 现在，另一个组件上还有另一个按钮，它调用角度服务来执行某些操作，最终调用一堆外部API。我想使用角度服务上上述定义的选择器读取存储在selectedRows中的值并进行这些 API 调用。

正确的方法是什么？

我正在考虑的方法之一是订阅这样的选择器：

const selectedRows$ = this.store.pipe(
select(fromSelectors.selectedRows)
).subscribe(data => {
// call other functions and dispatch actions to call external API
});

由于我在这里调用订阅，如何取消订阅？有没有办法做到这一点而不必打电话订阅？

更新：发现了另一个类似的问题 - 如何使用状态的当前值调度操作？

Answer 1

这似乎是NgRx Effects的一个很好的用例：

myEffects$ = createEffect(
() => actions$.pipe(
ofType(actionDispatchedWhenButtonPressed)
withLatestFrom(this.store.pipe(select(selectedRows))),
switchMap(([action, selectedRows]) => /* ...API calls... */)
)
)

Answer 2

NgRx就像是 RxJS 的包装器，所以所有的 Rxjs 运算符都可以顺利地使用 NgRx

如果您调用的不是单个外部 API，而是许多外部 API，那么没关系，只是不要忘记使用运算符take(1)否则每次更新selectRows都会调用订阅。 但如果你也想返回，那么开关地图

return this.store.pipe(select(fromSelectors.selectedRows),take(1))
.pipe(swichMap(()=>//your API call)