将计算信号与 ngrx 选择器一起使用的预期方式是什么以及将逻辑放在哪里？

Question

我正在使用 Angular 16，刚刚开始使用信号。这些使得与 ngrx 的合作变得更好。当转变时，我发现自己遇到了一些可以抽象为这样的东西：

const state = {
 someArray: [1, 5, 7]
}

export const selectArray = createSelector(
  state,
  (state) => state.someArray
);

export const selectFirst = createSelector(
  selectArray,
  (someArray) => someArray[0]
);

export const selectLast = createSelector(
  selectArray,
  (someArray) => someArray[state.someArray.length-1]
);

export const selectLastMinusFirst = createSelector(
  [selectFirst, selectLast],
  (first, last) =>
    last - first
);

现在有了信号，就可以在想要使用它的组件中使用计算信号来重写，如下所示：

const someArray: Signal<number[]> = this.store.selectSignal(Selectors.SelectArray)
const first: Signal<number> = computed(() => someArray()[0]);
const last: Signal<number> = computed(() => someArray()[state.someArray.length-1]);
const lastMinusFirst: Signal<number> = computed(() => last() - first());

甚至使用信号效果：

const first = 0;
const last = 0;
const lastMinusFirst = 0;

const someArray: Signal<number[]> = this.store.selectSignal(Selectors.SelectArray)

constructor() {
  effect(() => {
    if(someArray().length) {
      this.first = someArray()[0];
      this.last = someArray()[someArray().length - 1];
      this.lastMinusFirst = this.last - this.first;
    }
  });
}

这样做的目的是什么？计算信号是否像他们提到的惰性求值和记忆一样更有效？

Answer 1

computed()

比选择器更好，因为

1. 它的依赖是动态的[1]；
2. 结果信号可以直接在模板中使用，并且将负责变化检测，而无需

   |async

   或脏检查；
3. 依赖关系是递归的 - 如果在

   computed()

   内部调用某个也使用信号的函数，那么当该函数中的信号更新时，结果信号也会更新。这可能发生在堆栈深处的某个地方，只要它同步发生 [2]。它允许创建非常灵活和强大的东西 - 派生信号，由派生信号组成。

同时，NgRx 正在致力于与 Angular Signals 集成：

• RFC：与 Angular Signals 和 NgRx 包集成
• RFC：NgRx SignalStore

---

[1]、[2] - 您可以在我的免费文章中阅读有关此主题的更多信息：角度信号中的依赖图