简介
在前端开发中，调用不同的方法来控制应用的状态、执行操作、处理事件等操作是非常常见的需求，而我们可以使用 Action-u 这个 npm 包来帮忙实现这些功能。
Action-u 是一个适用于 React、Angular、Vue 等现代前端框架的状态管理库。它提供的 API 简单易用，并且易于扩展，可以使我们很方便地编写出优雅、具有极强可复用性的代码。
安装
首先，我们需要在项目中引入 action-u。我们可以通过 npm 来安装它，执行以下命令：
npm install action-u
快速开始
我们在开始之前，需要理解什么是 action。 在基于 action 的状态管理库中，action 是一个包含了 type 属性的纯对象，这个 type 属性用来描述 action 的类型。在接下来的示例中，我们将会使用计数器应用程序来演示 action-u 的使用方法。
-- -------------------- ---- -------
----- ------------ - -
------ -
-
----- --------- - ------- -- -
------ -
---------
------ ----------- - -
-
-
----- ------- - -
---------
-
------ ------- ---------------------- -------------当我们执行一个操作时，我们需要 dispatch 一个 action。 在上面的示例中，我们定义了一个 increment 的 action，当 dispatch 这个 action 时，它将会使 count 值加 1。
-- -------------------- ---- -------
------ ------ - --------- - ---- -------
------ - ------- - ---- -------------
------ ------- ---- -----------
----- ------- ------- --------- -
------ -- -
------ -
-----
---------------------------
------- -----------------------------------------
------
-
-
-
----- --------------- - ------- -- -
------ -
------ -----------
-
-
----- ------------------ - ---------- -- -
------ -
---------- -- -- -
-----------------------------
-
-
-
------ ------- ------------------------ ----------------------------我们将上面的 Counter 组件绑定到 redux 中，当用户点击加号，increment action 将会被 dispatch。在 mapDispatchToProps 中我们将 props.increment 绑定到 action increment 上。
详细指南
创建 actions
我们可以通过 createActions 方法来创建 actions。这个方法接收一个 actions 对象和一个可选的初始 state 参数。在 actions 对象中，我们可以定义任意多个 action。
一个 action 包含了 type 和 payload 两个属性，其中 type 用来描述 action 的类型，payload 用来传递一些数据。
-- -------------------- ---- -------
----- ------------ - -
------ -
-
----- --------- - ------- -- -
------ -
---------
------ ----------- - -
-
-
----- --------- - ------- -- -
------ -
---------
------ ----------- - -
-
-
----- ------- - -
----------
---------
-
------ ------- ---------------------- -------------绑定 actions 和组件
我们可以使用 connect 方法将组件和 state/actions 绑定起来。connect 方法接收两个参数：mapStateToProps 和 mapDispatchToProps。在这两个方法中，我们可以将 state 和 actions 绑定到组件的 props 上。
-- -------------------- ---- -------
------ ------ - --------- - ---- -------
------ - ------- - ---- -------------
------ ------- ---- -----------
----- ------- ------- --------- -
------ -- -
------ -
-----
---------------------------
------- -----------------------------------------
------- -----------------------------------------
------
-
-
-
----- --------------- - ------- -- -
------ -
------ -----------
-
-
----- ------------------ - ---------- -- -
------ -
---------- -- -- -
-----------------------------
--
---------- -- -- -
-----------------------------
-
-
-
------ ------- ------------------------ ----------------------------在上面的例子中，我们在 mapDispatchToProps 中将 props.increment 和 props.decrement 绑定到 actions.increment 和 actions.decrement 上。
定义 interface
我们可以使用 interface 方法在 actions 中定义一个接口。interface 方法接收一个参数，一个 actionType 对象，这个对象包含了 type、payload 和其他任意的属性。
-- -------------------- ---- -------
----- --------- - ------------ -- -
--------------- - -
---------- ----
-
------ ----------
-
----- --------- - -----------
----- ------------
-------- ---
----- --
--
----- --------- - -----------
----- ------------
-------- ---
----- --
--
----- ------- - -
----------
---------
-
------ ------- ---------------------- -------------当一个 action 包含了一个 interface 属性时，这个 action 将会被视为一个接口，并且这个接口可以被其他的 action extend。
继承 interface
我们可以通过 extend 方法来继承一个 interface。 extend 方法接收一个参数，这个参数可以是另一个 interface 或者一个 actionType 对象。
-- -------------------- ---- -------
----- --------- - ------------ -- -
--------------- - -
---------- ----
-
------ ----------
-
----- --------- - -----------
----- ------------
-------- ---
----- --
--
----- --------- - -----------
----- ------------
-------- ---
----- --
--
----- ----- - ------------------
----- -------
--
----- ------- - -
----------
----------
-----
-
------ ------- ---------------------- -------------在上面的代码中，我们定义了一个 reset 的 action，它扩展了 increment 的 interface。这个 reset action 包含 INCREMENT 的所有属性，并添加了一个 RESET 属性。
总结
Action-u 是一个极其简单易用的前端状态管理库。在这篇文章中我们讲解了 action-u 的使用方法，并给出了一个计数器应用程序的示例代码。下一步，我们可以尝试在自己的项目中使用 action-u，以及在其中添加一些接口和 extend 式 action。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005726181e8991b448e88e0