I'm building a React + Redux Toolkit web app that imports, modifies and exports a ZIP file.
This zip file contains assets such as images and videos that the user can preview, rename, delete, modify and so on. The user can also add new assets. The zip file also contains files that cannot be seen or modified by the user, these files must be exported as they were in the original zip file.
These assets can be heavy so I cannot store them inside the Redux store. However, I still want my app to be driven by the Redux store.
My current idea is to store the zip content outside of the Redux store and use the reducers to update both the zip data and the app state.
When the user is done modifying the zip, he can download the cached zip.

let zip; // the zip content (master data)

function zipToState() {
  let state = {};
  if (zip) {
    // convert zip to "presentational" state
  }
  return state;
}

const slice = createSlice({
  name: 'zip',
  initialState: {
    data: {} // the zip data visible to React
  },
  reducers: {
    imageAdded(state, action) {
      if (zip) {
        // Modify the ZIP data
      }
      state.data = zipToState();
    }
  }
});

export function export() {
  // download 'zip' content
}

Unfortunately, this is not ideal because I have to pass heavy Blobs and buffers in the action payload for the images and videos but in Redux/Redux Toolkit, actions can only contain serializable data.
Is there a better way to do this with Redux Toolkit and if not, how can I make my prototype work without having to disable non-serializable data?
This title and content for this question was made by "neeh" at this link: https://stackoverflow.com/questions/77590211/using-redux-toolkit-to-manage-heavy-data. Contributions on stackoverflow.com are made under this license.