是否可以在单独的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 )。其他堆栈也有其他实现。

希望这有所帮助 ：-）