如何解决从ngrx-entities store获取数据后排序代码未执行的问题？

问题描述 #

需从NgRx Entity Store获取数据并在前端实现三种排序方式（不想在reducer中处理），参考相关方案后遇到异常：

• 未添加排序代码时，可成功获取未排序数据，控制台正常输出
• 添加排序代码后，排序未生效，且排序后的console.log完全未触发，代码似乎未执行

未排序时可用代码：

sortPersnlByFunction(sortBy: string){
    this.filterDefault = false;
    this.filterByStatus = false;
    this.filterByFunction = true;
    this.zone.run(() => {
    this.store
      .pipe(select(selectAllPrsnls), map((prsnlList) => prsnlList))
      .subscribe(value => {
        this.Prsnl = Object.entries(value[1]).map((e) => ( e[1]  ));
        console.log("The Prsnl", this.Prsnl)
    });   
  })}

添加排序后的完整代码：

sortPersnlByFunction(sortBy: string){
    this.filterDefault = false;
    this.filterStatus = false;
    this.filterFunction = true;
    this.zone.run(() => {
    this.store
      .pipe(select(selectAllPrsnls), map((prsnlList) => prsnlList))
      .subscribe(value => {
        this.Prsnl = Object.entries(value[1]).map((e) => ( e[1]  ));
        this.sortedPrsnl = [...this.Prsnl].sort(
          (a, b) => a[sortBy].localCompare(b[sortBy]));
        console.log("The sorted", this.sortedPrsnl)
    });
    
  })}

注：sortBy是前端传入的字符串，对应Prsnl数据的属性，作为排序依据。

可能原因 #

1. 重复订阅未清理：每次调用排序方法都会新增store订阅，旧订阅未取消会导致逻辑冲突，后续订阅可能无法正常执行
2. zone.run包裹范围错误：将整个订阅逻辑包裹在zone.run中，可能引发Angular变更检测异常，阻断代码执行
3. 排序逻辑潜在报错：sortBy对应属性不存在、属性值为null/undefined时，调用localCompare会抛出异常，导致后续console.log无法执行
4. 数据结构处理错误：selectAllPrsnls返回的value[1]结构变化，导致Object.entries处理后得到空数组，或前面代码报错阻断后续逻辑

解决方案 #

1. 管理订阅避免重复触发 #

在组件中维护订阅实例，每次调用排序前取消旧订阅，组件销毁时清理：

// 组件类内定义订阅变量
private prsnlSubscription: Subscription | null = null;

sortPersnlByFunction(sortBy: string){
    this.filterDefault = false;
    this.filterStatus = false;
    this.filterFunction = true;

    // 取消旧订阅
    this.prsnlSubscription?.unsubscribe();

    this.prsnlSubscription = this.store
      .pipe(select(selectAllPrsnls))
      .subscribe(value => {
        this.Prsnl = Object.entries(value[1]).map(e => e[1]);
        
        // 捕获排序异常，避免阻断后续代码
        try {
          this.sortedPrsnl = [...this.Prsnl].sort((a, b) => {
            // 处理属性不存在或为空的情况
            const valA = a[sortBy]?.toString() || '';
            const valB = b[sortBy]?.toString() || '';
            return valA.localeCompare(valB);
          });
          console.log("The sorted", this.sortedPrsnl);
        } catch (err) {
          console.error("排序出错:", err);
          this.sortedPrsnl = [...this.Prsnl]; // 出错时返回原数组
        }
    });   
}

// 组件销毁时清理订阅
ngOnDestroy() {
    this.prsnlSubscription?.unsubscribe();
}

2. 调整zone.run使用范围 #

仅将变更UI的代码包裹在zone.run中，而非整个订阅逻辑：

sortPersnlByFunction(sortBy: string){
    this.filterDefault = false;
    this.filterStatus = false;
    this.filterFunction = true;

    this.prsnlSubscription?.unsubscribe();

    this.prsnlSubscription = this.store
      .pipe(select(selectAllPrsnls))
      .subscribe(value => {
        this.zone.run(() => {
          this.Prsnl = Object.entries(value[1]).map(e => e[1]);
          
          try {
            this.sortedPrsnl = [...this.Prsnl].sort((a, b) => {
              const valA = a[sortBy]?.toString() || '';
              const valB = b[sortBy]?.toString() || '';
              return valA.localeCompare(valB);
            });
            console.log("The sorted", this.sortedPrsnl);
          } catch (err) {
            console.error("排序出错:", err);
            this.sortedPrsnl = [...this.Prsnl];
          }
        });
    });   
}

3. 优化数据转换逻辑 #

检查selectAllPrsnls的定义，通常NgRx Entity的selectAll直接返回数组，无需取value[1]：

// 假设selector定义
export const selectAllPrsnls = createSelector(
  selectPrsnlState,
  fromPrsnl.selectAll // Entity Adapter的selectAll直接返回数组
);

// 组件中简化数据处理
this.Prsnl = value; // 替代Object.entries(value[1]).map(e => e[1])

4. 用RxJS操作符在管道内完成排序 #

将排序逻辑放到RxJS的map操作符中，更符合响应式编程规范：

sortPersnlByFunction(sortBy: string){
    this.filterDefault = false;
    this.filterStatus = false;
    this.filterFunction = true;

    this.prsnlSubscription?.unsubscribe();

    this.prsnlSubscription = this.store
      .pipe(
        select(selectAllPrsnls),
        map(prsnlList => {
          const prsnlData = Object.entries(prsnlList[1]).map(e => e[1]);
          return [...prsnlData].sort((a, b) => {
            const valA = a[sortBy]?.toString() || '';
            const valB = b[sortBy]?.toString() || '';
            return valA.localeCompare(valB);
          });
        })
      )
      .subscribe(sortedPrsnl => {
        this.sortedPrsnl = sortedPrsnl;
        this.Prsnl = [...sortedPrsnl];
        console.log("The sorted", this.sortedPrsnl);
      }, err => {
        console.error("数据流出错:", err);
      });   
}

内容的提问来源于stack exchange，提问作者Prenam