Ngrx - 减速器无法接收动作

Question

我正在尝试在应用初始化时加载一些缓存的详细信息。我正在使用内置的 APP_INITIALIZER 角度提供程序。

在这个提供程序中，我正在运行 AppService 的 init 方法并加载这些缓存信息，调度一些操作。 4 个动作中有 3 个正在优雅地调度，但是当我尝试调度订单详细信息时，reducer 没有得到这个动作，我无法将订单详细信息传输到存储。

但是当我查看 redux chrome 扩展时，我可以看到我的操作正在被调度，但是如果我在 reducer 中记录传入的操作，我看不到我的操作。

奇怪的是，如果我在三秒后使用 setTimeOut 方法运行 loadCachedOrderDetails 方法，setCachedOrderDetails 操作成功调度......

到底发生了什么？如何正确调度 setCachedOrderDetails 操作？

这里是提供者的完整定义

    {
      provide: APP_INITIALIZER,
      useFactory: (app: AppService) => () => app.init(),
      deps: [AppService],
      multi: true
    }

AppService 初始化方法

  init() {
    const request = this.loadCachedRequest();
    if (request) {
      this.loadCurrentLocation(request);
    }
    this.loadCachedBasketItems();
    this.loadCachedOrderDetails();
  }

方法

  loadCachedOrderDetails() {
    const details = JSON.parse(localStorage.getItem('orderDetails'));
    if (details) {
      this.store.dispatch(PanelActions.setCachedOrderDetails({details}));
    }
  }

和我注册减速器的面板商店

@NgModule({
  imports: [
    StoreModule.forFeature(panelFeatureKey, fromPanel.reducer),
    EffectsModule.forFeature([PanelEffects]),
  ],
  exports: [
    StoreModule,
    EffectsModule
  ]
})
export class PanelStoreModule {
}

Answer 1

如果您使用EffectsModule.forFeature，则表示此模块不是主要模块，并且您的应用已经初始化，并且您的模块很可能在稍后需要应用时被延迟加载或初始化。

因此，您不能依赖任何 INIT 触发器。因为它们可以在您设置功能并准备好监听操作之前发出。

但您可以简单地使用模块的构造函数来调度所需的操作。

@NgModule({
  imports: [
    StoreModule.forFeature(panelFeatureKey, fromPanel.reducer),
    EffectsModule.forFeature([PanelEffects]),
  ],
  exports: [
    StoreModule,
    EffectsModule,
  ]
})
export class PanelStoreModule {
  constructor(app: AppService) {
    app.init();
  }
}

或者干脆将效果和reducer移动到forRoot部分。