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

【问题标题】：In Redux Observable how to get image size after img has loaded在 Redux Observable 中，如何在 img 加载后获取图像大小
【发布时间】：2018-07-06 10:09:28
【问题描述】：

我正在尝试获取图像加载后的尺寸。我从 api 响应中收到了 URL，创建了一个图像实例并 onload 我想调度 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
        });
      };
    })
  );

【问题讨论】：

标签： rxjs reactive-programming redux-observable

【解决方案1】：

如果您想将维度作为链的一部分，您需要在 mergeMap 中返回一个 Observable。这个内部 Observable 将手动将维度发送到链，然后完成。

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

【讨论】：