RxJS中基于Observable A触发B并组合两者值的实现问题

我来帮你搞定这个问题！你想要的是完全基于RxJS操作符的链式实现，不用乱糟糟的全局变量对吧？其实核心就是用高阶Observable操作符来串联你的三步流程，完美匹配你的需求~

核心思路拆解 #

你的流程是：

• 1. 获取A的最新值
• 2. 用A的值dispatch action，触发B发射新值
• 3. 组合A和B的值做决策

因为B的值完全依赖于A触发的action，所以我们需要在A的每个值发射后，去监听B的最新值，再把两者组合起来。这里最适合的操作符是switchMap（如果需要避免竞态，比如A快速发射多个值时取消旧的请求），或者mergeMap（允许同时处理多个请求），我推荐用switchMap，大部分场景下它更安全。

具体代码实现 #

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

// 假设A和B都是已经定义好的Observable
A.pipe(
  switchMap((a) => {
    // 步骤1+2：拿到A的值后，dispatch action触发B更新
    this.store.dispatch(new fromStore.LoadItem(a));
    
    // 返回B的Observable，同时把B的值和当前的a组合起来
    return B.pipe(
      // 只取action触发后B的第一个最新值（如果B是持续发射的，比如store的select，这个很必要）
      take(1),
      map((b) => ({ a, b }))
    );
  })
).subscribe(({ a, b }) => {
  // 步骤3：用A和B的值进行决策
  console.log('基于A的值:', a, '和B的值:', b, '执行决策逻辑');
  // 这里写你的业务代码
});

对你之前尝试的问题解释 #

你之前用mergeMap时遇到的错误，是因为第一个回调函数需要返回Observable类型，而你返回了a（普通值）。正确的做法是返回B的Observable，然后通过map把a和b组合成对象，而不是用mergeMap的结果选择器（RxJS 6+已经不推荐使用这个参数了）。

额外说明 #

• 如果你的B在dispatch action后可能会多次发射值，但你只需要最新的那一个，可以把take(1)换成last()，不过take(1)更高效，因为action触发后B通常会立即发射一次更新后的值。
• 如果需要严格按顺序处理A的每个值（即使前一个B还没返回，也要排队处理），可以把switchMap换成concatMap，但这种场景相对少见。

这样实现完全不需要全局变量，所有逻辑都在链式的pipe里，非常简洁清晰~

内容的提问来源于stack exchange，提问作者Artem Zakharov