Question

我使用NgRx实体为＆＃39; logs＆＃39;创建状态。 reducer由Log实体组成：EntityState<Log>。然后我想从我的Angular组件订阅几个Log实体。如果只有一个Log，我会使用：

this.store$
  .select(appStore => appStore.logs.entities[myLogId])
  .subscribe(log => someExpensiveOperation())

如果更改了其中一个实体，我如何选择多个实体并确保仅订阅一次？

Answer 1

听起来有点琐碎。我试过两个方向。

第一种是使用map运算符过滤列表。只要列表中的任何实体发生更改，就会调用该映射，因此您必须在其后面有一个运算符才能忽略重复项。由于每次您无法使用标准distinct*运算符对地图进行过滤，因此地图会创建新数组。我创建了一个名为distinctElements的自定义运算符，它基本上是distinctUntilChanged但是它对数组的元素而不是数组本身进行了引用检查。对于此示例，我假设您正在使用由实体适配器生成的selectAll选择器。它公开了所有实体的数组。

＆＃13;

const { Observable, BehaviorSubject } = rxjs;
const { startWith, pairwise, filter, map, tap } = rxjs.operators;

function distinctElements(){
    return (source) => source.pipe(
        startWith(null),
        pairwise(),
        filter(([a, b]) => a == null || a.length !== b.length || a.some(x => !b.includes(x))),
        map(([a, b]) => b)
    );
};

let state = [
  { id: 1, value: 'a' },
  { id: 2, value: 'b' },
  { id: 3, value: 'c' }
];
const store$ = new BehaviorSubject(state);

const ids = [1, 3];
store$.pipe(
  map(entities => entities.filter(entity => ids.includes(entity.id))),
  distinctElements()
).subscribe((entities) => { console.log('next', entities); });

setTimeout(() => {
  state = [...state, { id: 4, value: 'd' }];
  console.log('add entity (4)');
  store$.next(state);
}, 10);

setTimeout(() => {
  state[0].value = 'aa';
  state = [{...state[0]}, ...state.slice(1)];
  console.log('update entity (1)');
  store$.next(state);
}, 1000);

setTimeout(() => {
  state = [...state.slice(0, 1), ...state.slice(2)];
  console.log('remove entity (2)');
  store$.next(state);
}, 2000);

＆＃13;

<script src="https://unpkg.com/rxjs@rc/bundles/rxjs.umd.min.js"></script>

＆＃13;

第二个选项是为每个实体创建单独的observable，并对所有实体执行combineLatest。对于此示例，我假设您正在使用由实体适配器生成的selectEntities选择器。这个公开了一个可由实体的id。索引的对象。

＆＃13;

const { Observable, BehaviorSubject, combineLatest, timer } = rxjs;
const { startWith, pairwise, filter, map, debounce, distinctUntilChanged } = rxjs.operators;

function distinctElements(){
    return (source) => source.pipe(
        startWith(null),
        pairwise(),
        filter(([a, b]) => a == null || a.length !== b.length || a.some(x => !b.includes(x))),
        map(([a, b]) => b)
    );
};

let state = {
  1: { id: 1, value: 'a' },
  2: { id: 2, value: 'b' },
  3: { id: 3, value: 'c' }
};
const store$ = new BehaviorSubject(state);

const ids = [1, 3];
combineLatest(
  ids.map(id => store$.pipe(
    map(entities => entities[id]),
    distinctUntilChanged()
  ))
).pipe(
  debounce(() => timer(0))
).subscribe((entities) => { console.log('next', entities); });

setTimeout(() => {
  state = { ...state, 4: { id: 4, value: 'd' } };
  console.log('add entity (4)');
  store$.next(state);
}, 10);

setTimeout(() => {
  state[1].value = 'aa';
  state = { ...state, 1: {...state[1]} };
  console.log('update entity (1)');
  store$.next(state);
}, 1000);

setTimeout(() => {
  state = { ...state };
  delete state[2];
  console.log('remove entity (2)');
  store$.next(state);
}, 2000);

＆＃13;

<script src="https://unpkg.com/rxjs@rc/bundles/rxjs.umd.min.js"></script>

＆＃13;

两者都以不同的方式完成同样的事情。我还没有做过任何类型的性能测试，看看哪个更好但是它可能取决于您选择的实体数量相对于列表的总大小。如果我不得不猜测我会认为第一个更有效率。

关于选择组合多个切片的投影数据切片，您可以参考以下答案：Denormalizing ngrx store- setting up selectors?

选择由NgRx Store中的多个实体组成的切片

1 个答案: