布莱恩F爱
向来自波特兰的谷歌开发者专yobet英雄联盟家学习Angular、Web技术和Node.js。
广告 ·ultimatecourses.com
使用Ultimate Courses以正确的方式学习Angular

NgRx + Material小吃吧

在Angular中使用NgRx和RxJS来显示和隐藏Material Snackbar。

为什么?

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

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

出口EditComponentpowerChange权力权力powersServiceupdatePower权力订阅=>间小吃店开放“更新的力量”“成功”持续时间2000错误=>间小吃店开放“更新失败”“#失败”持续时间2000

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

在我们的应用程序中使用redux风格的方法来显示通知的一些优点包括:

  • 我们不需要为每个可观察流重复显示和隐藏通知的代码。
  • 我们可以将通知操作的分派委托给我们的效果。
  • 我们可以分派一个操作来更新组件中的一个实体,从而极大地简化了组件的代码。
  • 我们利用了RxJS的响应式编程。

在应用程序中实现了NgRx之后powerChange ()方法变成:

出口EditComponentpowerChange权力权力商店调度UpdatePower.权力

这是所有人!如果你是NgRx的新手,我建议你先阅读我的NgRx:基础知识邮政。

安装

实现本文示例代码的工作应用程序可以在以下网址找到:

克隆存储库之后,请确保签出NGRX-Refactor-2分支机构:

Git.结帐ngrx-refactor-2

安装和启动服务器:

cd美元的服务器安装服务

然后安装并服务Angular客户端应用:

cd客户美元安装ng美元服务

行动

首先,我们需要创建显示和隐藏小吃条通知的动作:

进口MatSnackBarConfig“@angular /材料”进口行动“@ngrx /商店”进口createActionType“../utils”出口常量SNACKBAR_OPENcreateActionType'snackbar_open'出口常量snackbar_close.createActionType'snackbar_close'出口SnackbarOpen实现了行动只读的类型SNACKBAR_OPEN构造函数民众有效载荷消息字符串行动字符串配置MatSnackBarConfig出口SnackbarClose实现了行动只读的类型snackbar_close.出口键入snackbaraction.SnackbarOpen|SnackbarClose

此代码位于客户端/ src / app /状态/共享/动作/ snackbar.ts.让我们快点审查:

  • 首先,定义动作类型常量:SNACKBAR_OPENsnackbar_close.
  • 接下来,我们定义SnackbarOpen类,它实现行动接口。有效负载对象期望一个消息,以及一个可选选项行动类型和配置间小吃店。当我们想要打开一个快餐通知时,我们将把这个动作分派到我们的商店。
  • 接下来,我们定义SnackbarClose类。当我们想要关闭小吃通知时,我们将把这个动作分派到我们的商店。
  • 最后,我们导出snackberaction.代表我们行动的联合的类型。

影响

定义了操作后,现在我们将连接一些将使用matsnackbar.服务开放和关闭通知:

进口可注射的“@ Angular / Core”进口matsnackbar.“@angular /材料”进口行动效果“@ngrx /效应”进口可观测的“rxjs /可见”进口延迟地图轻敲“rxjs /运营商”进口snackbar_close.SNACKBAR_OPENSnackbarCloseSnackbarOpen“. . /行动/间小吃店”可注射的出口SnackbarEffects效果调度ClosesNackbar.可观测的<任何>行动减低snackbar_close.轻敲=>matSnackBar驳回效果showSnackbar可观测的<任何>行动减低<SnackbarOpen>SNACKBAR_OPEN地图行动SnackbarOpen=>行动有效载荷轻敲有效载荷=>matSnackBar开放有效载荷消息有效载荷行动有效载荷配置延迟2000地图=>SnackbarClose构造函数私人行动行动私人matSnackBarmatsnackbar.

让我们回顾上面的代码:

  • 首先,定义一个newSnackbarEffects类的@Injectable ()装饰器,以便Angular的依赖注入检查构造函数()函数需要注入的任何对象。在这个例子中,我们需要两个行动matsnackbar.实例。
  • 然后定义一个newClosesNackbar.拥有的财产@Effect ()装饰。注意,我们使用调度选项指示NGRX此效果不会调度另一个动作。当。。。的时候SnackbarClose动作被分派时,只需调用把()方法matsnackbar.服务以关闭当前显示的小吃店。
  • 接下来,我们定义showSnackbar我们正在观察的财产SnackbarOpen操作分派给存储,该操作将调用open ()方法,提供有效载荷中定义的值。2秒后我们发出SnackbarClose行动。

别忘了更新effectureModule.forrot()或者EffectsModule.forFeature ()参数,以包含新创建的SnackbarEffects类:

NgModule进口/ /代码省略EffectsModuleforRootSnackbarEffects宣言出口stememodule.

减速机

现在定义a减速机()函数,它将为我们定义的每个动作改变应用程序的状态:

进口snackbar_close.SNACKBAR_OPENsnackberaction.“. . /行动/间小吃店”出口接口状态显示布尔基常量initialState状态显示出口函数减速机状态状态initialState行动snackberaction.转变行动类型情况下snackbar_close.返回...状态显示情况下SNACKBAR_OPEN返回...状态显示真的默认的返回状态

首先,定义一个new状态单一接口显示属性,它是布尔基默认值的值.我们将在零食栏打开或关闭时切换这个值。在减速机()函数返回应用程序的状态显示值设置为真的或者根据是否显示通知。

实现

完成我们的动作、效果和减震器后,我们现在可以在其他效果中实现通知的分派。这假设您已经实现了处理更新或删除实体等事情的操作和效果。在这个例子中,我们将连接我们的SnackbarOpen对效力的行动UpdatePowerSuccess行动:

可注射的出口PowersEffects效果updatePower可观测的<行动>行动减低<UpdatePower.>UPDATE_POWER地图行动=>行动有效载荷SwitchMap.权力=>powersServiceupdatePower权力重试3.地图权力=>UpdatePowerSuccess权力catchErroreHttpErrorResponse=>可观测的HttpErrore效果updatePowerSuccess可观测的<行动>行动减低<UpdatePowerSuccess>UPDATE_POWER_SUCCESS地图=>SnackbarOpen消息'电力更新'行动'成功'

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

  1. 我们调度()UpdatePower.对商店的行动。
  2. 一个updatePower影响使用PowersService来更新实体HttpClient,则返回可观测的目的。
  3. 可观测的下一个收到了通知效果调度UpdatePowerSuccess行动。
  4. updatePowerSuccessEffect然后分派SnackbarOpen行动,提供消息行动字符串。

结论

我们可以对异步活动作出反应,并使用材料通知用户matsnackbar.在Angular应用中使用NgRx和RxJS来进行状态管理。yobet外围

在这个例子中,我有一个更新权力实体的“成功”操作。虽然应用程序的需求可能不同,但您也可以考虑单个HttpSuccess操作,该操作向用户显示通用通知消息。这将简化你的效果,而不需要对每个需要通知用户的动作都有一个效果,有一个单一的“全局”效果来调度SnackbarOpen通知。

布莱恩F爱

嗨,我是布莱恩。我对TypeScript、Angular和Node.js感兴趣。我和我最好的朋友邦妮结婚了,我住在波特兰,我经常滑雪。