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.那fromPowers。insloading.）;

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

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

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

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

这是模板src / app / + /组件/权力/ 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}从“. . /跑龙套”;出口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 /状态/ /还原剂/ 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 /状态/ /还原剂/ spinner.ts共享文件。使用此功能，我们将创建一个新选择器SRC / APP / SHARED / REDUCERS / INDEX.TS：

进口{createEleLector.那createFeatureSelector}从“@ ngrx /商店”;进口*作为Fromspinner.从”。/转轮”;出口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.];类型hideSpinnerTypes=|addpowersuccess.|DeletePowerSuccess|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.<hideSpinnerTypes>（......HideSpinneractions）。管（地图（（）= >新hidespner.（）））;}

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

• 首先，我省略了导入语句。如果需要引用它们，可以查看完整示例代码。
• 然后，我们将为我们想要显示或隐藏微调器时创建一组类型和操作。
• 这showSpinnerTypes是我们展示旋转器时的所有行动的联盟。
• 这showSpinnerActions当我们显示旋转器时，是一个动作类型的数组。
• 这hideSpinnerTypes是所有行动的联合，当我们将隐藏的转轮。为了简洁，我只在动作成功时隐藏转轮。这显然不是真实世界。您还需要包含任何失败/错误操作。
• 这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.））;}}

我们只是使用了select ()功能，提供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/effects模块来分派showspinner.和hidespner.基于添加，删除，加载和更新实体的操作的操作。