当前位置: 首页 > Web前端 > HTML

动作定义指南

时间:2023-03-27 23:22:41 HTML

AngularNgrxStore工具库中的Store文件夹数据结构一个典型的例子:当你第一次使用ngrx/store模块时,你必须决定运行应用程序需要什么动作。首先分析从服务端加载英雄数据的过程,决定应该做哪些Action建模。所有英雄数据都是从服务器加载的,因此需要一个英雄动作。Effect启动并从服务器检索英雄数据。Effect还需要通知Store我们已经成功获取英雄数据,所以它需要派发一个动作(LoadHeroesSuccessAction)。如果与服务器端的通信失败或出于任何其他原因,Effect会调度另一个操作(加载英雄失败)以进行错误处理。NgrxStore提供的Action接口:exportinterfaceAction{type:string;}我们创建一些字符串常量作为Action标识符:exportconstLOAD_HEROES="[Heroes]LoadHeroes";exportconstLOAD_HEROES_FAIL="[Heroes]加载英雄失败";exportconstLOAD_HEROES_SUCCESS="[Heroes]加载英雄成功";其中[]括号表示Action-category的类型。然后我们有很多ActionClass://可以从服务器端构造函数传递任何错误(publicpayload:any){}}exportclassLoadHeroesSuccessimplementsAction{readonlytype=LOAD_HEROES_SUCCESS;constructor:fromCore.payload[]){}}每个action类都定义了一个type属性,因为它实现了Action接口。此外,在某些情况下,需要在自定义Action类上定义一个可选的有效负载属性,以便分派操作的代码可以传入一些额外的数据,这些数据稍后将被Reducer用来组成新状态。LoadHeroesFail操作类定义了一个有效负载属性来保存在与服务器端通信期间抛出的异常的主体。类似地,LoadHeroesSuccess操作类定义了一个有效负载属性来保存从服务器检索到的实际英雄数据并将其传递给Reducer。最后,由于Angular应用程序是使用TypeScript开发的,您可以定义一个新的TypeScript类型(称为HeroesAction类型)来添加一些动作类型检查以容纳上面定义的所有动作类。这样,reducer只处理定义在这种类型上的操作。导出类型HeroesAction=|加载英雄|加载英雄失败|加载英雄成功;