如何在NgRx selector中获取其他reducer状态或嵌套使用selector

结论 #

完全可以在link模块的selector中使用其他reducer的状态，NgRx的createSelector天生支持多selector组合，这是它的核心设计特性之一。

实现方法 #

你只需要把已有的语言selector作为参数传入createSelector即可，投影函数会按顺序接收所有selector的返回结果，示例代码如下：

// 先导入已有的语言selector
import { getSelectedLanguageLanguage } from './你存放该selector的文件路径';

const getLinkFeatureState = createFeatureSelector<ILinkReducer>('link');

export const getLinkIsLinkDtoPricesDeliveryTimesSome = (index: number) => createSelector(
  getLinkFeatureState,
  // 直接传入其他模块的selector即可
  getSelectedLanguageLanguage,
  // 投影函数按顺序接收两个selector的返回值
  (linkState, selectedLanguage) => {
    // 这里的selectedLanguage就是你定义的ILanguage类型对象，根据需求取对应字段对比即可
    return linkState.linkDto.prices[index].deliveryTimes.some(d => d.iso === selectedLanguage.value)
  }
)

特性说明 #

• 可以传入任意数量的selector作为依赖，不管这些selector属于哪个feature模块，投影函数的入参顺序和传入的selector顺序完全对应
• 组合selector自带 memoize 缓存：只有当任意一个依赖的selector返回值发生变化时，才会重新执行投影函数计算结果，否则直接返回缓存值，性能开销极低
• 如果你的参数化selector（接收index参数的工厂函数）需要全局复用缓存，可以配合createSelectorFactory自定义缓存策略，普通场景下上述写法即可满足需求

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