4

我有一个角度应用程序，它使用 NGRX 作为来自 API 的数据的状态存储。

应用程序中的主要数据是库存项目的集合。每个项目都具有键控到子集合的属性。（即，manufacturerId 被键入制造商的集合等。）我正在使用 ngrx-entity 以便能够索引集合。

我想以非规范化的方式在屏幕上的网格中显示这些数据（显示制造商名称而不是 id），然后允许它们按这些列中的任何一个进行排序。

这里的诀窍是，我需要按子集合中的数据进行排序，并且该子集合本身就是一个可观察的流。整个过程中唯一的“订阅”是在带有“异步”管道的 HTML 标记中——我计划保持这种状态。

我希望能够动态应用排序字段和排序方向，但我不太确定如何有效地做到这一点。我已经创建了这个stackblitz 示例，说明我现在是如何工作的。但是，该示例仅显示了 2 个子字段，并且我还有另外六个字段可供排序。代码可能会变得相当混乱。

另外，在某些时候，我也会为此添加某种过滤。

我考虑过修改 API 以返回非规范化的数据，但这似乎不太理想，因为存在数据完整性问题。

这是 stackblitz 现在的代码。我正在寻找一些反馈，以使其变得更好。

import { of, BehaviorSubject, timer } from 'rxjs'; 
import { map, combineLatest, switchMap } from 'rxjs/operators';

const manufacturers = {
  1: { id: 1, name: 'Acme' },
  2: { id: 2, name: 'Swift' },
  3: { id: 3, name: 'Baker' }
};

const styles = {
  21: { id: 21, code: 'Bridgeport' },
  22: { id: 22, code: 'Summit' },
  23: { id: 23, code: 'Anderson' },
  24: { id: 24, code: 'Saturn' }
};

const couplerTypes = {
  1: { id: 1, name: 'Barringer' },
  2: { id: 2, name: 'Waldorf' }
};

const inventory = [
  { id: 123, manufacturerId: 1, styleId: 21, couplerTypeId: 1},
  { id: 124, manufacturerId: 2, styleId: 21, couplerTypeId: 1},
  { id: 125, manufacturerId: 1, styleId: 23, couplerTypeId: 2},
  { id: 126, manufacturerId: 3, styleId: 24, couplerTypeId: 2},
  { id: 127, manufacturerId: 3, styleId: 22, couplerTypeId: 1},
  { id: 128, manufacturerId: 1, styleId: 22, couplerTypeId: 2},
  { id: 129, manufacturerId: 3, styleId: 24, couplerTypeId: 2},
  { id: 130, manufacturerId: 2, styleId: 21, couplerTypeId: 1},
  { id: 131, manufacturerId: 2, styleId: 21, couplerTypeId: 1},
  { id: 132, manufacturerId: 1, styleId: 24, couplerTypeId: 2},
]

// Assume these four collections are coming from an NGRX store
const manufacturers$ = of(manufacturers);
const styles$ = of(styles);
const couplerTypes$ = of(couplerTypes);
const inventory$ = of(inventory);

// Sort functions
const sortAscending = (one, two) => (one > two ? -1 : 1);
const sortDescending = (one, two) => (one > two ? 1 : -1);

// Start with sort descending
const sortDirection$ = new BehaviorSubject<any>(sortDescending);

// An observable of a function that sorts by manufacturer name combined with the sort direction
const manufacturersSort$ = manufacturers$.pipe(
  combineLatest(sortDirection$),
  map(([manufacturers, sortDirection]) => {
    return (one, two) => sortDirection(
      manufacturers[one.manufacturerId].name,
      manufacturers[two.manufacturerId].name);
  }));

// An observable of a function that sorts by style code combined with the sort direction
const stylesSort$ = styles$.pipe(
  combineLatest(sortDirection$),
  map(([styles, sortDirection]) => {
    return (one, two) => sortDirection(
      styles[one.styleId].code,
      styles[two.styleId].code);
  }));

// A stream of a stream of sort functions
const sortFunction$ = new BehaviorSubject<any>(manufacturersSort$);

// The combination of the inventory and the sort function
const sortedItems$ = sortFunction$.pipe(
  switchMap(innersort$ => innersort$.pipe(
    combineLatest(inventory$),
    switchMap(([innersort, items]) => {
      return of(items.sort(innersort));
    }),
  ))
)

// SHow me the output
timer(1000).subscribe(() => {
  sortDirection$.next(sortAscending);
  timer(1000).subscribe(() => {
    sortFunction$.next(stylesSort$);
    timer(1000).subscribe(() => {
      sortDirection$.next(sortDescending);
    });
  });
});

sortedItems$.subscribe(items => {
  items.map(item =>console.log(`id: ${item.id}, manufacturerId: ${item.manufacturerId}, styleId: ${item.styleId}, couplerTypeId: ${item.couplerTypeId}`));
  console.log('--------------------');
});
4

0 回答 0