RxJS 和重复事件

Question

我一般来说是 RxJs 的新手，但我正在调查一些 React 代码中的错误，在该错误中，在不相关的操作时，似乎会发出旧事件并将其呈现为显示错误。想一想，如果您有两个按钮在屏幕某处生成两条消息，并且单击一个按钮会显示另一个按钮的消息。

作为 RxJs 的新手，我不确定问题出在哪里。我在代码中没有看到一个ReplaySubject，只有Obserables、Subjects 和BehaviourSubjects。所以这要么是滥用 RxJs 功能，要么只是某个地方的一些错误逻辑。

无论如何，我找到了带有相关 Observable 的代码，但我不太确定这个人在这里试图完成什么。我已经阅读了combineLatest、map 和pipe，但这对我来说似乎是毫无意义的代码。它也可能以某种方式重新发布旧事件吗？我在任何地方都看不到动态订阅，尤其是在这种情况下。

Tldr 我不明白这段代码的意图。

export interface IFeedback {
  id: number
  text: string
}

export interface IFeedbackMessages {
  message: IFeedback | undefined
}

feedback$ = new BehaviorSubject<IFeedback | undefined>(undefined)

feedbackNotifs$: Observable<IFeedbackMessages> = combineLatest([
  feedback$
]).pipe(
  map(([feedback]) => ({
    feedback
  })
))

---

我还发现这可能是个问题。在显示此消息的 React 组件中，我是不是错了，但是每次这个东西呈现它订阅然后取消订阅上面的主题时，它看起来像吗？

const FeedbackDisplay: React.FC () => {
   
  const [feedbackNotifications, setFeedbackNotifications] = React.useState<IFeedbackMessages>()
  React.useEffect(() =>
  {
    const sub = notification$.subscribe(setFeedbackNotifications)
    return () => sub?.unsubscribe()
  }, [notifications$])

}

Answer 1

它是否也能以某种方式重新发布旧事件？

是的，可能是。 BehaviorSubject 具有独特的属性，即在您订阅后立即发出推送给它的最后一个值。

当您想对一些持久状态值建模时，这很好，但对于实际发生的时刻是关键的事件来说，这并不好。听起来您正在处理的反馈消息属于第二类，在这种情况下，Subject 可能是更好的选择。

是不是每次这个东西渲染它订阅然后取消订阅上面的主题？

不完全是。 useEffect 接受回调，在该回调中，您可以选择返回“清理”函数。 React 将挂在该函数上，直到再次触发效果，然后调用它来清理内容（在本例中包括关闭订阅）以为下一个效果腾出空间。

所以在这种情况下，取消订阅只会在组件使用 notifications$ 的新值呈现时发生。还值得指出的是，notifications$ 只有在作为道具传递或在组件函数中创建时才会改变。如果它是在函数外部定义的（例如从另一个文件导入），则不需要（实际上也不应该）将其放入 useEffect 的依赖数组中。