NgRx ESLint 插件 prefer-action-creator 规则详解：用 Action Creator 替代 Action Class

前端状态管理【免费下载链接】platformReactive State for Angular项目地址https://gitcode.com/gh_mirrors/pl/platform点击查看免费下载导读prefer-action-creator是 NgRx ESLint 插件中针对store模块提供的一条代码风格suggestion规则核心主张是使用createAction生成的 Action Creator优于手写的Action类。本文将以仓库中的官方规则文档为主体结合规则源码prefer-action-creator.ts、配套测试prefer-action-creator.spec.ts以及内置配置store.ts深入讲解该规则的作用范围、触发条件、违规/合规示例与启用方式帮助你理解并落实 NgRx 推荐的 Action 书写范式。规则概览该规则的元数据定义在源码的meta字段中与官方文档页首的生成内容一一对应属性值说明Typesuggestion属于代码风格建议类规则不代表程序运行错误FixableNo不可自动修复需要开发者手动改写代码SuggestionNo不提供编辑器内的自动修复建议suggestion fixRequires type checkingNo基于纯语法分析即可工作无需类型信息运行开销低ConfigurableNo不接受任何配置选项schema为空数组ngrxModulestore归入 NgRx 的 store 模块规则集上述信息在源码 prefer-action-creator.ts 中有直接体现type: suggestion、schema: []、docs.ngrxModule: store。由于不依赖类型检查requiresTypeChecking为false它可以在常规非 type-checkedESLint 配置中直接运行。Rule Details规则判定逻辑规则的命名与报告信息非常直白规则名prefer-action-creator对应 ESLint 配置键ngrx/prefer-action-creator报告消息messageId 为preferActionCreatorUsingAction classis forbidden. Useaction creatorinstead.违规incorrect代码示例当类声明同时满足以下两个特征时即触发本规则类实现了Action接口写法可以是implements Action也可以是带命名空间的implements ngrx.Action类内部定义了名为type的属性无论是否加readonly也无论type的值是字符串字面量还是来自常量的引用。// 违规实现 Action 接口且带有 type 属性 class Test implements Action { type [Customer Page] Load Customer; } class Test implements ngrx.Action { readonly type ActionTypes.success; constructor(readonly payload: Payload) {} }合规correct代码示例以下三种写法都不会触发规则// 合规使用 createAction 创建 Action Creator export const loadUser createAction([User Page] Load User); // 合规类虽然定义了 type 属性但没有实现 Action 接口 class Test { type [Customer Page] Load Customer; } // 合规类实现了 Action 接口但属性名是 member 而非 type class Test implements Action { member [Customer Page] Load Customer; }源码层的触发条件规则的实现非常精炼完整逻辑只有一行基于 AST 的选择器表达式见 prefer-action-creator.tsClassDeclaration:has( TSClassImplements:matches( [expression.nameAction], [expression.property.nameAction] ) ):has(PropertyDefinition[key.nametype])拆解这段选择器可以精确还原规则的判定范围ClassDeclaration仅针对类声明TSClassImplements要求类实现了某个接口[expression.nameAction]与[expression.property.nameAction]分别匹配implements Action与implements ngrx.Action两种书写形式其中后者的接口名位于命名空间的property位置:has(PropertyDefinition[key.nametype])类体内必须包含名为type的类属性。一旦命中规则直接在类声明节点上报告错误。从选择器可推断判定是纯结构性的不关心type的值来源字面量或常量引用、不关心是否readonly也不进行类型检查。规则背后的设计动机为何优先使用 Action Creator该规则倡导的Action Creator源自createAction工厂函数定义于 modules/store/src/action_creator.ts。createAction接受描述动作的字符串type返回一个可调用的 Creator 函数调用后即产生符合Action接口的对象。使用 Action Creator 相比 Action 类的主要优势在 action_creator.ts 的usageNotes中均有对应用法演示样板代码更少无需手写class、constructor、字段初始化一行createAction即可声明动作类型更安全配合propsT()或emptyProps()可将载荷payload的类型直接编码进 Creatordispatch 时自动获得完整的类型推断统一的消费方式Creator 可直接传入store.dispatch、reducer 的on(...)以及 effect 的ofType(...)中与 NgRx 其余 API 无缝衔接避免了类式 Action 在 reducer/effect 中反复做类型断言的麻烦可扩展元数据createAction还支持传入自定义 Creator 函数以附加额外元数据见 action_creator.ts 的重载签名。官方文档与源码注释见 action_creator.ts均明确指出Action Creator 就是为降低类式 Action 的显式性explicitness而设计的更优形态。如何启用该规则通过内置配置一键启用prefer-action-creator已被纳入插件的两套内置配置默认以error级别开启store 配置configs/store.ts启用所有 store 模块相关规则all 配置configs/all.ts启用插件全部规则。即安装插件后直接在 ESLint 的 flat config 中引入ngrx/store或ngrx/all配置即可生效无需额外配置该规则。单独配置该规则不可配置Configurable: No因此没有参数可调只能控制开关与严重级别。需要单独启用时可在 ESLint 配置中声明export default [ // ... 其他配置 { name: ngrx/prefer-action-creator, rules: { ngrx/prefer-action-creator: error, // 也可设为 warn以告警而非报错的形式提示 }, }, ];测试用例佐证规则仓库内置的测试文件 prefer-action-creator.spec.ts 使用typescript-eslint/rule-tester驱动其中**有效用例valid**共 4 条createAction调用、无Action接口的普通类、实现了Action但属性名为member的类、仅构造器带参数而type为readonly常量引用但不实现Action接口的类**无效用例invalid**共 2 条implements Action与implements ngrx.Action两种写法均通过fromFixture标记出完整的违规区间并断言报告的消息 ID 为preferActionCreator。这些用例与官方文档中的违规/合规示例完全一致构成了规则行为的可执行证据只要实现Action接口 存在type属性同时成立无论type是字符串字面量还是常量引用、是否带readonly都会被报告。与相邻规则的协同prefer-action-creator并非孤立存在它与其他两条规则共同构成了 NgRx 对 Action 书写方式的完整约束三者在 configs/store.ts 中相邻出现prefer-action-creator-in-dispatchprefer-action-creator-in-dispatch.ts进一步约束store.dispatch(...)的调用处禁止直接传入new出的旧式 Action 对象或普通对象字面量必须使用 Action Creatorprefer-action-creator-in-of-typeeffects 模块见 configs/effects.ts约束 effect 中ofType(...)的用法同样要求传入 Action Creator。三者合起来意味着从声明本条规则到dispatch 调用再到effect 的 ofType 监听NgRx 推荐在 Action 的整个生命周期内都使用createAction创建的函数形式彻底淘汰类式 Action 的写法。这也与createAction设计为可同时作为类型描述与值使用的特性见 action_creator.ts 中 reducer 的on与 effect 的ofType用法相吻合。小结prefer-action-creator是一条实现极简、语义明确、开箱即用的代码风格规则凡是实现了Action接口且定义了type属性的类都会被标记并提示改用createAction。它不需要类型检查、不支持自动修复、也不接受配置配合ngrx/store内置配置即可立刻生效。对于正在推行 NgRx 推荐 Action 写法的团队将它与prefer-action-creator-in-dispatch、prefer-action-creator-in-of-type搭配使用可以在声明、dispatch、effect 三个层面全面统一为 Action Creator 范式。赞分享前端状态管理【免费下载链接】platformReactive State for Angular项目地址https://gitcode.com/gh_mirrors/pl/platform点击查看免费下载相关推荐ESLint prefer-spread 规则详解用展开运算符替代 Function.prototype.apply()ESLint prefer spread 规则详解用展开运算符替代 Function.prototype.apply 导读 prefer spread 是 E开发工具Lint静态分析代码质量eslint-plugin-unicorn 规则详解prefer-dom-node-text-content —— 用 .textContent 替代 .innerTexteslint plugin unicorn 规则详解prefer dom node text content —— 用 .textContent 替代 .inLint代码质量eslint-plugin-unicorn prefer-regexp-escape 规则详解用 RegExp.escape() 替代手写正则转义eslint plugin unicorn prefer regexp escape 规则详解用 RegExp.escape 替代手写正则转义 导读 prefLint代码质量上一篇GPyOpt项目安装与使用教程下一篇【亲测免费】 Ant Design X Vue 安装与配置指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考