如何将Angular Signal值传入NgRx Selector及手动缓存必要性问题

问题1：当 id 为 Signal<string> 类型时，如何实现参数化 Selector 的调用？ #

原有的参数化 Selector 写法（适用于 NgRx v15 及更早版本）：

export const selectCustomer = (id: string) =>
  createSelector(selectCustomers, (customers) => customers[id]);

你之前通过 toObservable/toSignal 转换的写法属于绕路方案，且受限于上下文注入。在 NgRx v16 中，利用原生支持 Angular Signals 的特性，可以直接通过 computed 结合 Store 的 signal() 方法实现，无需转换：

import { computed } from '@angular/core';
import { Store } from '@ngrx/store';

// 保留原参数化 Selector
export const selectCustomer = (id: string) =>
  createSelector(selectCustomers, (customers) => customers[id]);

// 组件/服务中使用
constructor(private store: Store) {}

// 假设 id 是 Signal<string> 类型
id: Signal<string>;

// 直接创建计算信号获取目标客户
const customerSignal = computed(() => {
  // 每次 id 变化时，调用 store.signal 获取对应选择器的信号值
  return this.store.signal(selectCustomer(this.id()))();
});

核心逻辑： #

• store.signal(selector) 会返回对应选择器的信号版本，自动响应 Store 状态变化
• computed 监听 id 信号的变化，当 id 更新时自动重新执行选择器调用，无需手动订阅流

问题2：手动缓存（如 lodash.memoize）是否不再必要？ #

这类手动缓存依然有存在的价值，但并非强制要求，核心原因如下：

原写法中，每次调用 selectCustomer(id) 都会创建一个全新的 Selector 实例，每个实例都有独立的内部缓存机制。如果同一个 id 被多次调用（比如多个组件或同一组件内多次使用），会生成大量重复的 Selector，造成不必要的内存占用和计算开销。

手动缓存（如 lodash.memoize）的作用是缓存相同 id 对应的 Selector 实例，让同一个 id 复用同一个 Selector，从而充分利用其内部的 memoization 特性，避免重复计算。

NgRx v16 中的替代方案： #

你可以不用 lodash，改用 NgRx 原生提供的 memoize 工具函数（从 @ngrx/store 导入），效果一致：

import { memoize } from '@ngrx/store';

export const selectCustomer = memoize((id: string) =>
  createSelector(selectCustomers, (customers) => customers[id])
);

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