当前位置 : 首页 » 互动问答 » 正文

状态管理(例如ngrx / store)为Angular2 +带来了什么?

分类 : 互动问答 | 发布时间 : 2018-04-27 17:03:20 | 评论 : 2 | 浏览 : 34 | 喜欢 : 1

在过去的两个小时里,我一直在阅读关于状态管理的文章(例如Redux和Vuex)。我仍然没有得到的是它带来了什么,例如Angular(虽然它与Vue相同,因为它具有双向绑定)。

从我所收集的内容来看,状态管理会将状态和数据放入一个地方(商店)。从那里开始,每个组件都会根据其状态查看该商店以查找它想要的数据。

我只在Angular2 +中做过简单的SPA。我通常做的是通过@Input()和@Output()与模板中的双重绑定来传递数据。用户给我们例如一个数字,这个数字在组件和组件中被更新,同时通过sub @ Input()通知它的孩子,并通过发送一个包含该数字的事件来通知它的祖先。我的所有组件都具有相同的数据。我也可以使用服务来创建单例。

对我一直在做的事情,使用redux(或者我的情况下为@ ngrx / store)有什么好处?仅仅是因为它阻止(或尝试)意大利面代码?我误解了什么吗?我看过一些例子,但没有看到好处和缺点。

Thanks!

回答(2)

  • 1楼
  • Ngrx为您提供:

    • 以可预测的方式管理您的状态
    • 易于调试代码
    • 通过ngrx / effects操作复杂的异步代码

    传统的静态生成的页面可能不适合用于NGRX。在非常复杂的SPA中,你有很多状态:

    服务器状态被拷贝到客户端。客户端和服务器需要以某种方式进行同步。

    • 客户端状态将保存在内存中,并可能存储在localstorage和/或indexeddb中。另一个同步问题
    • 您的代码中的多个位置具有相同的状态,导致UI不一致。例如,你有一个聊天窗口,显示一条新消息,但是当你点击它时,没有新消息
    • 路由器url是状态
    • 在一个复杂的SPA中,你有许多方法来修改状态:<notranslate >用户点击一个按钮

    用户点击一个链接导航到一个新的网址

    • 用户点击一个按钮,导致api调用发生,然后在某个未来点更新状态
    • 更新您的状态的Websockets <notranslate >因此,在一个复杂的应用程序中,我们需要一种使所有这些都非常可预测的方法。让我们强加下面的约束:
    • 我们不能直接修改状态,我们必须用一个有效载荷分派一个动作来完成它。
    • 一次只能有一件事情可以更新我们的状态。

    我们的状态是不变的。

    • 尽我们所能避免本地状态
    • 一旦我这样做了,我就可以利用redux devtools并查看状态如何一次更新一个动作。主要好处如下:
    • 我看到所有操作的明确日志以及它们如何修改状态
    • 我可以重放所有操作并相应地查看UI更新

    如果发生错误,我可以缩小范围哪个行为导致了它。我也可以查看以前的操作,看看它们是否对bug造成了影响。

    • 希望以上内容有助于解释如何让代码更加无bug。除此之外,您将看到ngrx将在您的代码上实施严格的体系结构。如果你在一个庞大的团队中工作,并且你都可以遵循相同的架构,这很好。
    • 最后,ngrx / effects为我们提供了一种使用rxjs操作符处理所有异步代码的方法。
    • If a bug happens I can narrow down which action caused it. I can also look a previous actions to see if they contributed to the bug.

    Hopefully the above helps explain how you can make your code more bugfree. In addition to that you will see that ngrx will enforce a strict architecture on your code. This is good if you work in a large team and you can all follow the same architecture.

    Finally ngrx/effects gives us a way to handle all our async code using rxjs operators.

  • 2楼
  • 实际上它有很多优点。

    • spaghetti-code 就像你说的那样,防止另一个原因是它消除了在父组件中始终拥有子组件所需的数据的需要,因此,组件将更具可重用性。想象你的所有组件都通过并为你的代码带来一定程度的清洁。干净的代码:

    • ngrx's store 属性获取它们的状态数据。在这种情况下,将组件放置在应用程序的内部 结构树将非常重要,您应始终将它们放在可访问特定状态数据的父级中。但是当你把所有的状态放在像@Input这样的服务中时,你可以在应用程序中的每一个地方使用这个组件,而不用担心它访问状态数据。另一个优势是国家的不变性。这是非常重要的一个,可以有多个用例。例如,想象两个不同的父母将相同的状态数据传递给两个不同的孩子。当孩子们改变数据时,你最终可能会得到两种不同的状态。这非常麻烦,最终可能会破坏应用程序的逻辑完整性。为了解决这个问题,你必须实现一个系统,它将所有的状态改变排队,并且还告诉其他组件使用状态了解所有先前的改变。这就是可重用性:

    • 。应用程序状态的每次更改只能通过您之前定义的其中一个操作进行。这对于消除奇怪的功能和调试应用程序非常有用。,最重要的是,redux以非常整洁的方式为你做。通过预先定义更改应用程序状态的所有操作,实际上可以消除应用程序中的任何不可预测的,不需要的和不可追踪的事件,从而实现ngrx store不可变性:

    • 您可能已经阅读过,有许多工具,如可预测性:

    • tools:,它们具有令人惊叹的功能,可以帮助您跟踪和调试您的应用程序使用时,您可以通过搜索来检查写在该主题上的多篇文章。像 Ngrx DevTools ngrx store.

    这篇文章这个问题 , this question, this video ...

相关阅读: