前言
在现代 Web 开发中，组件化已经成为了一种流行的开发方式。而在 Angular 框架中，ngrx 是一种流行的状态管理库，可以帮助我们更好地掌控组件的状态。而在 ngrx 库中，有一个叫做 ngrx-gen 的 npm 包，可以帮助我们自动生成 reducer、action 和 effect 等代码，从而提高开发效率。本文将介绍如何使用 ngrx-gen 包，并给出详细的示例代码以及调试技巧。
安装和使用
使用 npm 包管理器，我们可以很方便地安装 ngrx-gen：
npm i ngrx-gen
当安装完成后，我们可以使用 command line 进入任意一个目录，执行 ngrx-gen 命令：
nrgx-gen generate -e --no-tests "FeatureName" "PropertyName:Type" "PropertyName2:Type2" ...
这个命令将会在当前目录下生成一个 FeatureName 文件夹，其中包含了一些模板代码和样例代码。我们可以根据需要修改和补充这些代码，以适配我们自己的逻辑。
可以注意到，我们在执行 nrgx-gen 命令时，还使用了一些参数。其中 -e 表示自动生成 effect 代码，--no-tests 表示不生成测试代码。FeatureName 代表我们要创建的功能的名称，PropertyName:Type 指定我们要在该功能中用到的属性名称以及其类型。例如，我们可以这样写：
nrgx-gen generate -e --no-tests "TodoList" "title:string" "completed:boolean"
这样的话，我们就会在当前目录下生成一个名为 TodoList 的文件夹，其中包含与 TodoList 相关的 reducer、action 和 effect 代码。
示例代码
下面我们来看看这些生成的代码长什么样。假设我们执行了以下命令：
nrgx-gen generate -e --no-tests "TodoList" "title:string" "completed:boolean"
那么我们生成的代码和文件目录如下：
. ├── TodoList.actions.ts ├── TodoList.effects.ts ├── TodoList.reducer.ts ├── TodoList.selectors.ts └── TodoList.state.ts
其中，我们可以看到：
- TodoList.state.ts：这个文件包含了我们要存储的状态定义，它使用了 ngrx 的 State 接口，可以方便地扩展我们的状态定义。
- TodoList.reducer.ts：这个文件是 reducers 的定义文件，包含一些 reducer 函数以及它们的初始状态。在这里我们可以自定义 reducer 函数的实现，以及 state 的初始化数据内容。
- TodoList.actions.ts：这个文件是 actions 定义文件，它使用了 createActions 这个函数，自动生成了许多 action 相关的类型和枚举值。我们可以根据需要自己进行修改和扩展。
- TodoList.effects.ts：这个文件是 effects 的定义文件，它使用了 createEffect 这个函数，自动生成了我们应当在该部分使用的异步函数以及相应的 reducer，可以方便地完成异步操作的处理。
- TodoList.selectors.ts：这个文件包含了一些 selector 函数，用于快速获取我们定义的状态。
调试技巧
在使用 ngrx-gen 的过程中，我们可能会经常出现一些问题。例如，我们在代码编写时可能会忘记某个属性，导致你访问某个属性时报错。这时候，我们可以通过 debugger 命令进行调试。
例如，我们在 TodoList.reducer.ts 的逻辑中出现了如下代码：
-- -------------------- ---- -------
------ ----- --------------- - --------------
-------------
--------------------------- ------- - ---- -- -- -
------ -
---------
--------- ------------------- ------
--
---
------------------------------ ------- - ---- -- -- -
------ -
---------
--------- -------------------------- -- ------- --- ---------
--
---
------------------------------ ------- - ---- -- -- -
--- ----- - ----------------------------- -- ------- -- ---------
--- ---- - --------------------
--------------------- - -----------------------
------ -
---------
--------- -----
--
--
--
我们可以很容易地定位到出错的位置，并使用以下方法将代码执行流程暂停，以进一步进行调试：
-- -------------------- ---- -------
------ ----- --------------- - --------------
-------------
--------------------------- ------- - ---- -- -- -
--------- -- ----------
------ -
---------
--------- ------------------- ------
--
---
------------------------------ ------- - ---- -- -- -
------ -
---------
--------- -------------------------- -- ------- --- ---------
--
---
------------------------------ ------- - ---- -- -- -
--- ----- - ----------------------------- -- ------- -- ---------
--- ---- - --------------------
--------------------- - -----------------------
------ -
---------
--------- -----
--
--
--
这样，在进入 Chrome DevTools 进行调试时，我们就可以完整地查看代码执行流程，从而更好地进行调试。
结论
本文介绍了如何使用 npm 包 ngrx-gen，我们可以方便地进行一些状态的管理和处理。在实际的开发工作中，我们可以使用 ngrx-gen 来快速生成 reducer、action 和 effect 代码，以提高开发效率。同时，我们还介绍了一些调试技巧，希望这些技巧能够帮助我们更快地定位和解决问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f7b238a385564ab6a2b