在 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

如果您想将维度作为链的一部分，您需要 return 在 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();
        };
      });
    })
  );

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

In Redux Observable how to get image size after img has loaded

reactive-programming

rxjs

redux-observable