React Redux Thunk：Store分发耗时过长及图片缓存不完整问题

嘿，我来帮你搞定这个预加载图片到Redux的问题！你想在应用渲染前把所有头像这类图片转成Base64存进Store方便离线用，但现在有些图片总是赶在渲染前没完成加载，对吧？咱们一步步排查问题，找到解决方案：

1. 确认所有图片请求的Promise都被统一等待 #

你说Promise声明没问题，但很可能是没把所有图片请求的Promise放到同一个等待队列里。比如：

• 检查是否所有需要缓存的图片URL都被遍历生成了对应的Promise
• 一定要用Promise.all()（或Promise.allSettled()）包裹所有图片请求，而不是逐个单独处理，否则部分请求还没完成就会开始渲染

给你个thunk动作的示例，这样能确保所有图片都加载完再更新Store：

export const preloadImages = (imageUrls) => async (dispatch) => {
  try {
    // 把每个图片的加载+转Base64过程转成Promise
    const imagePromises = imageUrls.map(async (url) => {
      const response = await fetch(url);
      const blob = await response.blob();
      // 把Blob转成Base64字符串
      const base64 = await new Promise((resolve) => {
        const reader = new FileReader();
        reader.onloadend = () => resolve(reader.result);
        reader.readAsDataURL(blob);
      });
      return { url, base64 };
    });

    // 等待所有图片请求完成
    const imageDataArray = await Promise.all(imagePromises);
    
    // 一次性把所有图片数据分发到Store
    dispatch(setCachedImages(imageDataArray));
  } catch (error) {
    console.error('图片预加载失败:', error);
    dispatch(setPreloadError(error));
  }
};

2. 确保应用启动时等待预加载完成再渲染 #

如果只是在组件里分发动作，但没等待它完成就渲染，那肯定会有图片没加载好。在React里可以这么处理，用加载态挡住渲染，直到所有图片准备好：

function App() {
  const dispatch = useDispatch();
  const [isPreloading, setIsPreloading] = useState(true);
  const preloadError = useSelector(state => state.imageCache.preloadError);

  useEffect(() => {
    const startPreload = async () => {
      // 等待thunk动作完成（因为thunk返回Promise，所以可以用await）
      await dispatch(preloadImages(['/avatar1.png', '/avatar2.png']));
      setIsPreloading(false);
    };
    startPreload();
  }, [dispatch]);

  // 预加载中显示加载态
  if (isPreloading) {
    return <div>正在加载资源...</div>;
  }

  // 处理预加载失败的情况
  if (preloadError) {
    return <div>资源加载失败，请刷新重试</div>;
  }

  // 预加载完成后再渲染应用内容
  return <YourAppMainContent />;
}

3. 处理图片加载失败的情况 #

有些图片可能因为跨域、404或者网络波动加载失败，导致Promise.all()直接中断，剩下的图片也无法完成加载。这种情况下可以用Promise.allSettled()代替，它会等待所有Promise完成（不管成功失败），然后你可以筛选出成功的图片存入Store：

// 修改thunk里的等待逻辑
const results = await Promise.allSettled(imagePromises);
// 提取成功加载的图片数据
const successfulImages = results
  .filter(result => result.status === 'fulfilled')
  .map(result => result.value);
// 分发到Store
dispatch(setCachedImages(successfulImages));

// 可以收集失败的图片，方便后续排查或重试
const failedImages = results
  .filter(result => result.status === 'rejected')
  .map((result, index) => ({ url: imageUrls[index], error: result.reason }));
console.log('加载失败的图片:', failedImages);

4. 检查Reducer是否正确处理批量图片存储 #

确保你的reducer能正确把所有图片数据合并到Store里，而不是覆盖或者只存储最后一个。比如用对象存储，key是图片URL，value是Base64字符串：

const initialState = {
  cachedImages: {}, // 用URL作为key，方便快速查找
  preloadError: null
};

const imageCacheReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_CACHED_IMAGES':
      // 合并已有缓存和新加载的图片
      const updatedCache = action.payload.reduce((acc, item) => {
        acc[item.url] = item.base64;
        return acc;
      }, { ...state.cachedImages });
      return { ...state, cachedImages: updatedCache };
    case 'SET_PRELOAD_ERROR':
      return { ...state, preloadError: action.payload };
    default:
      return state;
  }
};

5. 优化：避免重复加载提升速度 #

如果用户之前已经加载过图片，下次启动可以直接从localStorage读取Base64，不用再发起网络请求，既快又省流量：

export const preloadImages = (imageUrls) => async (dispatch) => {
  try {
    // 先从localStorage读取已缓存的图片
    const localCache = JSON.parse(localStorage.getItem('imageCache')) || {};
    // 筛选出还没缓存的图片URL
    const urlsToLoad = imageUrls.filter(url => !localCache[url]);

    // 只加载未缓存的图片
    const imagePromises = urlsToLoad.map(async (url) => {
      // 同上的fetch和转Base64逻辑
    });

    const results = await Promise.allSettled(imagePromises);
    const newImages = results
      .filter(r => r.status === 'fulfilled')
      .map(r => r.value)
      .reduce((acc, item) => {
        acc[item.url] = item.base64;
        return acc;
      }, {});

    // 合并本地缓存和新加载的图片
    const allCache = { ...localCache, ...newImages };
    dispatch(setCachedImages(allCache));
    // 存入localStorage，下次启动直接用
    localStorage.setItem('imageCache', JSON.stringify(allCache));
  } catch (error) {
    console.error('预加载出错:', error);
    dispatch(setPreloadError(error));
  }
};

内容的提问来源于stack exchange，提问作者Mika