Brian F爱
从专注于角图,Web技术以yobet英雄联盟及波特兰的Node.js的Google开发人员专家中学习。
广告 ·ultimatecourses.com.
用终极课程学习角度正确的方式

NGRX + Material Sunackbar

使用ngrx和rxjs显示和隐藏物料小吃栏,具有角度。

为什么?

订阅下一个和错误对于我们要显示通知的所有异步事件的通知是重复和繁琐的。

这是一个示例,示出了使用的通知matsnackbar.在角分量中的服务:

出口EditComponent.{PowerChange.功率功率{这个PowerSservice.UpdatePower.功率订阅=>{这个小吃店打开“电源更新”“成功”{持续时间2000年};}错误=>{这个小吃店打开“更新失败”“#失败”{持续时间2000年};};}}

在上面的示例中,我们将在更新到用户时向用户显示Snackbar通知功率实体要么成功或错误。虽然这与纯粹的角度有效,但我们可以利用NGRX实现的观察者设计模式,以便在效果中的异步事件成功时向Snackbar分派来显示SnackBar。

使用Redux风格方法显示我们申请中的通知的一些优点包括:

  • 我们不需要重复代码以显示每个可观察流的通知。
  • 我们可以委派向我们的效果调度通知行动。
  • 我们可以调度单一动作来更新组件中的实体,大大简化了我们的组件代码。
  • 我们利用RXJS的反应性编程。

在我们的应用程序中实现NGRX后PowerChange()方法变成:

出口EditComponent.{PowerChange.功率功率{这个商店调度UpdatePower.功率;}}

这就是所有人!如果你是ngrx的新手,我会建议你先读到我的ngrx:基础知识帖子。

安装

可以在此帖子中实现示例代码的工作应用程序:

克隆存储库后,请务必结帐NGRX-Refactor-2科:

$Git.结帐Ngrx-Refactor-2

要安装并启动服务器:

$光盘服务器$安装$服务

然后安装并提供Angular客户端应用程序:

$光盘客户$安装$ ng服务

行动

要开始,我们需要创建用于显示和隐藏Snackbar通知的操作:

进口{matsnackbarconfig}“@ Angular / Material”;进口{行动}“@ ngrx /商店”;进口{CreateActiontype.}“../utils”;出口constsnackbar_open.=CreateActiontype.'snackbar_open';出口constsnackbar_close.=CreateActiontype.'snackbar_close';出口休息室实施行动{readonly类型=snackbar_open.;构造函数上市有效载荷{信息行动配置matsnackbarconfig}{}}出口snackbarclose.实施行动{readonly类型=snackbar_close.;}出口键入snackbaraction.=休息室|snackbarclose.;

此代码位于客户/ SRC / app /州/共享/操作/ snackbar.ts。让我们快点审查:

  • 首先,我们定义了我们的动作类型常量:snackbar_open.snackbar_close.
  • 接下来,我们定义了休息室实现的课程行动接口。有效载荷对象期望a信息,以及可选的行动类型和配置对于小吃栏。当我们想要打开小吃通知时,我们会将此操作分配给我们的商店。
  • 接下来,我们定义了snackbarclose.类。当我们要关闭Snackbar通知时,我们会将此操作分配给我们的商店。
  • 最后,我们出口snackberaction.代表我们行动的联合的类型。

效果

通过我们的行动定义,我们现在将加入将使用的一些副作用matsnackbar.服务开放和关闭通知:

进口{可注射的}“@ Angular / Core”;进口{matsnackbar.}“@ Angular / Material”;进口{行动影响}“@ ngrx /效果”;进口{可观察到的}“rxjs /可观察”;进口{延迟地图龙头}“rxjs /运算符”;进口{snackbar_close.snackbar_open.snackbarclose.休息室}“../actions/snackbar”;@可注射的出口snackbareffects.{@影响{调度}ClosesNackbar.可观察到的<任何>=这个行动oftype.snackbar_close.龙头=>这个matsnackbar.解雇;@影响shownnackbar.可观察到的<任何>=这个行动oftype.<休息室>snackbar_open.地图行动休息室=>行动有效载荷龙头有效载荷=>这个matsnackbar.打开有效载荷信息有效载荷行动有效载荷配置延迟2000年地图=>snackbarclose.;构造函数私人的行动行动私人的matsnackbar.matsnackbar.{}}

让我们回顾上面的代码:

  • 首先,我们定义一个新的snackbareffects.班级有@injectable()装饰师让角的依赖注入检查构造函数()函数需要注入的任何对象。在这个例子中,我们需要两个行动matsnackbar.实例。
  • 然后我们定义一个新的ClosesNackbar.拥有的财产@影响()装饰师。注意我们使用调度选项指示NGRX此效果不会调度另一个动作。当。。。的时候snackbarclose.行动被派遣我们只是援引解雇()对策matsnackbar.服务关闭当前正在显示的小吃栏。
  • 接下来,我们定义了shownnackbar.我们正在观察的财产休息室要派遣到商店的行动,这将调用打开()方法,提供有效载荷中定义的值。2秒后我们发出snackbarclose.行动。

别忘了更新effectureModule.forrot()要么excubialModule.forfeature()数组参数包含新创建的snackbareffects.类:

@ngmodule.{进口[//删除代码效果模块托管[snackbareffects.]]宣言[]}出口stememodule.{}

减速器

现在让我们定义一个减速器()函数将使我们定义的每个操作的应用程序的状态变异:

进口{snackbar_close.snackbar_open.snackberaction.}“../actions/snackbar”;出口接口{节目布尔基;}constInitimstate.={节目};出口功能减速器=Initimstate.行动snackberaction.{开关行动类型{案件snackbar_close.返回{......节目};案件snackbar_open.返回{......节目真正};默认返回;}}

首先,我们定义一个新的与单一的接口节目属性是一个布尔基默认值的值。当Snackbar打开或关闭时,我们会切换此值。在里面减速器()功能我们只是将申请的状态返回节目值设置为真正要么基于是否已显示通知。

实施

通过我们的行动,效果和减速机完成,我们现在可以在我们的其他效果中达到调度通知。这假设您已经实现了处理更新或删除实体等物品的操作和效果。在这个例子中,我们将加入我们的休息室对效力的行动updatePowersuccess.行动:

@可注射的出口powerseffects.{@影响UpdatePower.可观察到的<行动>=这个行动oftype.<UpdatePower.>update_power.地图行动=>行动有效载荷SwitchMap.功率=>这个PowerSservice.UpdatePower.功率重试3.地图功率=>updatePowersuccess.功率CARTERROR.E.httperrorresponse.=>可观察到的httperror.E.;@影响updatePowersuccess.可观察到的<行动>=这个行动oftype.<updatePowersuccess.>update_power_success.地图=>休息室{信息'电力更新'行动'成功'};}

我们在此示例中的行动流程是:

  1. 我们调度()UpdatePower.对商店的行动。
  2. 一个UpdatePower.效果使用PowerSservice.使用使用的实体httpclient.,它返回一个可观察到的目的。
  3. 当可观察到的下一个收到了通知效果调度updatePowersuccess.行动。
  4. updatePowersuccess.然后效果派遣休息室行动,提供信息行动字符串。

结论

我们可以对异步活动作出反应,并使用材料通知用户matsnackbar.使用NGRX和RXJS使用REDUX方法使用REDUX方法进行状态管理。yobet外围

在此示例中,我具有用于更新电力实体的特定“成功”动作。虽然您的申请需求可能有所不同,但您也可能考虑一个单一httpsuccess.向用户显示通用通知消息的操作。这将缩小您的效果,而且不需要对用户通知用户的每个动作的影响,并具有将派遣的单个“全局”效果休息室通知。

Brian F爱

嗨,我是布莱恩。我对类型名称,Angular和node.js感兴趣我嫁给了我最好的朋友邦妮,我住在波特兰和我滑雪(很多)。