combineLatest不会发出最新值

Posted 2021-04-18

我很难绕开为什么combineLatest没有返回最新值。这个例子有点做作，但至少它说明了我的问题。请注意，当color正确时，来自combineLatest observable的subject.value的值返回先前的值。就像color$观察者没有发出的那样。

import { map, distinctUntilChanged, combineLatest } from 'rxjs/operators'
import { Observable } from 'rxjs/observable';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

const main$ = new BehaviorSubject({color: 'red'});

const color$ = main$.pipe(
  map(state => state.color),
)

main$.pipe(
  combineLatest(color$)
)
.subscribe(([state, color]) => {
  console.log(state, color, main$.value.color);
})

main$.next({
    color: 'yellow'
});

实际产出

{color: "red"} "red" "red"

{color: "yellow"} "red" "yellow"

{color: "yellow"} "yellow" "yellow"

预期产出

{color: "red"} "red" "red"

{color: "yellow"} "yellow" "yellow"  // Notice middle value is yellow

{color: "yellow"} "yellow" "yellow"

https://stackblitz.com/edit/combine-latest-issue

如果有人可以帮助解释最新情况，并提供一种解决方法或正确的方式来考虑在rxjs，我会很感激。

答案

可视化正在发生的事情而不是单词可能是有用的：

main$     R--------------------Y------------------------------

color$    -------R-----------------------Y---------------------

output    -----[R,R]---------[Y,R]-----[Y,Y]------------------

如果你使用zip而不是combineLatest，你会更接近你的期望。如果你使用zip，请看下面会发生什么：

main$     R--------------------Y------------------------------

color$    -------R-----------------------Y---------------------

output    -----[R,R]-------------------[Y,Y]------------------

另一答案

首先更新main$，它作为变化输入combineLatest()但不触发输出，因为color$没有发出值。然后color$计算它的新值，发出它，现在有两个值可供combineLatest()使用，第一行文本输出。

然后main$更新到{color: "yellow"}，进入combineLatest()，它取main$的最新值和color$的最新值（仍然是"red"，并触发{color: "yellow"} "red" "yellow"的新输出。

最后，color$更新并触发combineLatest()发出最后一行输出。

另一答案

使用Observable.zip而不是combineLatest，它会从主题中发出非常接近的值。它按预期对我有用。