是否有可能在单独的Angular（子）项目之间共享NGXS商店？

Question

情况：我有一个由主机Angular应用程序组成的微前端，并且许多Angular库作为模块导入，其中包含表现为“子应用程序”的组件。

目标：我想在所有子应用程序之间共享在主机应用程序中创建的NGXS商店，以便每个子应用程序都有自己的全局状态片段，并且它也可以访问全局状态。

在主机应用程序中，我创建状态如下：

@State<ApplicationStateModel>({
  name: 'host',
  defaults: {
    context: {
      language: 'en'
    },
    apps: {}
  }
})
export class ApplicationState {...}

在子应用程序中，我希望能够发送动作以及切片状态，例如：

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());

问题：如何将商店从主机应用程序传递到子应用程序？我猜测可能有一种方法可以通过在导入期间使用模块的.forRoot()或.forFeature()函数来实现这一点。但我完全迷失了。

Answer 1

您可以使用store.snapshot()和store.reset()方法来做到这一点。

让我们假设您的状态模型在您的应用程序中匹配...您的主应用程序拥有一个有效的商店 - >主应用程序调用store.snapshot()，序列化快照对象并将其传播到您的子应用程序（使用websockets，长轮询或什么有你） - >你的子应用程序，在接收序列化快照时，反序列化它并调用store.reset()，传入快照对象。

但这并不能确保商店同步。修改子应用程序中的状态将仅修改状态。您可以反转快照传递以将状态传播回来。正如你所看到的，这很快就会变得混乱......

更好的方法是使用某种前端到后端事件机制将NGXS操作调度传播给订阅它的客户端。例如，对于.NET，您可以使用SignalR（https://dotnet.microsoft.com/apps/aspnet/real-time）。其他堆栈也有其他实现。

希望这有所帮助 ：-）