Rxjs 实现实时邮件答案

【问题标题】：Rxjs to implement a live mailingRxjs 实现实时邮件
【发布时间】：2020-07-30 22:46:15
【问题描述】：

我的代码很简单：
在页面加载时，我加载了用户的消息，然后我想合并所有新的传入消息。

   this.me$ = this.store
        .pipe(map((state: AppState) => state.auth));

    const allMessages$ = this.me$
        .pipe(mergeMap((me: User) => this.messageService.getMessage$(me.username)));

    const allNewMessages$: Observable<Message[]> = this.me$
        .pipe(mergeMap((me: User) => this.messageService.newMessage$(me.username)))
        .pipe(scan((messages: Message[], newMessage: Message) => messages.concat(newMessage), []))
        .pipe(startWith([]))

    this.messages$ = combineLatest([allMessages$, allNewMessages$])
        .pipe(map(([allMessages, allNewMessages]) => allMessages.concat(allNewMessages)))
        .pipe(map((messages: Message[]) => [...messages].sort((d1, d2) => new Date(d1.date) < new Date(d2.date) ? -1 : 1)));

问题是当新消息发射时，allNewMessages$ observable 发射如下：

events[m1, m2, m3] -> emitted[[m1], [m1, m1, m2], [m1, m1, m2, m1, m1, m2, m3]]

我想要类似的东西：

events[m1, m2, m3] -> emitted[[m1], [m1, m2], [m1, m2, m3]]

谢谢

【问题讨论】：

您能创建一个 StackBlitz 吗？如果我只考虑第 3 段段落，那么一切都应该按预期进行。此外，在您的图表中，events[m1] 是me$ 发出的消息，emitted[[m1]] 是allNewMessages$ 发出的消息？

标签： javascript typescript rxjs reactive-programming

【解决方案1】：

我终于找到了解决办法。我必须将我的mergeMap 替换为switchMap，这样Http observable 就可以很好地取消订阅并避免多次混乱的调用。

【讨论】：