是否可以在单独的 Angular（子）项目之间共享 NGXS 存储？

Posted 2023-02-19

【中文标题】是否可以在单独的 Angular（子）项目之间共享 NGXS 存储？

【英文标题】：Is it possible to share NGXS store between separate Angular (sub)projects?

【发布时间】：2019-08-06 14:49:21

【问题描述】：

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

目标：我想在所有子应用之间共享宿主应用中创建的NGXS store，这样每个子应用都有自己的全局状态切片，并且可以访问全局状态也是如此。

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

@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() 函数来做到这一点。但我完全迷失了。

【问题讨论】：

您是否延迟加载子应用程序？

@crh225 目前没有，只是在宿主app.module.ts中导入模块

看看我做的这个例子：stackblitz.com/edit/ngxs-todos-mki5w1?file=src/app/…名为“test-app”的文件夹是一个模块。您可以将其视为子应用程序。我不需要做任何特别的事情来让商店连接起来。我在两个订阅商店的不同组件中显示待办事项列表。

@crh225 这只是一个单独的模块，它与拥有一个单独的项目不同.. 在一个单独的项目中，您需要执行 NgxsModule.forRoot(..) （或类似的事情）才能获得商店工作，而在你的例子中你没有。它必须与import TestAppModule from '@myscope/test-app';

一起使用

我正在使用 ngrx 并通过本地范围内的 npm 包拥有单独的应用程序。我知道ngrx和ngxs不是100％相同，但概念应该是。我们延迟加载子应用（npm 包）并将它们实例化为功能存储：ngxs.gitbook.io/ngxs/advanced/lazy

【参考方案1】：

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

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

不过，这并不能确保商店会同步。修改子应用中的状态只会修改那里的状态。您可以反转快照传递以将状态传播回去。如您所见，这很快就会变得一团糟……

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

希望这会有所帮助:-)