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?

score 1 · Accepted Answer · answered Nov 08 '19 at 05:19

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

answered Nov 08 '19 at 05:19

WebSight

640
2
12
27

score 0 · Answer 2 · answered Nov 08 '19 at 05:29

One issue I see is how you create your new state. You mention that when you create your new state, you do the following

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

I think you are creating an object with tons of key-value pairs, then recreating that work when you set the loadedDirectories property again. I'm uncertain about the performance costs of using the spread operator in the context of very large objects. I would suggest you focus on creating this property once. This might help you

Does spread operator affect performance?

Ngrx Large Amounts of Data causes app to slow down

2 Answers2