前言
在使用 Redux 作为前端状态管理库时，我们需要遵循一些约定，例如通过定义 action type 来区分不同的 Action，并且需要遵循 action 触发 reducer 的流程，这往往需要写大量重复的代码且容易出错。redux-action-schema 这个 npm 包就是为了解决这个问题而诞生的。
redux-action-schema 可以帮助我们定义一种规范化的 Action 类型，通过验证机制来确保 Action 属性的正确性，以及自动生成 action creator 和常规可以使用的 ActionTypes。这个包的核心思想就是转化为使用面向对象的思想，将重复的代码抽象及封装起来，简化代码，提高可读性，可维护性和可扩展性。
在本篇文章里，我将详细地讲解如何使用 redux-action-schema 包，希望本文可以对你有所帮助。
安装和使用
安装
npm install redux-action-schema --save
引入
------ ------------------ ---- ----------------------
定义 ActionType
我们需要先定义一个 schema，一个 schema 定义了一个 ActionTypes 对象和对应的 Action 构造函数。
----- -------- - ------------------------------- - ---- ------- ---- ------- ---
从上面的示例代码可以看出，我们定义了一个名为 MY_SCHEMA 的 schema，它具有两个属性 foo 和 bar，它们分别是字符串和数字类型。
使用 ActionType
我们可以像使用普通的 ActionType 一样使用 MY_SCHEMA：
----- -------- - ----------------- ---- -------- ---- --- --- ----------------------
通过 mySchema.create() 方法，我们可以创建一个符合 MY_SCHEMA 定义的 action，在控制台上可以看到输出如下：
-
----- ------------
-------- -
---- --------
---- ---
-
-错误提示
如果输入的 Action 包含了错误的属性或类型，create 方法会抛出一个错误，错误信息说明了哪个属性出错了：
----- -------- - ----------------- ---- -------- ---- ----------- --- -- ------ -- ------ ------- -------- -- ----- -- -------- ------ --- --- ------
reducer 简化
在 reducer 内部，通过使用 switch case 语句来处理不同类型的 Action，而通过 redux-action-schema，我们可以使用 handleAction() 方法来简化 reducers：
------ - ------------ - ---- ----------------
----- ------------ - - ---- --- ---- - --
----- --------- - -------------
---------
------- ------- -- -- --------- ----------------- ---
------------
--
-------------------------------- - ----- --------------- ---- -- - ---- --- ---- - -
------------
-------------------- ----------------- ---- -------- ---- --- ---
-- -- - ---- -------- ---- --- -
------------
----------
- ---- -------- ---- --- --
----------------- ---- -------- ---- --- --
-
-- -- - ---- -------- ---- --- -使用 handleAction() 方法可以极大地简化 reducer，减少冗余代码。
总结
本文讲解了 redux-action-schema 的基本使用、属性定义、ActionType 使用以及如何简化 Reducer 操作。通过使用 redux-action-schema，我们可以大大简化 Redux 的使用，并且将语法规范化，减少人为错误。希望本文可以对你有所帮助。
参考资料
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60067009e361a36e0bce8c0e