在 Redux Observable 中，如何在加载 img 后获取图像大小

Question

我正在尝试在加载图像后获取图像的尺寸。我从 api 响应中收到了 URL，创建了一个图像实例并加载了我想调度将图像宽度作为有效负载传递的GET_IMAGE_DIMENSIONS操作。我的代码如下。

但是，似乎由于 onload 功能，GET_IMAGE_DIMENSIONS操作超出了原始 mergeMap 范围，但我不确定如何解决它。还是问题出在别的什么地方？

const getImageDimensionsEpic = action$ =>
action$.ofType('UPLOAD_IMAGE_SUCCESS').pipe(
mergeMap(payload => {
let img = new Image();
img.src = payload.image_url;
img.onload = function() {
return Observable.of({
type: 'GET_IMAGE_DIMENSIONS',
img: img.width
});
};
})
);

Answer 1

如果你想使维度成为链的一部分，你需要在mergeMap内返回一个可观察量。此内部可观察量将手动将维度发送到链，然后完成。

const getImageDimensionsEpic = action$ =>
action$.ofType('UPLOAD_IMAGE_SUCCESS').pipe(
mergeMap(payload => {
let img = new Image();
img.src = payload.image_url;
return new Observable(observer => {
img.onload = function() {
observer.next({
type: 'GET_IMAGE_DIMENSIONS',
img: img.width
});
observer.complete();
};
});
})
);