我正在做一个angular 1.x.x项目,考虑将代码升级到angular 2.

现在在我的项目中,我有许多用于处理数据的服务(工厂),这些服务几乎将数据保存在js个数组(缓存和存储)中,并通过使用下划线处理数组来处理这些数据.

我发现angular2中的许多示例都使用ngrx.

What are benefits of using store compare to use data services to handle data?

Do I need multiple store for my app if I have multiple data type (stock, order, customer...)?

How can I structure (design) my app to deal with multiple data types like these?

推荐答案

尽管你的问题主要是基于意见的,但我可以给你一些 idea ,为什么ngrx是一个好的 Select .尽管人们说将所有应用程序状态放在一个对象(单一状态树)中并不是一个好主意.然而,在我看来,不管怎样,你的州都会在那里.有了一家store ,它只需一次就能发现和跟踪Mutations ,而不是遍及各处,并由组件在本地维护.此外,您可以从应用程序内的存储区 Select 特定属性,因此只能 Select 您关心的数据.如果您随后通过始终返回数组并使用可观察对象来接受减法器中的不变性,则可以使用ChangeDetectionStrategy OnPush.OnPush会给您带来很好的性能提升.让我们来看一下从官方的Angular docs取来的以下数字:

enter image description here

如您所见,一个Angular App是使用组件架构构建的,这会生成一个组件树.组件上的OnPush意味着只有当输入属性更改时,更改检测才会生效.例如,如果Child BOnPush,Child ADefault,并且您更改了Child A内部的某些内容,则Child B的更改检测器不会被触发,因为没有任何输入属性更改.但是,如果您更改了Child B中的某些内容,Child A将重新呈现,因为它具有默认的更改检测器.

关于性能和单一状态树的内容就这么多了.该应用store 的另一个优点是,您可以对代码和状态更改进行推理.所以现实中最有棱角的1.x应用程序是scope soup.以下是卢卡斯·鲁贝尔克(Lukas Ruebbelke)的一张blog post码的精美图片:

enter image description here

这张照片很好地说明了这一点.来自Tero Parviainen的另外article名用户讲述了他如何通过禁止ng-controller款应用程序来改进自己的Angular应用程序.所有这些都与范围和管理不断变化的状态有关,这是一个困难的问题.redux动机说明如下see here:

如果一个模型可以更新另一个模型,则视图可以更新模型, 它更新了另一个模型,而这反过来可能会导致另一个 要更新的视图.在某种程度上,你不再理解发生了什么 在您的应用程序中,因为您已无法控制何时、为什么和如何 它的状态.当一个系统是不透明和不确定的时,很难 复制错误或添加新功能.

通过使用ngrx/store,你实际上可以绕过这个问题,因为你会在应用程序中获得清晰的数据流.

由于ngrx受到redux的高度启发,我想说同样的main principles个应用程序:

  • 唯一的真相来源
  • 状态为只读
  • 更改是使用纯函数进行的

所以,在我看来,最大的好处是,你可以很容易地跟踪用户交互和状态变化的原因,因为你可以调度操作,这些操作总是指向一个点,而在普通模型中,你必须找到所有的引用,并看到什么变化,什么变化,什么时候变化.

使用ngrx/store还可以使用devtools查看调试状态容器和恢复更改.时间旅行,我想,是redux的主要原因之一,如果你使用的是普通的旧模型,这是相当困难的.

@muetzerich已经提到的可测试性也是使用ngrx/store的一个好处.还原器是纯函数,这些函数很容易测试,因为它们接受输入并简单地返回输出,不依赖于函数之外的属性,也没有副作用,例如http调用等.

说到底线,我想说的是,不需要使用ngrx/store来做任何这些事情,但你会受到限制(上面提到的三个原则),它们提供了一个共同的模式,并带来了很好的好处.

对于您的问题:

Do I need multiple store for my app if I have multiple data type (stock, order, customer...)?

不,我不建议使用多家store .

How can I structure (design) my app to deal with multiple data types like these?

也许Tero Parviainen的这blog post本书可以帮助你了解如何设计你的store .他解释了如何为示例应用程序设计应用程序状态树.

Angular相关问答推荐

Angular 单元测试组件s @ Input.'变化值检测

Toastr在独立组件上的Angular17实现

AG网格Angular 快捷菜单调用函数

当嵌套在异步容器中时,S会阻止具有动态值的ionic 段工作吗?

无法在 app.component.html 中呈现自定义组件

重新打开模态时 ng-select 中的重复值 - Angular

带有Angular 中断的进度条

Angular 无法从后端获取数据到前端

如何在对话框angular material内对齐按钮?

Angular 2+ 一次性绑定

如何在 Angular 2 中获取与 ElementRef 关联的组件的引用

Springboot/Angular2 - 如何处理 HTML5 url?

在 Angular 2 中订阅路由参数和查询参数

如何从Angular 2 中的按钮单击触发输入文件的单击事件?

Angular url加号转换为空格

visibility:hidden

ConnectionBackend 没有提供程序

Angular 应用程序中的语法错误:Unexpected token <

为什么 ngOnInit 被调用两次?

如何在Angular 2中将对象从一个组件传递到另一个组件?