NgRx +加载指示器

• 下载源代码
• 把它放到GitHub上

先

首先，让我们看一个例子状态接口，其中包括加载财产。您可以在示例应用程序中看到第一个示例ngrx-refactor-2分支机构:

＄git结帐ngrx-refactor-2美元cd服务器& &纱

这是删减后的内容src / app /州/国家/还原剂/ powers.ts：

出口接口状态扩展EntityState<权力>｛加载：布尔；｝出口常量适配器：EntityAdapter<权力>＝createEntityAdapter（）；常量initialState：状态＝适配器．getInitialState（｛加载：假｝）；出口函数减速机（状态：状态＝initialState，行动：PowersAction）｛开关（行动．类型）｛情况下LOAD_POWERS：返回｛．..状态，加载：真正的｝；情况下LOAD_POWERS_SUCCESS：状态＝｛．..状态，加载：假｝；返回适配器．addAll（行动．有效载荷，状态）；默认的：返回状态；｝｝出口常量isLoading＝（状态：状态）＝>状态．加载；

有几点需要注意:

• 首先，我们定义a加载财产在我们状态接口。
• 其次，我们将值设置为假在initialState．
• 在我们的减速机()函数，我们切换值。

控件中的loading属性创建一个选择器src / app /州/国家/还原剂/ index.ts文件:

出口常量isPowerLoading＝createSelector（getPowersEntityState，fromPowers．isLoading）；

在有状态(容器)组件中，我们可以使用选择器从存储中选择这个值。这个例子来自src / app / + /集装箱/索引/ index.component.ts权力文件:

加载：可观测的<布尔>；ngOnInit（）｛这．加载＝这．商店．管（选择（isPowerLoading））；｝

在无状态(哑)组件中，我们可以使用这个值来切换Material的微调组件的显示。这是输入的组件src / app / + /组件/权力/ powers.component.ts权力：

出口类PowersComponent｛＠输入（）加载：布尔；｝

这是模板src / app / + /组件/权力/ powers.component.html权力：

<mat-list* ngIf＝＂!加载;其他的转轮＂><！——列出幂——>mat-list><ng-template#转轮><divfxLayout＝＂行＂fxLayoutAlign＝＂中心的中心＂><mat-spinner>mat-spinner>div>ng-template>

在上面的模板代码中，我们使用NgIf指示来切换旋转器的显示加载价值。如果loading为false，则显示幂次列表，否则，则显示< ng-template >旋转器在中间。

第二次的拍摄

虽然第一个方法是使用NgRX切换加载指示器或微调器的显示，但我们可以重构它以更好地使用NgRX，特别是应用程序中的操作触发的效果。

第二部分的解决方案可在示例应用程序中使用ngrx-refactor-3分支机构:

＄git结帐ngrx-refactor-3

你可以通过以下方式下载或克隆ngrx-refactor-3分支:

• 下载源代码
• 把它放到GitHub上

行动

首先，让我们创建两个动作:

1. ShowSpinner，它将显示旋转器。
2. HideSpinner，它将隐藏旋转器。

让我们来看看src / app /状态/共享/动作/ spinner.ts文件:

进口｛行动｝从“@ngrx /商店”；进口｛createActionType｝从“. . /跑龙套”；出口常量SPINNER_SHOW＝createActionType（“SPINNER_SHOW”）；出口常量SPINNER_HIDE＝createActionType（“SPINNER_HIDE”）；出口类HideSpinner实现了行动｛只读的类型＝SPINNER_HIDE；｝出口类ShowSpinner实现了行动｛只读的类型＝SPINNER_SHOW；｝出口类型SpinnerAction＝ShowSpinner|HideSpinner；

总结:

• 我们定义了两个动作类型常量:SPINNER_SHOW和SPINNER_HIDE．
• 然后定义两个操作类来实现行动接口:HideSpinner和ShowSpinner．
• 最后，我们导出SpinnerAction类型的并集ShowSpinner和HideSpinner类型。

减速机

接下来，我们将定义a减速机()函数更改应用程序的状态。让我们来看看src / app /状态/ /还原剂/ spinner.ts共享：

进口｛SPINNER_HIDE，SPINNER_SHOW，SpinnerAction｝从“. . /行动/转轮”；出口接口状态｛显示：布尔；｝常量initialState：状态＝｛显示：假｝；出口函数减速机（状态：状态＝initialState，行动：SpinnerAction）｛开关（行动．类型）｛情况下SPINNER_HIDE：返回｛．..状态，显示：假｝；情况下SPINNER_SHOW：返回｛．..状态，显示：真正的｝；默认的：返回状态；｝｝出口常量isShowing＝（状态：状态）＝>状态．显示；

让我们快速回顾:

• 首先，我们定义a状态单一接口显示属性，它是布尔价值。
• 接下来，我们设置initialState对象的值显示设置为假．
• 在我们的减速机()函数将返回值为的状态的新副本显示设置为真正的或假．

不要忘记将新特性状态添加到应用程序中状态．它位于src / app /核心/州/ app.reducer.ts文件示例应用程序:

出口常量appReducer：ActionReducerMap<AppState>＝｛路由器：routerReducer，间小吃店：fromSnackbar．减速机，微调控制项：fromSpinner．减速机｝；

我只是简单地加了微调控制项属性的引用减速机()函数，我们刚刚创建和导出。

选择器

如果你注意到，我定义了一个isShowing函数接受状态对象并返回布尔值显示的价值src / app /状态/ /还原剂/ spinner.ts共享文件。使用这个函数，我们将创建一个新的选择器src / app /共享/还原剂/ index.ts：

进口｛createSelector，createFeatureSelector｝从“@ngrx /商店”；进口＊作为fromSpinner从”。/转轮”；出口常量selectSpinnerEntity＝createFeatureSelector<fromSpinner．状态>（“旋转”）；出口常量isSpinnerShowing＝createSelector（selectSpinnerEntity，fromSpinner．isShowing）；

我们将使用isSpinnerShowing选择器来切换加载指示器或旋转器的显示。

影响

通过创建动作和reducer函数来改变应用的状态，我们就可以在效果中实现动作了。在这个例子中，我只打算更新的效果权力模块。您需要在计划切换加载指示器的每个实体中实现这些效果。

让我们来看看src / app /州/国家/ / powers.ts影响：

类型showSpinnerTypes＝|AddPower|DeletePower|LoadPower|LoadPowers|UpdatePower；常量showSpinnerActions＝［ADD_POWER，DELETE_POWER，LOAD_POWER，LOAD_POWERS，UPDATE_POWER］；类型hideSpinnerTypes＝|AddPowerSuccess|DeletePowerSuccess|LoadPowersSuccess|LoadPowersSuccess|UpdatePowerSuccess；常量hideSpinnerActions＝［ADD_POWER_SUCCESS，DELETE_POWER_SUCCESS，LOAD_POWER_SUCCESS，LOAD_POWERS_SUCCESS，UPDATE_POWER_SUCCESS］；＠可注射的（）出口类PowersEffects｛＠效果（）showSpinner：可观测的<行动>＝这．行动．减低<showSpinnerTypes>（．..showSpinnerActions）．管（地图（（）＝>新ShowSpinner（）））；＠效果（）hideSpinner：可观测的<行动>＝这．行动．减低<hideSpinnerTypes>（．..hideSpinnerActions）．管（地图（（）＝>新HideSpinner（）））；｝

让我们回顾一下上面的代码:

• 首先，我省略了import语句。如果需要引用它们，可以查看完整的示例代码。
• 然后，我们创建一组类型和动作，用于显示或隐藏微调器。
• 的showSpinnerTypes是所有动作的联合，用于显示旋转器。
• 的showSpinnerActions是用于显示微调器的操作类型数组。
• 的hideSpinnerTypes是我们何时隐藏转轮的所有行动的联合。为了简洁起见，我只在动作成功时隐藏转轮。这显然不是真实世界。您还需要包含任何失败/错误操作。
• 的hideSpinnerActions是用于隐藏微调器的操作类型数组。
• 然后定义两个属性:showSpinner和hideSpinner在PowersEffects类。
• 的showSpinner属性将被触发showSpinnerActions发货到商店，我们将发货ShowSpinner作为结果的行动。
• 的hideSpinner属性将被触发hideSpinnerActions发货到商店，我们将发货HideSpinner作为结果的行动。

模板

我要加< mat-spinner >组件的LayoutComponent我用来包装我的容器模板。根据应用程序的体系结构，实际加载指示器或微调器的实现位置可能会有所不同。您也可以使用来自另一个库的不同组件或自定义加载指示组件。目标是相同的，切换加载指示器的显示基于isSpinnerShowing选择器。

让我们看一个例子src / app /共享/组件/布局/ layout.component.ts文件:

出口类LayoutComponent实现了OnInit｛加载：可观测的<布尔>；构造函数（私人商店：商店<AppState>）｛｝ngOnInit（）｛这．加载＝这．商店．管（选择（isSpinnerShowing））；｝｝

我们只需使用select ()功能,提供isSpinnerShowing选择器，存储以检索布尔值。我有一个加载属性，即可观测的的布尔值，我们将在模板中使用它来切换< mat-spinner >．

下面是模板的代码片段，用于切换spinner的显示src / app /共享/组件/布局/ layout.component.html：

<ng-content* ngIf＝＂!(|异步加载);其他的转轮＂>ng-content><ng-template#转轮><divfxLayout＝＂行＂fxLayoutAlign＝＂中心的中心＂><mat-spinner>mat-spinner>div>ng-template>

在模板中，我们简单地使用NgIf控件的显示切换< ng-content >为应用程序。当我们不加载任何东西时，我们将在这里显示转译的内容。当我们加载时，我们将显示< ng-template >包括< mat-spinner >加载指标。

结论

使用NgRX，我们可以有效地实现一个应用范围内的方法来切换加载指示器的显示。虽然我们可以在每个组件级别上实现这一点，但我们可以利用@ngrx/effects模块来调度ShowSpinner和HideSpinner基于添加、删除、加载和更新实体的操作。