如何为多个延迟加载的模块注册共享的NgRx效果而无需在应用程序根目录下注册？

Question

我有一个大型的，复杂的，带有Angular前端的应用程序。在前端，我有几个延迟加载的模块。

我的一个功能级别的NgRx存储区需要由另一个功能使用。这两个功能都是延迟加载的。唯一常见的父项是应用程序的根目录，我希望在其中最小化其他文件和代码。

我将第一个功能的NgRx存储文件提取到了自己的模块中，并将该模块导入了该功能。这很好。我还尝试将模块导入其他功能-这就是问题所在。

第二个功能成功加载了*.reducer.ts文件，但没有成功加载相关的*.effects.ts文件。因此，当第二个功能调度一个动作时，没有加载的效果可对该动作执行。

如果在第二个功能之前访问了第一个功能，则效果将按预期加载并工作。当在第一个功能之前加载并使用第二个功能时，就会发生此问题。

无论首先访问哪个功能，如何获取效果文件以正确加载两个功能？

示例代码：

标识符已更改/删除，略有简化

共享效果：

import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { of } from 'rxjs';
import { catchError, concatMap, map } from 'rxjs/operators';
import * as MySharedActionsfrom './mySharedActions.actions';
import { AService} from './services/AService';

@Injectable()
export class MySharedEffects {

  mySharedEffect$ = createEffect(() =>
    this.actions$.pipe(
      ofType(MySharedActions.actionOne),
      concatMap(action => {
        return this.aService.aMethod(action.prop1, action.prop2).pipe(
          map(data=> {
            if (data.succeeded) {
              return MySharedActions.actionOneSuccess({ data});
            } else {
              return MySharedActions.actionOneFailure({ error: data});
            }
          }),
          catchError(error => of(MySharedActions.actionOneFailure({ error }))),
        );
      }),
    ),
  );

  constructor(
    private actions$: Actions,
    private readonly aService: AService,
  ) {}
}

共享商店的模块

import { NgModule } from '@angular/core';
import { EffectsModule } from '@ngrx/effects';
import { StoreModule } from '@ngrx/store';
import { MySharedEffects } from './myShared.effects';
import * as fromMyShared from './myShared.reducer';

@NgModule({
  imports: [
    EffectsModule.forFeature([ MySharedEffects ]),
    StoreModule.forFeature(fromMyShared.mySharedFeatureKey, MySharedEffects.reducer),
    // ...
  ],
})
export class MySharedModule {}

第一个功能模块（一切正常）

import { NgModule } from '@angular/core';
// ...
import { MySharedModule } from './store/myShared.module';

@NgModule({
  entryComponents: [/*...*/],
  imports: [
    // ...,
    MySharedModule ,
    // ...,
  ],
  providers: [/*...*/],
})
export class FirstFeatureModule {}

第二个功能模块（未加载效果）

// ...
import { NgModule } from '@angular/core';
import { MySharedModule } from '../../../first-feature/store/myShared.module';

@NgModule({
  declarations: [/*...*/],
  entryComponents: [/*...*/],
  imports: [/*...*/, MySharedModule , /*...*/],
  exports: [/*...*/],
})
export class SecondFeatureModule{}

Answer 1

您的代码示例应该可以工作。您是否将商店正确地注入了第二个功能模块组件中？如果您没有正确注入商店，则无法在该部分上调度动作，因此效果不会触发。

示例：

进口：

import * as fromApprovals from '../state/reducers';
import * as fromAuth from '../../auth/state/reducers';
import * as fromData from '../../data/state/reducers';

在构造函数中：

// combine your stores this way, should the second feature have it's own part of a store

constructor(private store: Store<fromApprovals.State & fromAuth.State & fromData.State>,'