在页面热模块替换期间创建新的 RxJS 订阅

Posted 2023-03-13

【中文标题】在页面热模块替换期间创建新的 RxJS 订阅

【英文标题】：New RxJS subscription gets created during page hot module replacement

【发布时间】：2019-09-29 07:45:09

【问题描述】：

我正在将一个新的主题从一个内部 NPM 包导入到我的 Next.js 应用程序中。

内部 NPM 包

import  Subject  from 'rxjs';

export const errorSubject = new Subject<>();

Next.js 应用程序

import  errorSubject  from '@my-package'

// Inside component's render
render() 
  errorSubject.subscribe(
    next: v => console.log(v),
  );

每次 Next.js 热重新加载时，都会创建一个新订阅。如果我重新加载页面，则只剩下 1 个订阅。

这会导致问题，因为运行了多个回调。

---

https://www.youtube.com/watch?v=cqy3RPQocRw

【参考方案1】：

保存对订阅的引用，以便每次卸载组件时都可以删除它。

private _subscription;


render() 
  this._subscription = errorSubject.subscribe(
    next: v => console.log(v),
  );


componentWillUnmount() 
  this._subscription.unsubscribe();

【讨论】：

是的，这行得通！非常感谢。我之前尝试过 componentWillUnmount()，但没有跟踪我班级的私人订阅