Ngrx 大量数据导致应用程序变慢答案

【问题标题】：Ngrx Large Amounts of Data causes app to slow downNgrx 大量数据导致应用程序变慢
【发布时间】：2020-03-02 14:29:13
【问题描述】：

我有一个应用程序可以加载一些带有元数据的图像。一旦加载到内存中，单个文件夹可能会非常大（~100-142Mb）。以前，我们使用普通的旧 javascript 对象来管理应用程序的状态，一切正常，但我想获得 ngrx 的状态管理的好处。

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

1) 这里的“directories”是一个保存在 Store (~100-120Mb) 的 Map () 对象。目录是具有许多嵌套值的复杂对象。一旦图像被加载，然后添加到商店，它 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",

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

【问题讨论】：

标签： ngrx ngrx-store

【解决方案1】：

ngrx 存储用于应用程序状态，不如文档存储。

请看..

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

【讨论】：

【解决方案2】：

我看到的一个问题是您如何创建新状态。您提到，当您创建新状态时，您执行以下操作

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

我认为您正在创建一个包含大量键值对的对象，然后在您再次设置 loadedDirectories 属性时重新创建该工作。我不确定在非常大的对象的上下文中使用扩展运算符的性能成本。我建议您专注于创建此属性一次。这可能对你有帮助

Does spread operator affect performance?

【讨论】：