RxJS技术问题：合并流并获取其中一个Observable的最新值

你提到有两个无关的Observable，想要同时监听它们，任意流触发时都获取userQuery$的最新值，同时保持代码DRY。你的当前实现思路存在问题，我来帮你拆解问题并给出正确的写法：

现有代码的问题 #

看你给出的代码片段：

/* observing a change in the query values */ 
var userQuery$ = store$.pipe(select(fromUserStore.getUserQuery)); 
/* always reload the users when navigation occurs */ 
var navigationEvents$ = router.events.filter( 
  event => event instanceof NavigationEnd && (event as NavigationEnd).url.endsWith("manage-users") 
); 
navigationEvents$ 
  .pipe(withLatestFrom(userQuery$), merge(userQuery$)) 
  .subscribe((query: QueryDefinition) => store$.dispatch(new FetchUsers(query)) );

这里有两个核心问题：

1. 数据类型混乱：withLatestFrom(userQuery$)会把navigationEvents$的事件对象和userQuery$的最新值组合成一个数组（比如[navigationEndEvent, queryInstance]），而merge(userQuery$)会直接发出userQuery$的单个QueryDefinition对象。这导致subscribe回调里的query参数时而为数组、时而为单个对象，类型完全不匹配，必然会引发运行错误。
2. 逻辑不符合预期：你想要的是“任意一个流触发时，获取userQuery$的最新值”，但当前的pipe顺序是先处理navigationEvents$与userQuery$的组合，再合并userQuery$，这完全颠倒了逻辑顺序，无法达成你的需求。

正确的实现方式 #

我们需要先把两个触发流合并，再统一获取userQuery$的最新值，这里有两种可靠且符合DRY原则的写法：

写法一：merge + switchMap（适用于userQuery$可能未提前发值的场景） #

这种写法会等待userQuery$发出第一个值后再执行回调，避免因userQuery$未初始化导致的无响应：

import { merge } from 'rxjs';
import { switchMap, take } from 'rxjs/operators';

// 合并两个触发源：导航事件和查询参数变更
merge(navigationEvents$, userQuery$).pipe(
  // 每次触发时，获取userQuery$的最新值（take(1)确保只取一次当前最新值）
  switchMap(() => userQuery$.pipe(take(1)))
).subscribe((query: QueryDefinition) => {
  store$.dispatch(new FetchUsers(query));
});

写法二：merge + withLatestFrom（适用于userQuery$已提前初始化的场景） #

如果能确定userQuery$在订阅前已经有初始值（比如store初始化时就设置了默认查询参数），可以用更简洁的写法：

import { merge } from 'rxjs';
import { withLatestFrom, map } from 'rxjs/operators';

merge(navigationEvents$, userQuery$).pipe(
  // 关联当前触发事件与userQuery$的最新值
  withLatestFrom(userQuery$),
  // 只提取我们需要的查询参数值
  map(([_, query]) => query)
).subscribe((query: QueryDefinition) => {
  store$.dispatch(new FetchUsers(query));
});

这两种写法都能完美实现你的需求：当导航到manage-users页面，或者查询参数发生变更时，都会获取userQuery$的最新值，然后触发用户列表的刷新操作，同时代码简洁且符合DRY原则。

内容的提问来源于stack exchange，提问作者jenson-button-event