NgRx Signals 新特性：withProps 功能解析

背景介绍

NgRx Signals 作为 Angular 状态管理的重要工具，正在不断演进以满足开发者多样化的需求。最新提出的 withProps 功能将为 SignalStore 带来更灵活的静态属性管理能力，这是对现有状态管理功能的重要补充。

withProps 功能详解

withProps 将成为 SignalStore 的基础功能之一，它允许开发者在 Store 中定义静态属性或 Observable 对象。这一特性为状态管理带来了三个显著优势：

1. Observable 转换支持：可以直接将 Signal 转换为 Observable 并作为 Store 成员
2. 依赖集中管理：可以在一个地方统一声明所有服务依赖
3. 跨功能配置共享：特别适合库作者在不同功能间共享相同配置

使用场景示例

基本用法

export const BooksStore = signalStore(
  withEntities<Book>(),
  withRequestStatus(),
  withProps(({ isFulfilled }) => ({
    fulfilled$: toObservable(isFulfilled).pipe(filter(Boolean)),
  })),
);

依赖管理

export const MyStore = signalStore(
  withProps(() => ({
    service1: inject(Service1),
    service2: inject(Service2),
  })),
  withMethods(({ service1, service2 }) => ({
    method1() {
      service1.foo();
    },
    method2() {
      service2.bar();
    },
  }))
);

库开发场景

const SOURCE = Symbol('SOURCE');

function withSource(source: string) {
  return signalStoreFeature(withProps({ [SOURCE]: source }));
}

export const BooksStore = signalStore(
  withSource('BooksStore'),
  withDevtools(),
  withEvents({
    loadedSuccess: props<{ books: Book[] }>(),
    loadedFailure: props<{ error: string }>(),
  })
);

技术实现细节

withProps 将提供两种签名方式：

1. 直接对象形式：withProps({ foo: 'bar' })
2. 工厂函数形式：withProps(() => ({ foo: 'bar' }))

关键实现要点包括：

• 工厂函数可以访问先前定义的状态 Signal、计算属性和其他属性
• withComputed、withMethods 和 withHooks 都可以访问这些预定义的属性
• 属性类型不受限制，可以是任意值

设计考量

关于命名，社区提出了 withStatic 和 withExplicit 等替代方案，但最终选择了 withProps，因为它更符合现有 API 的命名惯例。这一设计决策考虑了以下因素：

1. 与现有功能的命名一致性
2. 对开发者心智模型的友好性
3. 功能的通用性和扩展性

实际应用价值

withProps 的引入将解决多个实际问题：

1. 避免了在 withMethods 中使用 Proxy 的 hack 方案
2. 为跨模块状态共享提供了更优雅的解决方案
3. 支持更灵活的状态组合方式
4. 改善了大型应用中状态管理的可维护性

总结

withProps 功能的加入将使 NgRx Signals 的状态管理能力更加完备，为复杂应用场景提供了更强大的工具。这一特性特别适合需要精细控制状态、处理复杂依赖关系或开发可复用状态管理库的高级场景。随着 Angular 信号机制的不断成熟，这类增强功能将帮助开发者构建更健壮、更易维护的前端应用。