Каков предполагаемый способ использования вычисленных сигналов вместе с селекторами 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

лучше, чем селектор, потому что

1. Его зависимости являются динамическими [1];
2. Полученный сигнал можно использовать непосредственно в шаблоне, и он позаботится об обнаружении изменений без необходимости|asyncили грязная проверка;
3. Зависимости рекурсивны – если внутриcomputed()вы вызываете некоторую функцию, которая также использует сигналы, тогда результирующий сигнал будет обновляться при обновлении сигнала в этой функции. И это может произойти где-то глубоко в стеке, если это происходит синхронно [2]. Это позволяет создавать очень гибкие и мощные вещи — производные сигналы, состоящие из производных сигналов.

Тем временем NgRx работает над интеграцией с Angular Signals:

• RFC: интеграция с Angular Signals и пакетами NgRx
• RFC: хранилище сигналов NgRx

---

[1], [2] — Вы можете прочитать больше об этой теме в моей бесплатной статье: Граф зависимостей в угловых сигналах.