我可以通过 Redux-Observable 使用 RxJS-DOM 而不是 RxJS

Question

Redux-Observable 依赖于 RxJS。

我需要使用 RxJS-DOM 的文件阅读器功能。

https://github.com/Reactive-Extensions/RxJS-DOM/blob/master/doc/operators/filereader.md

看起来 RxJS-DOM 包含与 RxJS 相同的基本 API 集（加上 DOM 的）。

是否可以要求 Redux-Observable 使用 RxJS-DOM 而不是 RxJS？将两者都导入会使我的构建体积膨胀。

Answer 1

RxJS-DOM aka rx-dom 适用于 RxJS v4，不适用于 v5+。两者不兼容。确实，情况令人困惑。

• 这是 RxJS v4 及以下版本：https://www.npmjs.com/package/rx
• 这是 RxJS v5+：https://www.npmjs.com/package/rxjs

在 v5+ 中没有官方对应 fromReader，这里是问题单跟踪：https://github.com/ReactiveX/rxjs/issues/1223

尽管可能不是您想听到的，但只要您了解 Observable 的基本工作原理，围绕其他 API 创建自定义 Observable 包装器应该相当简单。无论如何，这是一项非常有价值的技能。

fromReader 实际上是用词不当，因为您没有为它提供 FileReader，而是为它提供了一个 File，它在内部创建了自己的 FileReader 来耗尽它。所以让我们改用fromFile。这是一个非常基本的起点示例：

class FromFileAsTextObservable extends Observable {
  constructor(file, encoding) {
    super();

    this.file = file;
    this.encoding = encoding;
  }

  _subscribe(subscriber) {
    const reader = new FileReader();

    const loadHandler = event => {
      subscriber.next(event.target.result);
      subscriber.complete();
    };

    const errorHandler = event => {
      subscriber.error(event.target.error);
    };

    reader.addEventListener('load', loadHandler, false);
    reader.addEventListener('error', errorHandler, false);

    reader.readAsText(this.file, this.encoding);

    return () => {
      reader.removeEventListener('load', loadHandler, false);
      reader.removeEventListener('error', errorHandler, false);
    };
  }
}

class FromFileFactory {
  constructor(file) {
    this.file = file;
  }

  asText(encoding) {
    return new FromFileAsTextObservable(this.file, encoding);
  }
}

const fromFile = file =>
  new FromFileFactory(file);

const file = new File(['hello world'], 'example.txt', {
  type: 'text/plain',
});

fromFile(file).asText()
  .subscribe(text => console.log(text));

虽然对于复杂的 API 等来说这是更灵活的方式，但如果您只想读取文件并处理加载/错误，您可以改为创建一个匿名 Observable，如下所示：

const fromFileAsText = (file, encoding) => new Observable(subscriber => {
  const reader = new FileReader();

  const loadHandler = event => {
    subscriber.next(event.target.result);
    subscriber.complete();
  };

  const errorHandler = event => {
    subscriber.error(event.target.error);
  };

  reader.addEventListener('load', loadHandler, false);
  reader.addEventListener('error', errorHandler, false);

  reader.readAsText(file, encoding);

  return () => {
    reader.removeEventListener('load', loadHandler, false);
    reader.removeEventListener('error', errorHandler, false);
  };
});

const file = new File(['hello world'], 'example.txt', {
  type: 'text/plain',
});

fromFileAsText(file)
  .subscribe(text => console.log(text));