Skip to content

Add image store with caching

Axel Bocciarelli requested to merge fetch-store into main

Fix #21 (closed)

I've replaced the Redux thunk action getFile with a simpler action called setImagePath, which stores the selected file in the Redux slice.

In ImageViewContainer, the path is retrieved from the Redux slice and passed to a store created with react-suspense-fetch. Then:

  • If the store's internal cache already contains the image at the given path, it returns it synchronously and ImageView renders with the image data.
  • Otherwise, the store calls the fetchFile API function and throws a pending Promise, which gets caught by the Suspense component in MainPage and renders the fallback loading message. When the promise resolves (i.e. when the axios requests fulfils):
    1. the store updates its internal cache with the fetched image;
    2. React re-renders ImageViewContainer;
    3. imageStore.get(path) gets called again;
    4. since the image is in the store's internal cache, it returns synchronously and ImageView renders with the image data.

Merge request reports