The situation: I have a micro-frontend made of a host Angular app and many Angular libraries imported as modules containing components that behave as 'sub-apps'.
The goal: I want to share the NGXS store created in the host app between all sub-apps, so that each sub-app has its own slice of the global state and it can access the global state as well.
In the host app I am creating the state as follows:
@State<ApplicationStateModel>({
name: 'host',
defaults: {
context: {
language: 'en'
},
apps: {}
}
})
export class ApplicationState {...}
and in the sub-apps I want to be able to send actions as well as to slice this state, something like:
constructor(private store: Store) {
// slice the context
this.context$ = this.store.select(state => state.host.context);
// slice this sub-app state
this.state$ = this.store.select(state => state.host.apps['myapp']);
}
...
// dispatch an action
this.store.dispatch(new UpdateContext());
The problem: how can I pass the store from the host app to the sub-apps? I am guessing there might be a way to do this by using the .forRoot() or .forFeature() functions of the module during import.. but I am totally lost.
from Is it possible to share NGXS store between separate Angular (sub)projects?
0 komentar:
Posting Komentar