如何使用NgRx和其他延迟加载的Angular模块为现实应用建模

Question

我是Angular / NgRx的新手，我在理解NgRx功能和Angular模块之间的关系时遇到了麻烦。我有一个特定的用例，但我认为这个问题可以帮助其他人在对实际应用场景进行建模时遵循一些最佳实践。

我想建模以下内容：

我的数据库中有一组盒子，每个盒子可以包含N个项目，这些项目以图形方式相互连接。每个项目仅连接到其框内的项目。 用户可以通过以下3种途径与盒子互动：

1. /boxes =>显示用户拥有的所有盒子，用户可以添加或删除盒子
2. /boxes/:id =>显示一个特定的框及其内部内容。用户只能看到框内项目的图
3. /boxes/:id/edit =>授权用户可以编辑框的内容，添加，删除，编辑项目及其之间的连接（以便他们可以编辑项目的图）。他们还可以删除包装箱并更新一些包装箱属性（重量，尺寸等）。

我想将这些路线分为2个延迟加载的角度模块，一个包含框列表（1），一个包含单个框动作（2、3），因为图形编辑模式非常繁琐，当用户导航到框列表页面时，不想加载所有图形组件和动画。

问题：

• 鉴于框上的某些动作在（1）和（2,3）中均可执行，我应该如何为应用程序中的ngrx存储建模？例如：我可以从“框”列表和框详细信息中更新一个框（在列表中，我可以创建一个新框并为其命名，在/ edit页面中，我可以更改其名称）。 Box状态应存储在哪个模块中？如果我将其存储在列表页面中，那么当我从编辑页面更改属性时，我应该在另一个模块中更新存储（这是否可能/正确？）。如果将其存储在详细信息页面中，那么在显示列表时如何显示框属性？
• 如果我想在用户只是想看一个盒子的时候看到编辑部分太重而无法加载，我想将（2）和（3）分成两个不同的延迟加载模块怎么办？我是否应该在2个模块中复制我的商店并具有相同的状态和reducer，但仅具有不同的动作？我应该分享商店吗？怎么样？那我的组件呢？当然，有很多组件仅需要在这两个模块之间共享。我应该创建一个共享模块，而不是Angular文档建议的“主要”共享模块吗？