如何在管理自己的状态片的多个功能模块之间进行交互

Question

我有一个包含多个功能模块的 Angular 应用程序，我正在尝试设置 ngrx 商店。我的想法是让每个模块负责自己的状态。

// app.module.ts

...
imports: [
    ...
    StoreModule.forRoot(reducers),
    EffectsModule.forRoot([]),
]

// first.module.ts

...
    imports: [
        ...
        StoreModule.forFeature('first', firstReducer),
        EffectsModule.forFeature(firstEffects),
    ]

//second.module.ts

...
    imports: [
        ...
        StoreModule.forFeature('second', secondReducer),
        EffectsModule.forFeature(secondEffects),
    ]

在每个第一个和第二个 reducer 中，我使用 firstState 和 secondState 扩展 appState。一切正常，我可以看到正确构建的状态，但我遇到了一个我不知道如何解决的问题。

SecondModule 包含一个从 firstModule 中的 a 组件实例化的哑组件。这个哑组件有一个按钮，当单击该按钮时需要发出一个 http 请求，并在请求成功时为父组件发出一个事件以得到通知。

// secondModule.dumbComponent.ts（在ngrx之前）

click() {
    this.testService.do()
    .subscribe(result => {
        this.event.emit();
    });
}

现在我正在迁移到 ngrx，我已经更改了上面的内容以调度一个动作：

// secondModule（在ngrx之后）

click() {
    this.store.dispatch(new fromSecondModuleActions.do());
}

第二个模块具有调用 this.testService.do() 的效果，但现在我被困在尝试与 firstModule 中的父组件通信，请求 do() 已成功，因此它可以按指示行动。我应该在 firstModule 中监听属于 secondModule 的动作吗？

Answer 1

我对你的场景并不完全清楚，但如果你发现两个不同的模块需要引用它，那么你所拥有的分形状态可能属于全局状态。您的第一个模块引用您的第二个模块这一事实似乎表明可能是这种情况。这似乎也表明这两个模块将捆绑在一起，所以也许你应该结合它们的分形状态。尽管使用延迟加载模块加载状态片段听起来不错，但它并不适合所有内容。它真的只有在没有其他需要引用它的情况下才适合。

您当然可以将效果放在一个共享的地方并在更高级别注册它们并从多个模块中引用它们。但是，这可能没有意义，因为效果通常会影响状态，如果它们影响分形状态，那么您可能不想这样做，因为状态可能已加载，也可能尚未加载。您可以通过在知道如何侦听其状态和操作的子组件上放置 @Output 属性来解决此问题。它可以在成功时发出，并且父组件可以绑定到它。