我可以在 RxJS 上使用 RxJS-DOM 和 Redux-Observable 吗?

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

虽然可能不是你想听到的，但围绕其他 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 等更灵活的方式，但如果您只想读取文件并处理加载/错误，您可以创建一个匿名的 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));