NGRX +加载指示灯

• 下载源代码
• 在github上叉

首先服用

首先，让我们来看看一个例子州包含一个接口装载属性。您可以看到第一次在示例应用程序中工作NGRX-Refactor-2科：

$Git.结帐NGRX-Refactor-2 $光盘服务器&&纱

这是修剪的内容SRC / APP / State / Powers / Reducers / Powers.ts：

出口接口州延伸EntityState.<功率>{装载：布尔基;}出口const适配器：EntityAdapter<功率>=createEntityAdapter（）;constInitimstate.：州=适配器。GetInitialState.（{装载：假}）;出口功能减速器（州：州=Initimstate.那行动：Powersaction.）{开关（行动。类型）{案件load_powers.：返回{......州那装载：真正};案件load_powers_success.：州={......州那装载：假};返回适配器。加入所有（行动。有效载荷那州）;默认：返回州;}}出口constinsloading.=（州：州）=>州。装载;

几件事要注意：

• 首先，我们定义了一个装载在我们的财产州接口。
• 其次，我们将值设置为假在里面Initimstate.。
• 在我们的减速器（）功能我们切换值。

然后，我们为加载属性创建一个选择器SRC / APP / State / Powers / Reducers / Index.ts文件：

出口constispowerload=createEleLector.（getPowersentityState.那从波韦斯。insloading.）;

在我们的状态（容器）组件中，我们可以使用选择器从商店中选择此值。这个例子来自src / app / + powers / containers / index / index.component.ts文件：

装载：可观察到的<布尔基>;ngoninit.（）{这个。装载=这个。商店。管（选择（ispowerload））;}

在“无状态（DUMB）组件中，我们可以使用此值来切换材料的旋转器组件的显示。这是输入组件的输入src / app / + powers / components / powers / powers.component.ts：

出口类PowersComponent.{@输入（）装载：布尔基;}

这是模板src / app / + powers / components / powers / powers.component.html：

<垫子列表* ngif.=“！装载;别的旋转器“><！ - 列出权力 - >垫子列表><ng-templation.#spinner.><divFXLayout.=“行“fxlayoutalign.=“中心中心“><Mat-Spinner.>Mat-Spinner.>div>ng-templation.>

在上面的模板代码中，我们使用ngif.指令以基于以下的指令切换旋转器的显示装载值。如果加载为false那么我们显示出列表，否则，我们显示与中心的旋转器。

第二次

虽然第一次采取是使用NGRX切换加载指示器或微调器的好方法，但我们可以重新推荐它以更好地使用NGRX，具体地，通过我们应用程序中的操作触发的效果。

第二次采取的解决方案可在示例应用程序上找到NGRX-Refactor-3科：

$Git.结帐Ngrx-Refactor-3

您可以通过以下方式下载或克隆NGRX-Refactor-3分支：

• 下载源代码
• 在github上叉

行动

要开始，让我们创建两个操作：

1. showspinner.，这将显示旋转器。
2. hidespner.，这将隐藏旋转器。

让我们来看看SRC / APP /州/共享/操作/ Spinner.ts文件：

进口{行动}从“@ ngrx /商店”;进口{CreateActiontype.}从“../utils”;出口constSpinner_Show.=CreateActiontype.（“spinner_show”）;出口constspinner_hide.=CreateActiontype.（“spinner_hide”）;出口类hidespner.实施行动{readonly类型=spinner_hide.;}出口类showspinner.实施行动{readonly类型=Spinner_Show.;}出口型旋转器=showspinner.|hidespner.;

总结：

• 我们定义了两个操作类型常量：Spinner_Show.和spinner_hide.。
• 然后，我们定义了两个实现的动作类行动接口：hidespner.和showspinner.。
• 最后，我们出口旋转器类型是既有联盟showspinner.和hidespner.类型。

减速器

接下来，我们将定义一个减速器（）致力于突变我们的应用状态。让我们来看看SRC / APP /州/共享/ Reducers / Spinner.ts：

进口{spinner_hide.那Spinner_Show.那旋转器}从“../actions/spinner”;出口接口州{节目：布尔基;}constInitimstate.：州={节目：假};出口功能减速器（州：州=Initimstate.那行动：旋转器）{开关（行动。类型）{案件spinner_hide.：返回{......州那节目：假};案件Spinner_Show.：返回{......州那节目：真正};默认：返回州;}}出口constIsShowing.=（州：州）=>州。节目;

让我们快点审查：

• 首先，我们定义一个州与单一的接口节目属性是一个布尔基值。
• 接下来，我们设置了Initimstate.物体值节目设置假。
• 在我们的减速器（）函数我们将返回具有值的新副本节目设置真正要么假。

不要忘记将新功能状态添加到您的应用程序州。这位于src / app / core / state / app.reducer.ts文件在示例应用程序中：

出口const尊敬的人：ActionReducerMap.<Appstate.>={路由器：RouterEducer.那小吃店：fromsnackbar.。减速器那旋转器：Fromspinner.。减速器};

我简单地添加了旋转器财产参考减速器（）函数我们刚刚创建和导出。

选择器

如果你注意到，我定义了一个IsShowing.接受的功能州对象并返回布尔值节目价值在SRC / APP /州/共享/ Reducers / Spinner.ts文件。使用此功能，我们将创建一个新选择器SRC / APP / SHARED / REDUCERS / INDEX.TS：

进口{createEleLector.那CreateFeaturesElector}从“@ ngrx /商店”;进口*如Fromspinner.从“./spinner”;出口const选择性策略=CreateFeaturesElector<Fromspinner.。州>（“旋转器”）;出口constisspinershowing.=createEleLector.（选择性策略那Fromspinner.。IsShowing.）;

我们将使用isspinershowing.选择器在我们的应用程序中切换加载指示灯或微调器的显示。

效果

通过我们的行为创建和我们的减速机函数来改变我们的应用程序，我们已准备好实现我们的效果中的行动。在这个例子中，我只是为了更新效果权力模块。您需要在每个实体中实现效果，在您计划切换加载指示灯。

让我们来看看SRC / APP /州/权力/效果/权力：

键入showspinnertypes.=|addpower.|deletepower.|LoadPower.|loadpowers.|UpdatePower.;constshowspinneractions.=[add_power.那delete_power.那load_power.那load_powers.那update_power.];键入hidespnertypes.=|addpowersuccess.|deletepowersucess.|loadpowersssuccess.|loadpowersssuccess.|updatePowersuccess.;constHideSpinneractions=[add_power_success.那delete_power_success.那load_power_success.那load_powers_success.那update_power_success.];@可注射的（）出口类powerseffects.{@影响（）showspinner.：可观察到的<行动>=这个。行动。oftype.<showspinnertypes.>（......showspinneractions.）。管（地图（（）=>新showspinner.（）））;@影响（）hidespner.：可观察到的<行动>=这个。行动。oftype.<hidespnertypes.>（......HideSpinneractions）。管（地图（（）=>新hidespner.（）））;}

让我们回顾上面的代码：

• 首先，我省略了导入语句。如果需要引用它们，可以查看完整示例代码。
• 然后，我们将为我们想要显示或隐藏微调器时创建一组类型和操作。
• 该showspinnertypes.是我们展示旋转器时的所有行动的联盟。
• 该showspinneractions.当我们显示旋转器时，是一个动作类型的数组。
• 该hidespnertypes.是我们将隐藏旋转器的所有行动的联盟。为了简洁起见，当行动成功时，我只是隐藏着旋转器。这显然不是现实世界。您需要包含任何故障/错误操作。
• 该HideSpinneractions当我们隐藏旋转器时，是一个动作类型的数组。
• 然后我们定义两个属性：showspinner.和hidespner.在里面powerseffects.类。
• 该showspinner.任何时候都会触发财产showspinneractions.被派往商店，我们将发出showspinner.结果是行动。
• 该hidespner.任何时候都会触发财产HideSpinneractions被派往商店，我们将发出hidespner.结果是行动。

模板

我要加上了组件到layoutcomponent.我用来包装我的容器模板。在您实现实际加载指示灯或旋转器的情况下，可能会根据您的应用程序的架构而有所不同。您也可以使用另一个库或自定义加载指示器组件的不同组件。目标是相同的，基于以下的拨动LOADIG指示符的显示isspinershowing.选择器。

让我们看看这个例子src / app / shared / component / layout / layout.component.ts文件：

出口类layoutcomponent.实施oninit.{装载：可观察到的<布尔基>;构造函数（私人的商店：商店<Appstate.>）{}ngoninit.（）{这个。装载=这个。商店。管（选择（isspinershowing.））;}}

我们只是使用了选择（）功能，提供isspinershowing.选择器，到商店来检索布尔值。我有一个装载属性是可观察到的A.布尔基值，我们将在模板中使用的值来切换显示的显示。

并且，这是从模板的片段切换到旋转器的显示器src / app / shared / components / layout / layout.component.html：

<ng内容* ngif.=“！（加载|异步）;别的旋转器“>ng内容><ng-templation.#spinner.><divFXLayout.=“行“fxlayoutalign.=“中心中心“><Mat-Spinner.>Mat-Spinner.>div>ng-templation.>

在模板中我们只是使用ngif.指令切换显示的显示适用于申请。当我们未加载任何内容时，我们将在此显示丢失的内容。当我们加载时，我们将显示那包括这一点装载指示灯。

结论

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