RxJS mergeMap не работает должным образом

Question

У меня есть этот кусок кода RxJS

this.listItems$ = this.store.select(EntityState.relationshipItems).pipe(
  map(fn => fn(12)),
  mergeMap(items => items),
  map(this.toListItem),
  toArray<ListItem>(),
  tap(x => console.log(x))
);

Использование mergeMap(items => items) Я пытаюсь "сгладить" массив, затем map каждый элемент к другому объекту, а затем преобразовать его обратно в массив.

Однако поток даже не достигает последнего tap. Я вижу, что вызывается функция toListItem, но не понимаю, почему она на этом останавливается.

---

Преобразование в

this.listItems$ = this.store.select(EntityState.relationshipItems).pipe(
  map(fn => fn(12)),
  map(items => items.map(this.toListItem)),
  tap(x => console.log(x))
);

заставляет это работать, но я хотел бы понять, почему вышеприведенный не работает.

Answer 1

Это потому, что this.store.select(...) - это Субъект, который никогда не завершается (если это так, вы можете выбрать данные только один раз, что не имеет смысла).

Однако, toArray собирает все выбросы от своего источника, и когда его источник завершает работу, он генерирует один массив. Но источником является this.store.select(...), который никогда не завершается, поэтому toArray никогда ничего не излучает.

Так что, вероятно, самый простой обходной путь - это просто реструктурировать вашу цепочку:

this.listItems$ = this.store.select(EntityState.relationshipItems).pipe(
  map(fn => fn(12)),
  mergeMap(items => from(items).pipe(
    map(this.toListItem),
    toArray<ListItem>(),
    tap(x => console.log(x))
  )),
);

Теперь источником является from, который завершается после итерации items, поэтому toArray получит полное уведомление и также выдаст свое содержимое.