应用NGRX和Angular的应用程序加载指示器。
为什么?
大多数应用程序执行数据的异步负载,并且您的应用程序可能需要在加载数据时显示加载指示符。使用NGRX,我们可以根据已调度到商店的操作轻松切换加载指示灯或旋转器的显示。
示例应用程序
我将使用两个分支机构的示例应用程序,这是一个英雄演示应用程序的游览:
- NGRX-Refactor-2是第一次采取
- NGRX-Refactor-3是第二次
你可以下载或克隆NGRX-Refactor-2存储库的分支:
首先服用
首先,让我们来看看一个例子州
包含一个接口装载
属性。您可以看到第一次在示例应用程序中工作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科:
您可以通过以下方式下载或克隆NGRX-Refactor-3分支:
行动
要开始,让我们创建两个操作:
showspinner.
,这将显示旋转器。
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.
基于添加,删除,加载和更新实体的操作的操作。