在过去的两个小时里,我一直在这里和国家管理层阅读(例如Redux和Vuex)。我还没有得到它带来的东西,例如Angular(虽然它与Vue相同,因为它具有双向绑定)。
从我收集到的信息来看,州管理层会将状态和数据放在一个地方(商店)。从那里开始,每个组件都会根据其状态查看此商店以查找所需的数据。
我只在Angular2 +中完成了简单的SPA。我通常做的是通过@Input()和@Output()在模板中使用双重绑定来传递数据。用户给我们一个数字,这个数字在组件和thsi组件中更新,同时通过sub-@ Input()通知其子节点,并通过发送包含该数字的事件通知其祖先。然后我的所有组件都有相同的数据。我也可以使用服务来制作单身人士。
与我一直在做的事情相比,使用redux(或者我的案例中的@ngrx / store)有什么好处?是否只是因为它阻止(或尝试)意大利面条代码?我误解了什么吗?我已经看到一些例子,但没有看到好处和缺点。
谢谢!
答案 0 :(得分:2)
干净的代码:就像你说的那样,阻止意大利面条代码并为你的代码带来一定程度的清洁。
可重用性另一个原因是它不需要总是拥有子组件在其父组件中所需的数据,因此,您的组件将更加可重用。想象所有组件通过@Input
属性获取其状态数据。在这种情况下,组件在应用程序中的位置
结构树很重要,您应该始终将它们放在可以访问该特定状态数据的父级中。但是当您将所有州置于ngrx's store
这样的服务中时,您可以在应用内的每个位置使用所述组件,而不用担心它可以访问状态数据。
不变性:另一个优势是国家的不变性。这是一个非常重要的,可以有多个用例。例如,假设两个不同的父母将相同的州数据传递给两个不同的孩子。当孩子们改变数据时,你最终可能会有两种不同的状态版本。这非常令人不安,最终可能会破坏您应用的逻辑完整性。要解决这个问题,您必须实现一个系统,该系统对所有状态更改进行排队,并告知其他使用该状态的组件,以了解其中所有先前的更改。这是redux
最重要的,ngrx store
以非常简洁的方式为您做到了。
可预测性:通过预先定义更改应用程序状态的所有操作,您实际上消除了应用程序中任何不可预测,不需要和无法跟踪的事件。对应用程序状态的每次更改都只能通过您之前定义的操作之一进行。这对于解决奇怪的功能和调试应用程序非常有用。
工具:您可能已经阅读过,有许多工具,例如 Ngrx DevTools ,它们具有令人惊叹的功能,可帮助您跟踪和调试应用使用ngrx store
时。
您可以通过搜索查看关于此主题撰写的多篇文章。例如this article,this question,this video ...
答案 1 :(得分:1)
Ngrx给你:
传统的静态生成页面可能不适合ngrx。 Ngrx将为您提供非常复杂的SPA。
在一个非常复杂的SPA中,你有很多州:
在复杂的SPA中,您可以通过多种方式修改状态:
因此,在复杂的应用程序中,我们需要一种方法来使所有这些都非常可预测。让我们强加以下约束:
一旦我这样做,我就可以利用redux devtools,看看状态如何一次更新一个动作。以下是主要的好处:
希望以上内容有助于解释如何使代码更加无错误。除此之外,您将看到ngrx将对您的代码强制执行严格的体系结构。如果您在一个大型团队中工作,并且您都可以遵循相同的架构,那么这很好。
最后,ngrx / effects为我们提供了一种使用rxjs运算符处理所有异步代码的方法。
答案 2 :(得分:0)
例如,如果您的应用程序的每个菜单内容都具有相同的按钮,但功能不同,则使用ngrx时,您只能对所有菜单内容使用一个按钮,然后在菜单内容之间进行切换,只需为该按钮分配一个动作即可。