Is it possible to share NGXS store between separate Angular (sub)projects?

Question

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.

Answer 1

You might be able to use the store.snapshot() and store.reset() methods to do that.

Let's assume your state models match across your apps... Your master app holds a valid store --> the master app calls store.snapshot(), serializes the snapshot object and propagates it to your sub-app (using websockets, long polling, or what have you) --> your sub-app, on receiving the serialized snapshot, deserializes it and calls store.reset(), passing in the snapshot object.

This does not ensure the stores will be synchronized, though. Modifying the state in a sub-app will modify the state only there. You can reverse the snapshot pass to propagate the state back. As you can see, this can get messy quite quickly...

A better approach would be to use some kind of front-to-back-end event mechanism to propagate NGXS action dispatches to clients that subscribe to it. For .NET, for example, you can use SignalR (https://dotnet.microsoft.com/apps/aspnet/real-time). There are other implementations for other stacks as well.

Hope this helps a little :-)