Ngrx Large Amounts of Data causes app to slow down

Question

I have an app that loads some images with metadata. A single folder can be quite large (~100-142Mb) once loaded into memory. Previously, we were using a plain old javascript object to manage the state of the app and everything worked fine, but i'd like to gain the benefits of ngrx's state management.

I've discovered ngrx and it seemed to be a smarter option when it comes to state management. However, when i add these items to the state, the app hangs when adding images to the store and then performance slows down when accessing individual (and unrelated) flags from the store i.e. UI flag - draw is open.

1) Here "directories" is a Map < string, Directory > () object that is saved the the Store (~100-120Mb). Directory is a complex object with many nested values. Once images are loaded, and then added to the store, it a) hangs and then b) everything else (i.e. changing a ui flag) slows down.

    return {
        ...state,
        loadedDirectories: directories,
        filesLoading: false,
    };

2) The directories are then later accessed from the store.

this.store
    .pipe(select(fromReducer.getLoadedDirectories))
    .subscribe(loadedDirectories => {
        this._directoryData = loadedDirectories;
    });

Selector looks like this....

export interface ImageLoaderState {
    loadedDirectories: Map<string, Directory>;
    filesLoading: boolean;
    errorMessage: string;
}


 export class AppState {
        imageLoader: fromImageLoader.ImageLoaderState;
    }

export const combinedReducers = {
    imageLoader: fromImageLoader.imageLoaderReducer
    .... More reducers here ....
    }

// Select Image loader state.
export const selectImageLoaderState = (state: AppState) => state.imageLoader;

export const getLoadedDirectories = createSelector(
    selectImageLoaderState,
    (state: fromImageLoader.ImageLoaderState) => state.loadedDirectories
);

Using angular 8 and the following versions of ngrx.

    "@ngrx/effects": "^8.4.0",
    "@ngrx/store": "^8.4.0",
    "@ngrx/store-devtools": "^8.4.0",

Are there any better practices? i.e. Add each image, one at a time to the store?

Answer 1

The ngrx store is for application state and not so good as a document store.

Please see..

https://github.com/btroncone/ngrx-store-localstorage/issues/39