CODEWITHSUNDEEP
angularngrx
MartaGalve
MartaGalve

Reputation: 1226

How to interact between multiple feature modules managing their own slice of state

I have an Angular application with multiple feature modules, and I am trying to set up ngrx store. My idea is to make each module responsible for its own piece of state.

// 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),
    ]

In each first and second reducer, I extend the appState with firstState and secondState. It all works fine and I can see the state built correctly, but I have run into an issue I don't know how to solve.

The SecondModule contains a dumb component that is instantiated from the a component in the firstModule. This dumb component has a button that needs to make an http request when clicked and emits an event for the parent component to be notified once the request is successful.

// secondModule.dumbComponent.ts (before ngrx)

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

Now that I am migrating to ngrx, I have changed the above to dispatch an action instead:

// secondModule (after ngrx)

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

The second module has an effect that makes the call to this.testService.do(), but now I am stuck in trying to communicate to the parent component in firstModule that the the request do() has been successful so it can act accordingly. Am I supposed to listen for actions belonging to the secondModule in the firstModule?

Upvotes: 2

Views: 3149

Answers (1)

bygrace
bygrace

Reputation: 5988

I'm not entirely clear on your scenario but maybe what you have as fractal state belongs in global state if you find that two different modules need to reference it. The fact that your first module references your second seems to indicate that this may be the case. Also that seems to indicate that the two modules would be bundled together so maybe you should combine their fractal state. Though loading a slice of state with a lazy loaded module sounds nice it doesn't fit everything. It really only fits if nothing else needs to reference it.

You can certainly put effects in a shared place and register them at a higher level and reference them from multiple modules. However that may not make sense since effects usually affect state and if they affect fractal state then you probably don't want to do that since the state may or may not be loaded yet. You could solve this by placing an @Output property on the child component that knows how to listen to its state and actions. It can emit on success and the parent component can bind to it.

Upvotes: 3

Related Questions