我可以通过Redux-Observable在RxJS上使用RxJS-DOM吗？

Question

Redux-Observable依赖于RxJS。

我需要使用RxJS-DOM中的filereader函数。

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

rx-dom是为RxJS v4准备的，而不是为v5+准备的。这两个是不兼容的。这种情况确实令人困惑。

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

在v5+中，没有与fromReader等效的官方版本，以下是发行票证跟踪：https://github.com/ReactiveX/rxjs/issues/1223

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

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等来说，这是更灵活的方法，但如果您想要做的只是读取文件并处理加载/错误，那么您可以创建一个匿名可观察对象，如下所示：

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));