NgRx如何使用单个selector监听多个属性变更触发订阅

需求背景 #

开发接入NgRx Store的Angular响应式表单应用时，无需订阅完整Store状态，仅需要监听name、city指定字段的变更。
初始编写的selectFormNameCity选择器仅在单个属性变更时才触发订阅，尝试在选择器中使用OR、AND运算符编写判断逻辑，运行效果均不符合预期。
最终要实现的效果：通过单个selectFormNameCity选择器，当name或city任意一个值发生变更时，组件都能接收到对应的订阅通知。

初始实现代码 #

import { createFeatureSelector, createSelector } from '@ngrx/store';

export const selectForm = createFeatureSelector<any>('form');
export const name = createSelector(selectForm, (state) => state.info.name);
export const city = createSelector(selectForm, (state) => state.info.city);

export const selectFormNameCity = createSelector(name, city, (name, city) => {
  return { name, city };
});

问题根因 #

NgRx的createSelector默认自带记忆（memoization）机制，会对传入的所有输入选择器结果做引用相等校验：只有当所有输入选择器的返回值全部和上一次计算结果不一致时，才会重新执行投影函数，向订阅者推送新值。
上述写法每次投影都返回新创建的普通对象{name, city}，当只有单个字段变更时，默认记忆校验逻辑会判定输入未满足全部变更条件，因此不会触发订阅推送。

可行实现方案 #

方案1：直接关闭组合选择器的记忆能力（实现成本最低） #

创建选择器时关闭记忆功能，只要任意监听字段的值发生变化，就会重新执行投影、推送更新到订阅者：

import { createFeatureSelector, createSelector } from '@ngrx/store';

export const selectForm = createFeatureSelector<any>('form');
export const name = createSelector(selectForm, (state) => state.info.name);
export const city = createSelector(selectForm, (state) => state.info.city);

export const selectFormNameCity = createSelector({
  inputs: [name, city],
  projector: (name, city) => ({ name, city }),
  memoize: false // 关闭记忆，任意输入变化都触发更新
});

方案2：自定义相等校验逻辑（保留记忆性能优势） #

如果不想完全关闭记忆能力，可以自定义记忆的比较规则，只要name或city任意一个值和上一次结果不同，就判定为状态变更，触发推送：

import { createFeatureSelector, createSelector } from '@ngrx/store';

// 自定义值比较逻辑，监听基础类型字段时可直接用===判断
const isValueChanged = (prev: unknown, curr: unknown) => prev !== curr;

export const selectForm = createFeatureSelector<any>('form');
export const name = createSelector(selectForm, (state) => state.info.name);
export const city = createSelector(selectForm, (state) => state.info.city);

export const selectFormNameCity = createSelector({
  inputs: [name, city],
  projector: (name, city) => ({ name, city }),
  memoizeOptions: {
    isEqual: (prevInputs, currInputs) => {
      const [prevName, prevCity] = prevInputs;
      const [currName, currCity] = currInputs;
      // 两个字段都没变化才判定为相等，否则触发更新
      return !isValueChanged(prevName, currName) && !isValueChanged(prevCity, currCity);
    }
  }
});

提示：如果监听字段包含对象、数组等引用类型，可补充深比较逻辑，避免不必要的更新触发。

内容的提问来源于stack exchange，提问作者jay