🌅 👸🏿 ↕️ Angular：使用NGRX的示例 🙁 👩‍👩‍👧‍👧 💭

NGRX示例

在我们的示例中，将有一个用户列表，一个用户详细信息页面以及一些在启动应用程序时应获取的初始配置信息。我们将实现一些重要的NGRX线程。

行动计划：

库安装
创建用于存储的文件夹结构
创建存储和初始值
创建动作
创建齿轮箱（减速器）
创造效果
创建选择器
最终设定
在组件中使用存储

所以让我们做吧...

库安装

我们将使用Angle Cli创建项目，然后添加ngrx库。

创建一个项目：

ng new angular-ngrx --style=scss

添加必要的NGRX库：

npm install @ngrx/core @ngrx/store @ngrx/effects @ngrx/store-devtools @ngrx/router-store --save

我们几乎安装了所有ngrx生态系统库。它们中的大多数都清楚地描述了它们的目的：核心，存储，效果，但是您可能想知道为什么需要它们？

store-devtools-功能强大的调试工具。
路由器存储 -将角度路由器的状态保存在存储中。

用于存储的文件夹结构

让我们从讨论存储库的文件结构开始。此文件结构和整个存储配置必须存在于应用程序的主模块中，但是在我们的示例中不存在，因此存储将存在于我们的应用程序的主模块中（如果在主模块中执行此步骤，则步骤几乎相同）。

文件夹结构是实际存储组成的表示。您将拥有一个主文件夹，名称为“ store”和五个子文件夹，分别代表商店中的每个关键角色：“动作”，“效果”，“重做”，“选择器”和“状态”。

创建存储和初始值

如前所述，我们将有两个主要部分：我们的应用程序，用户和配置。对于它们两者，我们都需要创建一个状态和一个初始状态，并为应用程序的状态做同样的事情。

我们为用户定义和配置创建了两个界面。我们还有一个用于用户的HTTP响应，它只是一个IUser数组。

让我们从用户状态（store / state / user.state.ts）开始：

我们在这里做什么：

我们创建并导出具有用户环境结构的界面。
我们对初始用户状态执行相同操作，该用户状态实现了新创建的界面。

对于配置状态，我们执行相同的操作（store / states / config.state.ts）：

最后，我们需要生成应用程序状态（store / states / app.state.ts）：

应用程序状态包含用户状态和配置，以及路由器的状态。
然后，我们设置应用程序的初始状态。
最后，它导出函数以获取初始状态（我们稍后将使用它）。

创建动作

确保阅读上一篇文章中讨论的动作定义。

我们需要为用户和设置创建操作。让我们从用户操作（store / actions / user.actions.ts）开始：

让我们逐步看一下代码：

Enum, . , , , .
. Action ngrx. , , , .
, , . , , , .

仅此而已...创建动作很容易。让我们看一下配置操作的外观（store / actions / config.actions.ts）：

在这里没有什么新鲜的了，您现在可能会对此文件中发生的一切感到满意。

太好了，我们已经确定了状态和动作……让我们创建齿轮！

创建变速箱

请务必阅读上一篇文章中讨论的齿轮箱的定义。

我们将拥有变速箱来响应某些动作，因为其他动作将由稍后将要实现的效果来处理。

我们将需要一个用于用户的reducer，另一个用于配置，但是我们还需要生成应用程序reducer，让我们从查看用户reducer（store / redurs / user.reducers.ts）开始：

让我们讨论实现：

reducer声明接收状态，在这种情况下，还接收用户操作，并返回IUserState。
使用switch语句，我们为每种可能的操作类型生成观察值。
每个案例都返回一个新对象，这是旧状态与新值合并的结果。
所有变速箱均具有默认结果，该结果仅返回状态而不进行任何更改。

这就是全部。在变速箱中找不到其他任何东西。让我们看一下配置化简器（state / redurs / config.reducers.ts）：

最后，看一下应用程序化简器（store）：

在这里，我们将所有化简器添加到应用程序的化简器映射中。我们使用动作减少器映射进行其他类型检查。稍后，我们将为该应用程序提供store模块的reducer。

添加效果

请务必阅读我们在上一篇文章中讨论的“效果”的定义。

您可能已经注意到，在变速箱中，我们不会处理所有操作。这是因为我们将处理效果中遗漏的动作，因为这些动作具有副作用。

让我们从自定义效果开始（store / effects / user.effects.ts）：

该文件中发生了很多事情。让我们尝试解释一下它们：

我们使用注入装饰器声明自定义效果。
我们使用ngrx / Effects提供的效果装饰器声明效果。
使用ngrx / Effects提供的动作，我们将为此效果启动操作员的管道。
下一步是使用ofType运算符设置效果动作的类型。
以下部分是我们用来获取所需内容的rxjs运算符（我们已经在本文中具有指向rxjs文档的链接）。
最后，在最后一条语句中，Effect将发送另一个动作。
在构造函数中，我们实现将要使用的服务，ngrx / Effects的操作，在这种情况下还实现存储库（请注意，这是一个演示，并从存储库中的用户列表中获取选定的用户）。

这几乎与您将看到的结构相同。在这种情况下，我们仅发送成功的操作，但是我们可以发送错误或要在应用程序缩减程序中处理的任何其他状态。

考虑配置效果（store / effects / config.effects.ts）：

现在该讨论选择器了……

, .

在任何地方重复我们的状态片都是没有意义的，因此让我们创建一些可以重用的选择器。

与往常一样，让我们先看一下用户选择器（store / selector / user.selectors.ts）：

这确实是可以理解的，因为我们没有在选择器中进行任何数据转换，而只是通过使用函数返回选择器所引用的商店切片来自ngrx / store的createSelector。

第一个参数是用于接收数据的存储片段（它可以是一个包含状态的多个部分的数组），第二个参数是一个匿名函数，它将决定选择器将返回什么。

让我们看一下配置选择器（store / selectors / config.selectors.ts）：