NGXS状态管理：深入理解Selector工具函数-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00397/article/details/148575747

NGXS状态管理：深入理解Selector工具函数

store 🚀 NGXS - State Management for Angular 项目地址: https://gitcode.com/gh_mirrors/sto/store

引言

在NGXS状态管理库中，Selector（选择器）是最强大的功能之一。它们通过内置的记忆化机制提供了卓越的性能表现。然而，为了充分发挥Selector的潜力，我们通常需要将状态分解为更小的选择器单元，这些单元又会被其他选择器使用。本文将深入探讨NGXS提供的三种Selector工具函数，帮助开发者更高效地管理应用状态。

为什么需要Selector工具函数

在大型应用中，状态结构往往非常复杂。手动为每个状态属性创建选择器不仅繁琐，还会产生大量样板代码。NGXS提供的Selector工具函数旨在解决以下问题：

减少样板代码，提高开发效率
优化性能，确保选择器只在相关状态变化时重新计算
提供类型安全的状态访问
简化状态组合和派生状态的创建

1. createPropertySelectors：属性选择器工厂

基本用法

createPropertySelectors函数会自动为状态对象的每个属性创建一个对应的选择器。让我们通过一个动物园状态管理的例子来说明：

interface ZooStateModel {
  lions: string[];
  tigers: string[];
  bears?: string[];
}

@State<ZooStateModel>({
  name: 'zoo',
  defaults: {
    lions: [],
    tigers: []
  }
})
@Injectable()
export class ZooState {}

export class ZooSelectors {
  // 自动为每个状态属性创建选择器
  static slices = createPropertySelectors<ZooStateModel>(ZooState);
  
  // 使用属性选择器组合新选择器
  @Selector([ZooSelectors.slices.lions, ZooSelectors.slices.tigers])
  static getBigCatsCount(lions: string[], tigers: string[]) {
    return lions.length + tigers.length;
  }
}

组件中使用

@Component({
  template: `
    <h2>动物园统计</h2>
    <p>狮子数量: {{ lions().length }}</p>
    <p>老虎数量: {{ tigers().length }}</p>
  `
})
export class ZooComponent {
  lions = this.store.selectSignal(ZooSelectors.slices.lions);
  tigers = this.store.selectSignal(ZooSelectors.slices.tigers);
  
  constructor(private store: Store) {}
}

类型安全提示

当使用createPropertySelectors时，建议显式指定状态模型类型，特别是在状态类没有包含完整类型信息时。这可以确保选择器返回值的类型正确性。

2. createModelSelector：模型组合选择器

使用场景

当需要将多个不同来源的选择器组合成一个新的数据模型时，createModelSelector就派上用场了。这在跨模块状态组合时特别有用。

export class AppSelectors {
  static slices = createPropertySelectors<AppStateModel>(AppState);
  
  static dashboardData = createModelSelector({
    animals: ZooSelectors.slices.animals,
    visitors: VisitorSelectors.totalVisitors,
    weather: WeatherSelectors.currentWeather
  });
}

组件集成

@Component({
  template: `
    <div *ngIf="dashboardData() as data">
      <p>动物种类: {{ data.animals.length }}</p>
      <p>今日游客: {{ data.visitors }}</p>
      <p>天气状况: {{ data.weather }}</p>
    </div>
  `
})
export class DashboardComponent {
  dashboardData = this.store.selectSignal(AppSelectors.dashboardData);
  
  constructor(private store: Store) {}
}

性能考量

使用createModelSelector时，只有当任何输入选择器的值发生变化时，组合选择器才会重新计算。这种细粒度的更新机制可以显著提高应用性能。

3. createPickSelector：属性筛选选择器

核心功能

createPickSelector允许从状态对象中精确选择需要的属性，忽略其他不相关的属性变化。

export class ZooSelectors {
  static fullState = createSelector([ZooState], (state: ZooStateModel) => state);
  
  static exhibitAnimals = createPickSelector(fullState, ['lions', 'tigers']);
}

性能优势

这是三种工具函数中性能优化最显著的一个。假设我们的状态有10个属性，但组件只关心其中2个：

传统方式：任何状态变化都会触发组件更新
使用createPickSelector：只有关心的2个属性变化时才会触发更新

组件示例

@Component({
  template: `
    <div *ngIf="exhibitAnimals() as animals">
      <p>狮子: {{ animals.lions.join(', ') }}</p>
      <p>老虎: {{ animals.tigers.join(', ') }}</p>
    </div>
  `
})
export class ExhibitComponent {
  exhibitAnimals = this.store.selectSignal(ZooSelectors.exhibitAnimals);
  
  constructor(private store: Store) {}
}