Ngrx Большое количество данных приводит к замедлению работы приложения - PullRequest
Новая
       20

Ngrx Большое количество данных приводит к замедлению работы приложения

1 голос
/ 06 ноября 2019

У меня есть приложение, которое загружает некоторые изображения с метаданными. Одна папка может быть довольно большой (~ 100-142 Мб) после загрузки в память. Ранее мы использовали простой старый объект javascript для управления состоянием приложения, и все работало нормально, но я хотел бы воспользоваться преимуществами управления состоянием ngrx.

Я обнаружил ngrx, и мне показалось, чтобыть умнее, когда дело доходит до управления государством. Тем не менее, когда я добавляю эти элементы в состояние, приложение зависает при добавлении изображений в хранилище, а затем снижается производительность при доступе к отдельным (и не связанным) флагам из хранилища, т. Е. UI flag - draw открыт.

1) Здесь "directoryies" - это объект Map (), в котором сохранено хранилище (~ 100-120Mb). Каталог - это сложный объект со многими вложенными значениями. Как только изображения загружены, а затем добавлены в хранилище, он a) зависает, а затем b) все остальное (т. Е. Изменение флага пользовательского интерфейса) замедляется. 

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

2) Затем к каталогам затем обращаются изthe store. 

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",

Есть ликакие-нибудь лучшие практики? т.е. добавить каждое изображение по одному в магазин?

Ответы [ 2 ]

0 голосов
/ 08 ноября 2019

Я вижу одну проблему - как вы создаете свое новое состояние. Вы упоминаете, что когда вы создаете новое состояние, вы делаете следующее 

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

Я думаю, что вы создаете объект с тоннами пар ключ-значение, а затем воссоздаете эту работу, когда устанавливаете свойство loadedDirectoriesочередной раз. Я не уверен относительно затрат производительности при использовании оператора распространения в контексте очень больших объектов. Я бы посоветовал вам сосредоточиться на создании этой собственности один раз. Это может помочь вам

Влияет ли оператор спреда на производительность?

0 голосов
/ 08 ноября 2019

Хранилище ngrx предназначено для состояния приложения и не так хорошо, как хранилище документов.

Пожалуйста, смотрите ..

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

...