Как я могу заставить функциональный модуль ngrx / store работать с лениво загруженными модулями?

В моем приложении angular есть несколько функциональных модулей:

  • CoreModule (содержит сервисы для вызовов и моделей API)
  • MainModule (содержит компоненты основного приложения)
  • MainDetailModule (содержит функцию для подробного просмотра, ленивая загрузка)
  • MainStoreModule (содержит определение ngrx / store, действия, редукторы и т. Д.)

main.module.ts (MainModule)

// imports

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    CoreModule,
    MainRoutingModule,
    TranslateModule.forChild(),
    BsDropdownModule.forRoot(),
    MainDetailModule,
    MainStoreModule
  ],
  declarations: [
    // components
  ],
  providers: []
})
export class MainModule { }

main-detail.module.ts (MainDetailModule)

// imports

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    MainDetailRoutingModule,
    TranslateModule.forChild(),
    MainStoreModule
  ],
  declarations: [
    // components
  ]
})
export class MainDetailModule { }

main-store.module.ts (MainStoreModule)

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { metaReducers, rootReducers } from './reducer/root.reducer';

@NgModule({
  imports: [
    CommonModule,
    StoreModule.forRoot(rootReducers, {metaReducers}),
    StoreDevtoolsModule.instrument({
      maxAge: 10
    })
  ],
  declarations: []
})
export class MainStoreModule { }

Мой MainModule импортирует CoreModule, MainStoreModule и MainDetailModule. MainDetailModule будет загружаться лениво при нажатии на ссылку с подробностями.

Во всем основном приложении мой MainStore работает нормально. Но если я перейду к MainDetailModule, MainStoreModule будет повторно инициализирован, и поэтому он останется пустым. Я знаю, что ngrx / store может работать с лениво загруженными модулями, и знаю, как это сделать. У меня вопрос, как заставить мой MainStoreModule работать с моим ленивым загруженным модулем? Должен ли я реализовать аналогичные функции, такие как forRoot () и forChild (), в моем MainStoreModule?


angular ngrx ngrx-store
person Gregor Doroschenko    schedule 25.01.2018    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Если вы планируете отложить загрузку MainDetailModule, вы не сможете импортировать в него MainStoreModule. Это приведет к созданию еще одного экземпляра основного магазина. Если вы просто хотите подписаться на основной магазин и у вас нет редукторов уровня функций, я считаю, что вы можете импортировать StoreModule как есть, т.е.

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    MainDetailRoutingModule,
    TranslateModule.forChild(),
    StoreModule
  ],
  declarations: [
   // components
  ]
})
export class MainDetailModule { }

Если у вас есть редукторы уровня функций, вы должны использовать

StoreModule.forFeature('feature-name', {feature-reducers})
person the_makeshift_dev    schedule 26.01.2018
comment
Это было для меня решением. Я импортировал MainStoreModule в другие модули, и он породил еще один экземпляр - person Michael Kork.; 07.05.2019

arrow_upward
6
arrow_downward

У меня было такое же неожиданное поведение при загрузке ленивого загруженного модуля из хранилища ngrx (StoreModule.forFeature('feature-name', {feature-reducers})). Хранилище было повторно инициализировано, и все действия, отправленные ранее, были отправлены снова.

Проблема устранена путем обновления ngrx с 4.1.1 o 5.2.0.

person Borys Kupar    schedule 09.04.2018