RxJS逻辑中如何规避循环依赖导致的重复自动保存问题

问题原因 #

你遇到的重复提交问题根源是drawLine$同时承载了两类更新触发：服务端同步的状态更新、用户主动操作的更新，自动保存逻辑没有区分这两类更新的来源，导致服务端下发的变更被误触发回传。

解决方案 #

方案1：给事件附加来源标记（改动最小）

不对现有逻辑做大幅调整，仅给传递的内容增加来源标识，自动保存时过滤服务端来源的事件即可：

• 调整drawLine$的传递类型，同时承载值和来源：

  // 定义传递的事件结构
  type DrawLineEvent = { value: boolean, source: 'server' | 'user' }
  drawLine$ = new Subject<DrawLineEvent>()
  

• 服务端返回值更新时指定来源为server：

  drawLine$.next({ value: 服务端返回的布尔值, source: 'server' })
  

• 用户修改更新时指定来源为user：

  drawLine$.next({ value: input.value, source: 'user' })
  

• 自动保存逻辑中增加过滤，仅处理用户触发的变更：

  combineLatest([drawLine$, ...其他需要监听的流])
    .pipe(
      // 过滤掉服务端同步的更新事件
      filter(([drawLineEvent]) => drawLineEvent.source === 'user'),
      // 保留你原有逻辑的操作符
    )
    .subscribe(() => {
      // 原有提交服务端的保存逻辑
    })
  

• 界面如果只需要展示布尔值，可以单独抽一个纯值流绑定到视图：

  drawLineView$ = drawLine$.pipe(map(event => event.value))
  

方案2：拆分独立流（职责更清晰）

按不同更新来源拆分不同的流，从根源上避免两类事件互相干扰：

• 拆分两个独立流，职责完全分离：

  // 专门接收服务端同步的状态
  serverDrawLine$ = new BehaviorSubject<boolean>(false)
  // 专门接收用户主动修改的操作
  userDrawLineChange$ = new Subject<boolean>()
  

• 合并两个流得到最终给视图展示的状态流：

  drawLine$ = merge(serverDrawLine$, userDrawLineChange$)
  

• 自动保存逻辑仅监听用户操作流，搭配其他需要的变量即可，不会被服务端同步事件触发。

如果业务需要处理服务端推送和用户编辑的冲突，可以在合并流的时候增加优先级判断，比如用户编辑中时暂时忽略服务端推送的更新，按需调整即可。

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