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

Question

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

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

只要在组件 (UI) 上选择了某些项目，selectedRows 就会更新为最新的选定项目。现在另一个组件上有另一个按钮调用 angular 服务来执行一些操作，最终调用一堆外部 APIs。我想在 angular 服务上使用上面定义的选择器读取存储在 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 就像是 RxJS 的包装器，所以所有的 Rxjs 操作符都可以顺利地与 NgRx 一起工作

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

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

Answer 2

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

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

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

What is the correct way to read from NgRx store using selector in an angular service and use the value to call another function?

rxjs

ngrx

angular