我有一个应用程序可以加载带有元数据的某些图像。加载到内存后，单个文件夹可能会很大（〜100-142Mb）。以前，我们使用普通的旧javascript对象来管理应用程序的状态，并且一切正常，但是我想从ngrx的状态管理中受益。

我发现了ngrx，它在状态管理方面似乎是一个更明智的选择。但是，当我将这些项目添加到状态时，在将图像添加到商店时应用程序会挂起，然后在访问商店中的各个（和不相关的）标志（即UI标志-绘图已打开）时性能会降低。

1）这里的“目录”是Map （）对象，该对象保存在商店中（〜100-120Mb）。目录是具有许多嵌套值的复杂对象。加载图片并将其添加到商店后，它会：a）挂起，然后b）其他所有操作（即更改ui标志）都会变慢。

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

2）然后可以从商店中访问目录。

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

选择器看起来像这样。...

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
);

使用angular 8和以下版本的ngrx。

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

有没有更好的做法？即将每张图片一次添加到商店中？