В Redux Observable как получить размер изображения после загрузки img

Question

Я пытаюсь получить размеры изображения после его загрузки. Я получил URL из ответа API, создал экземпляр изображения и загрузку. Я хочу отправить действие 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

Если вы хотите сделать измерения частью цепочки, вам нужно вернуть Observable внутри 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();
        };
      });
    })
  );