Get best of the week

Angular：NGRX的清晰介绍

图片本文的目的是给出ngrx的清晰清晰的视图。为此，我将解释您需要了解和了解的有关ngrx的知识，然后我们将通过简单明了的代码示例来实际操作它。

这是我们将在本文中讨论的主题列表：

  • 什么是ngrx
  • 使用ngrx的好处
  • 使用ngrx的缺点
  • 何时使用ngrx
  • 动作，变速箱，选择器，存储和效果

在使用的一个例子文章继续：“角：使用NGRX的一个例子。”

什么是NGRX


NGRX是受Redux模式启发的一组库，而Redux模式又受Flux模式启发。简而言之，这意味着Redux模式是Flux模式的简化版本，而NGRX是Redux模式的angular / rxjs版本。

我所说的redux的“ Angular / rxjs”版本...“ Angular”部分是ngrx是一个用于angular应用程序的库。“ rxjs”的一部分是ngrx实现围绕rxjs流工作。这意味着它可以使用rxjs提供的可观察的和各种可观察的运算符。

该方案的主要目标是基于三个基本原理来确保容器的可预测状态。


让我们看一下Redux模型的三个原理，并指出它们提供的最重要的好处。

唯一的真理来源


对于redux / ngrx架构，这意味着整个应用程序的状态存储在同一存储库中的对象树中。
在一家商店？稍后我们将讨论存储库，但为了获得一般理解，它们负责维护状态并在被告知状态时对状态进行更改（发送操作时，稍后还将讨论它们）。

拥有一个真理源的好处是无数的，但对我而言，最有趣的（因为这将影响任何角度应用）如下：

  • 创建Angular应用程序时，通常会拆分状态并处理多个服务。随着应用程序的增长，跟踪状态变化变得越来越困难，结果变得杂乱无章，难以调试和维护，只有一个事实来源解决了此问题，因为状态只能在一个对象和一个对象中处理位置，因此调试或添加更改变得更加容易。

只读状态


您永远不会直接更改状态，而是将发送描述对象操作的操作（这些操作可以是获取，添加，删除或更新状态等）。
提交动作？..我们稍后会讨论动作，但是为了获得一般理解，这些是您应用程序上操作的标识符，可以启动（或发送）它们以告知应用程序执行该动作所代表的操作。
通过避免从不同位置更新状态并在集中位置进行响应特定操作的更改，您可以获得许多好处。更不用说最重要的了：

  • 您知道状态的任何改变都只会在一个地方发生。这对调试和测试有很大的影响。
  • 您知道，如果发送了某个操作，则状态下的操作将始终相同。同样，这直接影响调试和测试。

使用简单的功能即可进行更改。


在redux架构的框架内，通过分派动作启动的操作将是一个简单的功能，称为reducers。

这些化简器（记住它们是简单的函数）接收一个动作和状态，根据发送的动作（通常使用switch语句），它们执行该操作并返回一个新的状态对象。

redux应用程序中的状态保持不变！因此，当化简器更改状态中的某些内容时，它将返回一个新的状态对象。

使用纯函数的好处是众所周知的，例如，如果您传递与结果相同的参数，则可以立即对其进行测试。

这种方法还允许我们使用Redux / ngrx开发工具在状态的不同实例之间导航，并查看实例之间发生了什么变化以及谁进行了更改。因此，使用纯函数并返回新的状态实例也对调试产生很大影响。

但是我认为主要的优势在于，通过将组件的所有输入数据绑定到状态属性，我们可以更改更改检测策略以进行推送，这将提高应用程序性能。

太好了。那么，使用NGRX有什么好处？


在讨论redux模板的原理时，我们已经提到了其中的大多数。但是，让我们注意到在应用程序中使用redux模板的最重要的优点（我认为）：

  • , , .
  • redux , .
  • , , , , ngrx rxjs, .
  • ngrx, .

…


  • NGRX, , . , , , . , .
  • . , - , , , , , , . () rxjs .
  • NGRX Google, , , Angular ngrx. - , , .

NGRX


因此，通常认为，当状态管理变得难以维护时，应将ngrx用于大中型项目。一些更狂热的人会说“如果你有财富，那么你就有NGRX”之类的话。

我同意，当您具有重要的状态以及许多使用此状态的组件时，应该在大型或大型项目中使用它，但是您应该考虑到Angular本身提供了许多状态管理解决方案，如果您拥有强大的状态管理功能， Angular开发团队，那么也许您不必担心ngrx。

同时，我相信强大的Angular开发团队也可以决定将ngrx包含在解决方案中，因为他们知道redux模板的全部功能以及rxjs运算符增加的强度，并且他们对两者都感到满意...

如果您希望得到一个简单的答案，决定何时使用ngrx，您将不会得到它，也不会信任任何在组织或团体之外为您提供此答案的人。决定取决于研究优缺点，了解您的团队并考虑他们的意见。

NGRX动作，齿轮箱，选择器，存储和效果


这些是ngrx流的基本构建块。它们中的每一个都承担着开始操作以更改状态并获取数据的过程的一部分。

图片

在图中，我们看到了ngrx流。让我们解释一下...

  1. . , , , .
    …

    «» () . — , NGRX Action. Action' ( GetUserName):

    type (): , , . : '[User] Get User Login''.

    payload ( ): , . , . .
  2. , ( switch) , , .
    ...

    — , : . ngrx , , , , , .
  3. , - , . , - HTTP .
    ...

    ngrx , ngrx.

    Effects , - , , , , , .

    , API.

    , , (success, error ..), , ngrx.
    , ( ), «-» ( , ).
  4. . , ngrx , , .
    ...

    , , , .

    NGRX «» . , , .

    . . «store» , .

    ...

    商店是一个对象（Store ngrx类的实例），它结合了我们前面提到的内容（动作，缩减器，选择器）。例如，当发送一个动作时（使用存储对象的send函数），该存储就是查找并执行相应的reducer的存储。

    他还是应用程序状态持有者。


带有使用示例的续篇：“角度：使用NGRX的示例。”

More articles:


All Articles