RXJS副作用执行顺序异常：如何确保setPerson更新后再执行side-effect？

我有一个大型Person对象，通过setPerson函数进行部分更新：

private setPerson = (partialPerson: Partial<Person>) => {
  this.person$.next({ ...this.person$.value, ...partialPerson });
};

当name属性变化时，需要执行副作用逻辑：

personNameEffect$ = this.person$.pipe(
  map(({ name }) => name),
  distinct(),
  tap((name) => {
    // 执行复杂计算
    this.person$.next({ ...this.person$.value, firstName: name });
  })
);

constructor() {
  this.personNameEffect$.subscribe()
}

当前存在执行顺序问题：

• 调用setPerson传入Partial对象
• 副作用先执行（使用旧值）并修改数据
• setPerson中的next执行，覆盖了副作用的修改

需要让setPerson的更新先完成，再执行副作用。

方案1：使用asyncScheduler延迟副作用执行 #

通过observeOn(asyncScheduler)将副作用的执行切换到异步队列，确保setPerson的同步更新完成后再触发副作用逻辑：

import { asyncScheduler } from 'rxjs';
import { observeOn } from 'rxjs/operators';

personNameEffect$ = this.person$.pipe(
  map(({ name }) => name),
  distinct(),
  observeOn(asyncScheduler), // 切换到异步执行
  tap((name) => {
    // 此时person$.value已经是setPerson更新后的最新值
    this.person$.next({ ...this.person$.value, firstName: name });
  })
);

方案2：使用auditTime(0)等待当前同步任务完成 #

auditTime(0)会等待当前同步队列执行完毕后再处理数据流，同样能确保拿到最新的person$值：

import { auditTime } from 'rxjs/operators';

personNameEffect$ = this.person$.pipe(
  map(({ name }) => name),
  distinct(),
  auditTime(0), // 等待当前同步任务结束
  tap((name) => {
    this.person$.next({ ...this.person$.value, firstName: name });
  })
);

方案3：重构更新逻辑，避免嵌套next调用 #

如果允许调整逻辑，可以用scan操作符统一管理状态更新，把firstName的计算整合到状态流中，避免在副作用中直接修改person$：

// 定义更新动作流
private updatePersonAction$ = new Subject<Partial<Person>>();

// 用scan统一处理状态更新
this.person$ = this.updatePersonAction$.pipe(
  scan((prevState, partial) => {
    const newState = { ...prevState, ...partial };
    // 当name变化时执行复杂计算并更新firstName
    if (partial.name !== undefined && partial.name !== prevState.name) {
      newState.firstName = partial.name; // 替换为实际复杂计算逻辑
    }
    return newState;
  }, initialPerson)
);

// 替换原有的setPerson
private setPerson = (partialPerson: Partial<Person>) => {
  this.updatePersonAction$.next(partialPerson);
};

问题根源说明 #

原问题核心是同步数据流的执行顺序冲突：调用setPerson中的next时，person$的订阅者会同步触发。此时副作用里的this.person$.value还是更新前的旧值，且副作用的next会被后续setPerson的next同步覆盖。通过异步调度或等待同步队列完成，能确保副作用执行时，person$已经完成setPerson的更新，从而拿到最新值且不会被覆盖。

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