0

开始学习 Angular，但不确定如何使用 ngrx 构建结构。

简而言之，我有一个服务，其中包含两个数组，以及以特定方式操作这些数组的方法。我创建了服务，导致多个组件需要操作数组的逻辑。其中一些将使用其中一个数组的相同状态，一些将具有不同的状态。

不同的组件将访问此服务，对数组进行更改并将数组返回以进行渲染。然而，在网上进行研究之后，似乎普遍的做法是保持服务无状态。然后我遇到了ngrx商店。

所以我想我可以把这些数组放在主存储中而不是放在服务中，所以它变成：

组件会使用服务，操作数组，服务会触发一个动作，然后存储会通知组件数组的变化

但是查看 ngrx https://ngrx.io/generated/images/guide/store/state-management-lifecycle.png中的图表。组件和服务之间会有一个箭头，当应用程序变大时，这似乎会造成混乱。

那么我应该如何处理呢？我在这里误解了什么吗？也许该服务应该是一个组件（但阅读https://angular.io/guide/styleguide#delegate-complex-component-logic-to-services，看起来我在做正确的事情，将逻辑移出组件到服务，使组件变得简单）。

任何意见是极大的赞赏

4

1 回答 1

3

尝试帮助您了解 NgRx 并设计最适合您的架构的一些提示：

你应该只有一个单一的事实来源。这意味着只保留原始数据进入状态。区分同一数据的多个视图或原始数据的突变在这里很重要。

状态通过 Actions 变为 reducer 函数。这些纯函数（reducer）将状态 A 转换为状态 B。例如：将新项目添加到数组中。

选择器专用于从存储中选择（提取）数据片。您可以考虑数据库（状态）和 SQL 选择（选择器）。

这意味着您可以检索数组的数据子集、过滤、排序……以满足特定组件的需要。也是多个状态切片的组合，作为新类型返回。

使用 NgRx，服务有时确实会失去一些战略角色。就我的观点和我的经验而言，服务主要用于对 api 后端的外部请求。

转换逻辑在 reducer 中，应该保持简单。提取逻辑（视图）在选择器中。

为了保持这个组织清晰和可维护，最好使用单独的文件，例如：

  • 我的状态.reducer.ts
  • 我的状态.selectors.ts
  • 我的状态.actions.ts ...

您还应该区分两种类型的组件：

  • 转储组件：只有UI组件，没有任何逻辑，没有对 NgRx、状态、服务的调用或依赖...只是@Input，并且@Output带有简单的数据。

  • 容器或智能组件：将它们视为交通控制塔。它们依赖于 NgRx，它们可以调度操作，并订阅状态更新（通过选择器）。它们组织从选择器和转储组件检索的数据之间的链接。

于 2020-07-06T07:38:10.297 回答