NgRx Signals 中处理不可冻结对象的最佳实践

背景介绍

在使用NgRx Signals状态管理库时，开发者可能会遇到一个常见问题：当尝试将包含ArrayBufferViews或其他不可冻结对象的复杂数据结构存入状态时，会抛出"Cannot freeze array buffer views with elements"错误。这种情况特别容易出现在集成第三方库（如OpenLayers地图库）时，因为这些库的内部实现往往使用了浏览器原生的ArrayBufferViews等数据结构。

问题本质

NgRx Signals在内部会对状态对象执行深度冻结(deepFreeze)操作，这是为了确保状态不可变性。然而，某些JavaScript对象（如ArrayBufferViews、WebGL上下文等）由于其特殊性质，无法被冻结。当这些对象作为状态的一部分时，就会导致冻结操作失败。

解决方案

1. 避免将不可冻结对象存入状态

最佳实践是将这些对象视为"外部系统"，不将其作为状态的一部分。对于OpenLayers这样的库：

// 不推荐 - 将整个map实例存入状态
interface MapState {
  map: Map | null;
}

// 推荐 - 只存储必要的状态信息
interface MapState {
  mapConfig: MapConfig;
  layerVisibility: Record<string, boolean>;
}

2. 使用withProps处理不可冻结对象

NgRx Signals提供了withProps功能，专门用于处理这类情况：

export const MapStore = signalStore(
  { providedIn: 'root' },
  withState({
    layerVisibility: {},
    mapConfig: null
  }),
  withProps(() => ({
    map: new Map(),  // 不会被冻结的实例
    oLCesium: new OLCesium()
  })),
  // ...其他功能
);

3. 状态与实例分离

将可变实例与不可变状态明确分离：

class MapService {
  private mapInstance: Map;
  private store = inject(MapStore);
  
  initMap() {
    this.mapInstance = new Map();
    // 监听地图变化并更新状态
    this.mapInstance.on('moveend', () => {
      this.store.updateViewport(this.mapInstance.getView().getCenter());
    });
  }
}

设计原则

1. 单一数据源：确保状态是唯一真实数据源，派生实例从状态生成
2. 最小化状态：只存储必要的最小状态，不存储派生数据或实例
3. 明确职责：状态管理负责数据，服务类负责实例管理

性能考虑

当处理大型数据集（如地图图层的几何数据）时：

1. 使用轻量化的状态表示（如只存储要素ID和可见性）
2. 对于大数据，考虑使用引用而不是完整复制
3. 利用Angular的变更检测策略优化性能

总结

NgRx Signals的状态不可变性要求开发者对状态设计有更严格的规划。通过遵循"状态最小化"原则和合理使用withProps，可以既享受状态管理的好处，又能集成各种第三方库。关键在于区分哪些是真正的应用状态，哪些是临时的UI状态或外部系统实例。