angular - 在 redux/ngrx 应用架构中初始化模型对象的位置

Question

背景:

团队正在使用 Angular 和用于状态管理的@ngrx 库构建一个基于 REST 的大型 Web 应用程序。

我们希望将来自服务器的实体建模为 TypeScript 类。这些可能是:帐户、用户等

这实现了:

• 与 API 松耦合；如果响应改变，只有模型必须改变
• 封装基本功能，例如名字和姓氏的字符串连接，使 fullName

不确定性在于，在应用程序的时间线期间，何时初始化模型，调用:new Account(accountResponse)。

传统逻辑建议在服务中尽早执行此操作以及检索帐户的逻辑(无论是从缓存、服务器响应等)。

this.apiService.fetch(AccountService.URL)
      .map(accounts => accounts.map((a: AccountResponse) => new Account(a)));

此方法由 ngrx 效果调用，然后在成功响应后，Account 对象由 reducer 添加到存储中。

然而，这是可行的...ngrx/redux“bestpractice”声明只有普通对象和基元应保留在存储中，以便于序列化等原因。

要遵守此建议，必须在更远的地方初始化 Account 对象。在单个组件中， in a state selector ，或者通常在使用帐户的任何地方。

这对我来说没有意义，因为原始帐户响应对象在应用程序中传递，这在某种程度上破坏了首先将它们包装在模型中的意义。

应用在结构上类似于@ngrx/example book 应用程序，鉴于其简单性，不会将服务器响应包装在模型对象中。

---

问题:

• 将初始化的类保留在存储中有哪些不利影响(除了可串行化)？

• 如果只将普通对象保存在商店中，那么在通过应用程序的数据流中，模型类的最佳初始化位置是什么？

Answer 1

使用 ngrx 的最简单方法是将其视为数据库，而不仅仅是 javascript 共享对象缓存。您不会在数据库中存储 javascript 助手，ngrx 也是如此。

您可以停止使用模型函数，而是在需要时使用实用方法，或者您可以使用可观察运算符包装选择器结果。像 state.pipe(select(mySelector), myWrapFunction) 之类的东西，虽然你最终每次都会重新创建你的包装器。

您可能想查看 View 模型设计模式(例如 [MVVM] ( https://en.m.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel ))以查看与您尝试执行的操作类似的方法。