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

Question

我正在将一个新主题从内部 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

Answer 1

保存对您的订阅的引用，这样每次卸载组件时都会删除它。

private _subscription;


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

componentWillUnmount() {
  this._subscription.unsubscribe();
}

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

New RxJS subscription gets created during page hot module replacement

rxjs

typescript

reactjs

webpack

next.js