布莱恩F爱
从俄勒冈州波特兰的一位专注yobet英雄联盟于Angular、Web技术和Node.js的谷歌开发专家那里学习。
广告 ·ultimatecourses.com
以正确的方式学习Angular的终极课程

NgRx +材料零食棒

在Angular中使用NgRx和RxJS显示和隐藏材质零食条。

为什么?

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

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

出口EditComponent{powerChange(权力:权力){powersServiceupdatePower(权力)订阅(()= >{间小吃店开放(“更新的力量”,“成功”,{持续时间:2000});},错误= >{间小吃店开放(“更新失败”,“#失败”,{持续时间:2000});});}}

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

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

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

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

出口EditComponent{powerChange(权力:权力){商店调度(UpdatePower.(权力));}}

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

安装

一个实现了这篇文章中的示例代码的工作应用程序可以在下面找到:

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

美元Git.结帐ngrx-refactor-2

要安装和启动服务器:

美元cd美元的服务器安装美元服务

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

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

行动

为了开始,我们需要创建显示和隐藏snackbar通知的操作:

进口{MatSnackBarConfig}“@angular /材料”;进口{行动}“@ngrx /商店”;进口{createActionType}“../utils”;出口常量SNACKBAR_OPEN=createActionType('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类。当我们想关闭snackbar通知时,我们将把这个动作发送到我们的商店。
  • 最后,导出snackberaction.代表我们行动的联合的类型。

影响

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

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

让我们回顾上面的代码:

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

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

@NgModule({进口:(/ /代码省略EffectsModuleforRoot((SnackbarEffects])],宣言:(]})出口stememodule.{}

减速机

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

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

首先,我们定义一个new状态使用单个显示属性,即布尔基默认值的值。我们将在零食酒吧开门或关门时切换这个值。在减速机()方法返回应用程序的状态显示值设置为真的或者基于是否显示通知。

实现

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

@可注射的()出口PowersEffects{@效果()updatePower:可观测的<行动>=行动减低<UpdatePower.>(UPDATE_POWER)(地图(行动= >行动有效载荷),SwitchMap.(权力= >powersServiceupdatePower(权力)(重试(3.))),地图(权力= >UpdatePowerSuccess(权力)),catchError((e:HttpErrorResponse)= >可观测的(HttpError(e))));@效果()updatePowerSuccess:可观测的<行动>=行动减低<UpdatePowerSuccess>(UPDATE_POWER_SUCCESS)(地图(()= >SnackbarOpen({消息:'电力更新',行动:'成功'})));}

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

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

结论

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

在本例中,我有一个用于更新电源实体的特定“成功”操作。虽然应用程序的需求可能不同,但您也可以考虑单个HttpSuccess向用户显示通用通知消息的操作。这将简化你的效果,并且不需要为每个需要通知用户的操作设置效果,使用一个单一的“全局”效果来分派SnackbarOpen通知。

布莱恩F爱

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