NGXS状态管理：深入理解映射子状态(Mapped Sub States)-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00221/article/details/148575737

NGXS状态管理：深入理解映射子状态(Mapped Sub States)

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

概念解析

在NGXS状态管理库中，映射子状态(Mapped Sub States)是一种强大的功能，它允许开发者将多个动态选择器合并为一个，从而优化状态选择和性能表现。这种技术特别适合处理复杂的状态树和需要组合多个状态片段的情况。

基础示例分析

让我们从一个简单的动物动物园状态开始：

interface Animal {
  type: string;
  age: string;
  name: string;
}

@State<Animal[]>({
  name: 'animals',
  defaults: [
    { type: 'zebra', age: 'old', name: 'Ponny' },
    { type: 'panda', age: 'young', name: 'Jimmy' }
  ]
})
@Injectable()
export class ZooState {
  // 获取特定年龄的熊猫
  static getPandas(age: string) {
    return createSelector([ZooState], (state: Animal[]) => {
      return state.filter(animal => animal.type === 'panda' && animal.age === age);
    });
  }

  // 获取特定年龄的斑马
  static getZebras(age: string) {
    return createSelector([ZooState], (state: Animal[]) => {
      return state.filter(animal => animal.type === 'zebra' && animal.age === age);
    });
  }

  // 合并获取熊猫和斑马
  static getPandasAndZebras(age: string) {
    return createSelector(
      [ZooState.getPandas(age), ZooState.getZebras(age)],
      (pandas: Animal[], zebras: Animal[]) => {
        return [pandas, zebras];
      }
    );
  }
}

关键点解析

动态选择器：getPandas和getZebras都是动态选择器，它们接受参数(age)来过滤结果。
选择器合并：getPandasAndZebras展示了如何将两个选择器合并为一个，它接收两个选择器的结果作为输入，然后返回组合后的结果。
记忆化(Memoization)：NGXS会自动记忆选择器的结果，只有当输入状态发生变化时才会重新计算，这大大提高了性能。

进阶场景：多动物园管理

在实际应用中，状态往往更加复杂。下面是一个管理多个动物园的示例：

interface ZooStateModel {
  [id: string]: {
    animals: Animal[];
    ageFilter: string;
  };
}

@State<ZooStateModel>({
  name: 'animals',
  defaults: {
    zoo1: {
      ageFilter: 'young',
      animals: [
        { type: 'zebra', age: 'old', name: 'Ponny' },
        { type: 'panda', age: 'young', name: 'Jimmy' }
      ]
    }
  }
})
@Injectable()
export class ZooState {
  // 获取指定动物园的所有动物
  static getZooAnimals(zooName: string) {
    return createSelector([ZooState], (state: ZooStateModel) => state[zooName].animals);
  }

  // 获取指定动物园的年轻熊猫(带记忆功能)
  static getPandas(zooName: string) {
    return createSelector([ZooState.getZooAnimals(zooName)], (state: Animal[]) => {
      return state.filter(animal => animal.type === 'panda' && animal.age === 'young');
    });
  }

  // 获取指定动物园的年轻熊猫(不带记忆功能)
  static getPandasWithoutMemoize(zooName: string) {
    return createSelector([ZooState], (state: ZooStateModel) => {
      return state[zooName].animals.filter(
        animal => animal.type === 'panda' && animal.age === 'young'
      );
    });
  }
}

性能优化分析

记忆化的重要性：
- getPandasWithoutMemoize直接监听整个ZooState，任何状态变化都会触发重新计算
- getPandas只监听getZooAnimals的结果，只有当指定动物园的动物列表变化时才会重新计算
状态变化传播：
- 使用getPandasWithoutMemoize时，即使只是修改了年龄过滤器(ageFilter)，也会触发重新计算
- 使用getPandas时，只有当动物列表实际变化时才会触发重新计算