Mini-Rx SignalStore 中状态获取器触发副作用的问题分析与解决方案

Mini-Rx SignalStore 中状态获取器触发副作用的问题分析与解决方案

问题背景

在 Mini-Rx 项目的 SignalStore 模块中，ComponentStore 和 FeatureStore 是两种核心的状态管理工具。开发者在使用过程中发现了一个意外行为：当通过状态获取器（getter 方法）访问当前状态时，会意外触发 Angular 的 effect 机制。

问题现象

正常情况下，状态获取器应该是一个纯函数，仅负责返回当前状态的快照，不应该产生任何副作用。然而在 Mini-Rx 的实现中，状态获取器的调用却会触发 Angular 的响应式 effect 系统。

这个问题在使用 ComponentStore 时尤为明显，表现为：

• 在 effect 内部访问状态时
• 在模板绑定中访问状态时
• 在计算属性中访问状态时

都会导致 effect 被不必要地重新执行。

技术分析

Angular 的响应式机制

Angular 的响应式系统基于信号（Signal）概念构建，其中 effect 是一种特殊的反应式操作，它会在其依赖的信号发生变化时自动重新执行。系统会自动跟踪 effect 内部访问的所有信号。

Mini-Rx 的状态获取实现

在 Mini-Rx 的 ComponentStore 和 FeatureStore 中，状态获取器直接暴露了内部的信号值，而没有使用 Angular 提供的 untracked 机制。这导致当 effect 内部访问状态时，Angular 的响应式系统会将此访问记录为依赖关系。

解决方案

使用 untracked 包装

正确的做法是使用 Angular 提供的 untracked 函数来包装状态获取操作。untracked 的作用是临时禁用响应式跟踪，确保在获取状态值时不会建立不必要的依赖关系。

实现改进

对于 ComponentStore 的状态获取器，改进后的实现应该是：

get state() {
  return untracked(() => this._state());
}

同样地，FeatureStore 的状态获取器也需要类似的修改。

影响范围

这个修复将影响以下场景：

1. effect 内部的状态访问不再导致不必要的重新执行
2. 计算属性中的状态访问更加高效
3. 模板绑定中的状态访问行为更加符合预期

最佳实践

开发者在使用 Mini-Rx 的状态管理时，应当注意：

• 状态获取器仅用于获取当前状态快照
• 如果需要响应式地跟踪状态变化，应该使用 select 方法或直接观察信号
• 在 effect 中频繁访问状态时，考虑使用 untracked 来优化性能

总结

这个问题的修复使得 Mini-Rx 的状态管理行为更加符合直觉和预期，避免了不必要的 effect 触发，提升了应用性能。它也提醒我们在实现响应式系统时，需要仔细考虑各种访问场景下的行为表现，确保核心原语的语义清晰明确。