状态管理（例如ngrx/store）对Angular2+有什么好处？

Question

在过去的两个小时里，我一直在阅读与状态管理相关的内容（例如Redux和Vuex）。但我仍然不明白它对于Angular（尽管对于具有双向绑定的Vue也是如此）的作用。

据我所知，状态管理将状态和数据放置在一个地方（存储区）。从那里，每个组件都会查找它想要的数据，根据其状态来查找存储区。

我只在Angular2+中做了简单的SPA。我通常使用@ Input（）和@ Output（）通过模板进行双向绑定来传达数据。用户给我们例如一个数字，这个数字在组件中被更新，而该组件会通过子@ Input（）通知它的子组件，并通过发送包含该数字的事件来通知它的祖先。然后，我所有的组件都有相同的数据。我也可以使用服务来实现单例。

相对于我一直以来所做的事情，使用redux（或我的情况下的@ngrx/store）的优点是什么？它只是为了防止（或尝试防止）混乱的代码吗？还是我的理解有误？我看到了一些例子，但是并没有看到它的优点和缺点。

谢谢！

- Despo

Answer 1

实际上它有多个优点。

• 清晰的代码：正如你所说，防止混乱的代码并使您的代码更加清晰。

• 可重用性：另一个优点是它消除了始终需要将子组件所需的数据放在其父组件中的需求，因此，您的组件将更具可重用性。想象一下，所有组件都通过@Input属性获取其状态数据。在这种情况下，您的组件在应用程序结构树中的位置很重要，您应该始终将它们放在具有访问该特定状态数据的父级中。但是当您将所有状态放入诸如ngrx store之类的服务中时，您可以在应用程序中的任何地方使用该组件，并且不必担心它对状态数据的访问。

• 不变性：另一个优点是状态的不变性。这是非常重要的，并且可以有多个用例。例如，假设两个不同的父级向两个不同的子级传递相同的状态数据。当子级更改数据时，您可能会得到两个不同版本的状态。这非常麻烦，最终可能会破坏应用程序的逻辑完整性。为了解决这个问题，您必须实现一个系统，该系统会排队所有状态更改，并告诉使用状态的其他组件有关其中的所有先前更改。这就是redux所做的事情，而在此之上，ngrx store以非常简洁的方式为您完成。

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

• 工具：正如您可能已经阅读的那样，有许多像Ngrx DevTools这样的工具具有惊人的功能，可以帮助您在使用ngrx store时跟踪和调试应用程序。

您可以搜索多篇关于此主题的文章，例如此文章，此问题，此视频等。

- GHB

Answer 2

Ngrx 提供以下功能：

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

传统的静态生成页面可能不适合使用 ngrx。在非常复杂的单页应用程序中，ngrx 会发挥其优势。

在非常复杂的单页应用程序中，您有很多状态：

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

在复杂的单页应用程序中，您有许多修改状态的方式：

• 用户单击按钮
• 用户单击链接以导航到新的 url
• 用户单击按钮导致 api 调用发生，然后在某个未来的时间点更新状态
• Websockets 更新您的状态

因此，在一个复杂的应用程序中，我们需要一种方法来使所有这些变得非常可预测。让我们遵守以下限制:

- 我们不能直接修改状态，必须分派一个带有有效负载的操作来完成。 - 只能有一个东西更新我们的状态。 - 我们的状态是不可变的。 - 我们尽可能避免使用本地状态。

一旦做到这一点，我就可以利用 Redux DevTools，并查看状态如何一次一个操作地更新。以下是主要好处:

- 我可以清晰地看到所有操作的日志，以及它们如何修改状态。 - 我可以回放所有操作，并相应地查看 UI 如何更新。 - 如果发生错误，我可以缩小引起错误的操作范围。我还可以查看之前的操作，以查看它们是否对错误有所贡献。

希望以上内容有助于说明如何使您的代码更加无 Bug。除此之外，您会发现ngrx将强制执行严格的体系结构。如果您在一个大型团队中工作，并且您都可以遵循同样的架构，那么这是很好的。

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

- seescode