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

Angular + Ngrx:入门

在Angular应用程序中开始使用NGRX。yobet外围

系列

此帖子是使用NGRX,Redux Inspired,可预测状态容器的系列的一部分:

  1. ngrx:基础知识
  2. ngrx:入门(这个帖子)
  3. NGRX:Refactor模块

从头开始

如果您从划痕与新的角度项目开始,我建议您首先将纱线设置为Angular CLI的全球包管理器:

NG.- 全球PackageManager.=

然后,创建一个新的角度应用程序,我们会称之为客户

$ ng新客户

现有项目

如果您有现有项目并希望在角度应用程序中使用NGRX开始实现Redux模式,那么您应该计划:

  1. 在您想要升级以使用NGRX的角度应用程序中优先考虑模型(或模块)。
  2. 确定模型是否是交叉切割。如果你要重新推荐用户模型,那么它可能在整个应用程序中使用,我们将在一个中实施动作,效果和减速剂stememodule.这将被进口到appmodule.。如果您正在重构仅在单个模块中使用的模型,则可能是订购模型,然后我们可以在懒惰的模块中实现操作,效果和减速。
  3. 提交在发布中升级所选模型的所有实现。当应用程序的某些部分选择时,您可能会看到一些奇怪的行为用户存储商店的对象以及应用程序的其他部分依赖于服务或其他类以获取,突变或持久用户对象。

值得注意的是,您无需重新推荐整个应用程序以使用NGRX实现的Redux模式,您可以将其逐个模块带走并单独处理。

示例项目

在这篇文章中,我将与我在新年前夜写的示例申请2017年。我花了大约6个小时的时间制定了使用的英雄应用程序:

  • Angular 5.0.2.
  • rxjs 5.5.2.
  • TypeScript 2.4.2

我也使用Angular的材料UI和Flex布局模块。您可以在Github上沿源代码下载并遵循或叉叉以下内容:

请注意,如果您拨打存储库,我将在工作中开始科。

示例项目使用json-server.提供我们的客户端角度应用程序可以消耗的简单休息API。

要安装并启动服务器:

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

服务器现在可用:http:// localhost:3000

我们还提供了静态文件服务器/静态目录。示例应用程序使用存储在中的一些图像服务器/静态/ IMG

要安装并启动客户端:

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

现在,导航到http:// localhost:4200你应该看到:

英雄申请之旅

基础

如果您是NGRX的新手,请查看我的帖子NGRX实现的Redux模式的基础知识。我越过使用Redux的优缺点和核心概念。

安装

第一步是安装@ngrx模块。我们也可以安装NGRX-Store-Freeze模块,以防止任何可能的尝试使商店中的对象变异。

$@ ngrx / store @ ngrx / router-store @ ngrx /效果@ ngrx / store-devtools @ ngrx /实体ngrx-store-freeze

stememodule.

我们将在A中实施跨领域问题stememodule.将进口到appmodule.。我们实施的行动,效果和减速器stememodule.将在我们申请中的所有模块中提供。实际上,他们将附带由在用户浏览器中运行的角度应用程序编译的初始捆绑文件附带。

让我们开始使用CLI创建模块:

$ ng g m state

这将导致新的SRC / APP / State目录,包含该目录src / app / state / state.module.ts文件。让我们继续更新文件:

@ngmodule.{进口[commonmodule.StoreModule托管{RouterEducer.RouterEducer.}StorerouterConnectingModule.托管!!环境生产storeDevToolSmodule.仪器[]]宣言[]}出口stememodule.{构造函数@可选的@skparentmodule.stememodule.{如果parentmodule.{错误'已经加载了StateModule。仅在AppModule中导入它';}}静态的托管module1pithproviders.{返回{ngmodule.stememodule.提供者[]};}}

几件事要注意:

  • 首先,我们已经进口了StoreModuleStorerouterConnectingModule.storeDevToolSmodule.NGRX提供的模块。
  • 然后,我们通过调用root商店forotoot()静态方法StoreModule。我们正在配置RouterEducer.,将角路由器与NGRX商店连接。
  • 导入的排序是导入的。我们必须导入StoreModule第一。
  • 然后我们援引forotoot()对策StorerouterConnectingModule.
  • 我们还将配置DevTool仪器,以便通过调用DevTools Chrome扩展storeDevToolModule.Instrument()静态方法。请注意,当我们的应用程序未在生产环境中执行时,我们只使用DevTools。
  • 最后,我们防止了stememodule.通过在除此之外的任何模块中导入appmodule.通过这一点构图()功能。

然后我们可以调用statemodule.forrot()我们的静态方法appmodule.

进口{stememodule.}“./state/state.module”;@ngmodule.{宣言[AppComponent.]进口[批准模块浏览器BrowseranimationsModule.调节器托管SharedModule.stememodule.托管]提供者[]引导[AppComponent.]}出口appmodule.{}

唯一添加到的行appmodule.是最后一进口:statemodule.forrot()。如果我们在浏览器中查看应用程序,那么没有更改,我们在控制台中没有任何例外。

Redux Devtools.

在我们进一步进一步之前,我应该注意,使用Redux的一个好处是开发人员调试体验。使用Redux时最有用的工具之一是Redux DevTools Chrome Extension

我们将能够将DevTools使用:

  • 请参阅派遣到商店的操作。
  • 在调度每个操作后查看我们应用程序的整个状态树。
  • 手动向商店调度行动。
  • 擦洗我们申请状态的历史。

安装DevTools后,打开Chrome开发工具中的Redux选项卡,您应该看到正在调度的Router_Navigation操作:

Chrome Redux Devtools.

Appstate.接口

ngrx入门的下一步是定义Appstate.接口。创建一个新文件src / app / state / app.interface.ts

进口{Routereducerstate.}'@ ngrx / router-store';进口{ruterstateurl.}'./shared/utils';出口接口Appstate.{路由器Routereducerstate.<ruterstateurl.>;}

请注意,我正在引用一个Utils.ts.文件。我们还没有创造的,但我们很快就会。

适用于

接下来,我们将创建一个根适用于类。我们可以在本课程中置于此类的效果,我们想在我们的应用程序的根级别进行,也许可以在此处添加某种错误通知。现在,让我们把它分开。

创建一个新文件src / app / state / app.effects.ts

进口{可注射的}'@ Angular / Core';进口{行动}'@ ngrx /效果';@可注射的出口适用于{构造函数私人的行动行动{}}

然后,更新stememodule.进口效果模块从NGRX和电线焊接适用于类。

@ngmodule.{进口[commonmodule.StoreModule托管{RouterEducer.RouterEducer.}StorerouterConnectingModule.托管效果模块托管[适用于]!!环境生产storeDevToolSmodule.仪器[]]提供者[PowerSservice.]}出口stememodule.{//删除代码}

请注意,上面唯一的更改正在导入effectureModule.forrot()我们提供一系列课程,只需单身适用于类。

验证者()功能

我们差点刚开始了ngrx。我们的下一个任务是创建root尊敬的人功能。

创建一个新文件src / app / state / app.reducer.ts

进口{RouterEducer.}“@ ngrx / router-store”;进口{actionreducer.ActionReducerMap.METAREDUCER.}“@ ngrx /商店”;进口{storefreeze}“ngrx-store-freeze”;进口{环境}“../../environments/environment”;进口{Appstate.}“./app.interfaces”;出口const尊敬的人ActionReducerMap.<Appstate.>={路由器RouterEducer.};出口功能记录器减速器actionreducer.<Appstate.>actionreducer.<Appstate.>{返回功能Appstate.行动任何Appstate.{安慰日志“州”;安慰日志“行动”行动;返回减速器行动;};}出口constAppmetareducers.METAREDUCER.<Appstate.>[]=!!环境生产[记录器storefreeze][];

几件事要注意:

  • 现在,我们在我们的状态树中定义的唯一对象是路由器减速器,它存储在路由器物业在Appstate.
  • 我创建了一个名为meta reducer函数logger()。虽然这不是您的应用程序所必需的,并且Chrome DevTools提供了超过充分的洞察力,并随着时间的推移,对我们申请状态的泛换,这是Meta Reducer的一个很好的例子以及如何实现一。
  • 注意我们只使用记录器storefreeze在我们的应用程序不在生产环境中时元减速机。

共享实用

最后,我们将使用一些共享利维版。创建一个新的SRC / APP /州/共享/ UILITS.TS文件:

进口{参数ruterstatesnapshot.}'@ Angular / Router';进口{RoustateSerializer.}'@ ngrx / router-store';consttypecache.{[标签]布尔基}={};出口功能CreateActiontype.<T.>标签T.|''T.{如果typecache.[<>标签]{错误`动作类型“$ {标签}“不是独特的”`;}typecache.[<>标签]=真正;返回<T.>标签;}出口接口ruterstateurl.{URL.;参数参数;queryparams.参数;}出口CustomSerializer.实施RoustateSerializer.<ruterstateurl.>{连载矫形器ruterstatesnapshot.ruterstateurl.{路线=矫形器;路线第一个孩子{路线=路线第一个孩子;}const{URL.}=矫形器;constqueryparams.=矫形器queryparams.;const参数=路线参数;//只返回一个对象,包括URL,params和查询参数//而不是整个快照返回{URL.参数queryparams.};}}

最后一步是重构我们的stememodule.略。我们将加入我们的根验证者()功能以及我们的功能Appmetareducers.功能。我们还需要提供一个RoustateSerializer.

这是完整的stememodule.源代码:

@ngmodule.{进口[commonmodule.StoreModule托管尊敬的人{Metareducers.Appmetareducers.}StorerouterConnectingModule.托管效果模块托管[适用于]!!环境生产storeDevToolSmodule.仪器[]]宣言[]}出口stememodule.{构造函数@可选的@skparentmodule.stememodule.{如果parentmodule.{错误'已经加载了StateModule。仅在AppModule中导入它';}}静态的托管module1pithproviders.{返回{ngmodule.stememodule.提供者[{提供RoustateSerializer.useclass.CustomSerializer.}]};}}

结论

在此帖子中,我们配置了一个根Appstate.有一个单一的路由器属性,它使用@ ngrx /路由器 - 存储模块将角路由器绑定到NGRX存储。我们还没有重新改进现有的应用程序以实现NGRX。

应用程序的下一步是为定义动作,效果和减速器功率模型。然后,我们将重构PowerModule.用来商店,派遣行动loadpowers.addpower.UpdatePower.

Brian F爱

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