国家管理（例如ngrx / store）给Angular2 +带来了什么？

Question

在过去的两个小时里，我一直在这里和国家管理层阅读（例如Redux和Vuex）。我还没有得到它带来的东西，例如Angular（虽然它与Vue相同，因为它具有双向绑定）。

从我收集到的信息来看，州管理层会将状态和数据放在一个地方（商店）。从那里开始，每个组件都会根据其状态查看此商店以查找所需的数据。

我只在Angular2 +中完成了简单的SPA。我通常做的是通过@Input（）和@Output（）在模板中使用双重绑定来传递数据。用户给我们一个数字，这个数字在组件和thsi组件中更新，同时通过sub-@ Input（）通知其子节点，并通过发送包含该数字的事件通知其祖先。然后我的所有组件都有相同的数据。我也可以使用服务来制作单身人士。

与我一直在做的事情相比，使用redux（或者我的案例中的@ngrx / store）有什么好处？是否只是因为它阻止（或尝试）意大利面条代码？我误解了什么吗？我已经看到一些例子，但没有看到好处和缺点。

谢谢！

Answer 1

实际上它有很多优点。

• 干净的代码：就像你说的那样，阻止意大利面条代码并为你的代码带来一定程度的清洁。

• 可重用性另一个原因是它不需要总是拥有子组件在其父组件中所需的数据，因此，您的组件将更加可重用。想象所有组件通过@Input属性获取其状态数据。在这种情况下，组件在应用程序中的位置 结构树很重要，您应该始终将它们放在可以访问该特定状态数据的父级中。但是当您将所有州置于ngrx's store这样的服务中时，您可以在应用内的每个位置使用所述组件，而不用担心它可以访问状态数据。

• 不变性：另一个优势是国家的不变性。这是一个非常重要的，可以有多个用例。例如，假设两个不同的父母将相同的州数据传递给两个不同的孩子。当孩子们改变数据时，你最终可能会有两种不同的状态版本。这非常令人不安，最终可能会破坏您应用的逻辑完整性。要解决这个问题，您必须实现一个系统，该系统对所有状态更改进行排队，并告知其他使用该状态的组件，以了解其中所有先前的更改。这是redux最重要的，ngrx store以非常简洁的方式为您做到了。

• 可预测性：通过预先定义更改应用程序状态的所有操作，您实际上消除了应用程序中任何不可预测，不需要和无法跟踪的事件。对应用程序状态的每次更改都只能通过您之前定义的操作之一进行。这对于解决奇怪的功能和调试应用程序非常有用。

• 工具：您可能已经阅读过，有许多工具，例如 Ngrx DevTools ，它们具有令人惊叹的功能，可帮助您跟踪和调试应用使用ngrx store时。

您可以通过搜索查看关于此主题撰写的多篇文章。例如this article，this question，this video ...

Answer 2

Ngrx给你：

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

传统的静态生成页面可能不适合ngrx。 Ngrx将为您提供非常复杂的SPA。

在一个非常复杂的SPA中，你有很多州：

• 服务器状态被复制到客户端。客户端和服务器需要以某种方式同步。
• 客户端状态将其保存在内存中，并可能存储在localstorage和/或indexeddb中。另一个同步问题。
• 您的代码中的多个位置具有相同的状态，从而产生不一致的UI。例如，您有一个聊天窗口，上面显示一条新消息，但是当您点击它时没有新消息。
• 路由器网址为州

在复杂的SPA中，您可以通过多种方式修改状态：

• 用户点击按钮
• 用户点击链接以导航到新网址
• 用户单击导致api调用发生的按钮，然后在某个未来点更新状态
• 更新州的网页

因此，在复杂的应用程序中，我们需要一种方法来使所有这些都非常可预测。让我们强加以下约束：

• 我们无法直接修改我们必须使用有效负载调度操作的状态。
• 一次只能有一件事可以更新我们的州。
• 我们的状态是不变的。
• 我们尽可能地避开当地国家

一旦我这样做，我就可以利用redux devtools，看看状态如何一次更新一个动作。以下是主要的好处：

• 我看到所有操作的明确日志以及他们如何修改状态
• 我可以重播所有操作并相应地查看UI更新
• 如果发生错误，我可以缩小导致它的行为。我还可以查看之前的操作，看看它们是否有助于该错误。

希望以上内容有助于解释如何使代码更加无错误。除此之外，您将看到ngrx将对您的代码强制执行严格的体系结构。如果您在一个大型团队中工作，并且您都可以遵循相同的架构，那么这很好。

最后，ngrx / effects为我们提供了一种使用rxjs运算符处理所有异步代码的方法。

Answer 3

例如，如果您的应用程序的每个菜单内容都具有相同的按钮，但功能不同，则使用ngrx时，您只能对所有菜单内容使用一个按钮，然后在菜单内容之间进行切换，只需为该按钮分配一个动作即可。