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

时间:2018-03-02 00:29:39

标签: angular ngrx

我有一个带有多个功能模块的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中的组件实例化的。这个哑组件有一个按钮,需要在单击时发出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的动作吗?

1 个答案:

答案 0 :(得分:3)

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

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