Ngrx 大量数据导致应用变慢

Question

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

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

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

使用angular8及以下版本的ngrx。

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

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

Answer 1

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

请看..

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

Answer 2

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

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

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

Ngrx 大量数据导致应用变慢

Ngrx Large Amounts of Data causes app to slow down

ngrx

ngrx-store