生成器函数（Redux Saga）中的嵌套API调用

Question

我有一个带有“ photoBooks”的有效负载的传入动作。这些照相簿已卸载带有API路径的图像。使用嵌套的映射函数，我试图获取实际图像并将其添加到对象中。但是这种图像获取无法解决。

我有以下代码：

import { call, put, all } from 'redux-saga/effects';

interface Load {
  type: 'Load';
  payload: {
    photoBooks: PhotoBookWithoutImages[];
  };
}

interface UnloadedImage {
  name: string;
  path: string;
}

interface LoadedImage {
  name: string;
  objectUrl: string;
}

interface PhotoBookWithoutImages {
  name: string;
  images: UnloadedImage[];
}

interface PhotoBookWithImages {
  name: string;
  images: LoadedImage[];
}

function* downloadBlob(path: string) {
  return yield fetch(path);
}

function* fetchImage(image: UnloadedImage) {
  const blob = yield call(downloadBlob, image.path);

  return {
    ...image,
    objectUrl: window.URL.createObjectURL(new File([blob], `image-${name}`)),
  };
}

export function* load(action: Load) {
  const { photoBooks } = action.payload;

  const photoBooksWithImages: PhotoBookWithImages[] = yield all(
    photoBooks.map(photoBook => ({
      ...photoBook,
      images: photoBook.images.map(image => call(fetchImage, image)),
    }))
  );

  yield put(loadOk(photoBooksWithImages));
}

我正在寻找一种在深层对象中获取数据的正确方法。

有人可以帮助我解决这个问题吗？预先感谢！