Add image store with caching
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 theSuspense
component inMainPage
and renders the fallback loading message. When the promise resolves (i.e. when the axios requests fulfils):- the store updates its internal cache with the fetched image;
- React re-renders
ImageViewContainer
; -
imageStore.get(path)
gets called again; - since the image is in the store's internal cache, it returns synchronously and
ImageView
renders with the image data.