在前端开发中，状态机技术应用越来越广泛，借助状态机可以更好的管理组件状态等复杂逻辑。在React中也可以使用有限状态机来进行状态管理，针对Redux的应用，stack-fsm-reducer是一个开源的状态机Redux reducer。
简介
stack-fsm-reducer是一种基于有限状态机理论的开源库，它实现了Redux reducer。它使用JavaScript描述状态机的转换和状态变更。非常适合于React和Redux应用。
这个npm包支持自带状态堆栈的状态机自动机，这在编写状态机时减少了许多代码。
基本使用
安装
在终端中运行以下命令以安装stack-fsm-reducer：
npm install --save stack-fsm-reducer
使用
要使用stack-fsm-reducer，只需将其导入到您的代码中
import { machineReducer } from "stack-fsm-reducer";
状态机定义
在Redux的reducer中定义状态机，提供有限机器状态、起始状态等信息。在转移函数中可以定义状态转移的行为。
------ ---------------- ---- --------------------
----- ------------ - -
---------- ---
------------ ---
--
----- ------------ - -
-------- ---------
------- -
- ----- --------------- ----- --------- --- -------- --
- ----- --------------- ----- --------- --- ----------- --
- ----- -------------- ----- ------------ --- -------- --
--
------------ -
-
------ ---------------
-------- ------- ------ -- -
------ -
---------
---------- ------
--
--
--
-
------ ---------------
-------- ------- ------ -- -
------ -
---------
---------- ---
------------ ------
--
--
--
--
------ -- -- -
-------------------- ----- ------------
-
--
------ ------- ---------------------------- --------------我们定义了名为inputMachine的状态机，初始状态为active，包含三个可能事件（INPUT_UPDATE，INPUT_SUBMIT和INPUT_RESET）和两个状态之间的状态转换。转移函数用于定义状态改变时执行的操作。
方法
你可以通过返回一个Action对象来触发状态机的转换，这可以通过dispatch函数完成，这与使用Redux的方式类似。
---------- ----- --------------- -------- ---------- ---
示例
在接下来的示例中，我们将使用我们之前定义的状态机来实现一个简单的React组件。它将包含两个输入框，用于输入名称和姓氏，并在点击提交按钮时显示完整的姓名。
------ ----- ---- --------
------ - ------------ ----------- - ---- --------------
------ - ------------ ----------- - ---- --------------------------
------ - -------------- - ---- --------------------
----- ------------ - -
---------- ---
--------- ---
--------- ---
--
----- ----------- - -
-------- ---------
------- -
- ----- -------------------- ----- --------- --- -------- --
- ----- ------------------- ----- --------- --- -------- --
- ----- ---------------- ----- --------- --- ----------- --
--
------------ -
-
------ --------------------
-------- ------- ------ -- -
------ -
---------
---------- ------
--
--
--
-
------ -------------------
-------- ------- ------ -- -
------ -
---------
--------- ------
--
--
--
-
------ ----------------
-------- ------- -- -
------ -
---------
--------- ------------------- -------------------
--
--
--
--
------ -- -- -
-------------------- ----- -------------
--
--
----- ------- - --------------------------- --------------
------ ------- -------- ---------- -
----- --------- - ------------------- -- -----------------
----- -------- - ------------------- -- ----------------
----- -------- - ------------------- -- ----------------
----- -------- - --------------
----- ------------ - --- -- -
-------------------
---------- ----- --------------- ---
--
------ -
----- ------------------------
------
-----------
-----------------
------------- -- --------------------------------------
--
------
-----------
----------------
------------- --
------------------------------------ --------------------
-
--
------- -----------------------------
---------------------
-------
--
-此组件向Redux存储器提供了两个用于重命名状态机状态的不同操作。更新操作被视为事件并用于从输入字段中更新状态值。
------ ----- ----------- - ------- ---- - -------------------- -- -- ----- -------- ------ ---
在完成后，这个组件调度我们的状态机，以便根据我们之前定义的状态转换逻辑执行适当操作。
结论
stack-fsm-reducer是一个简单易用的状态机Redux reducer库，使用堆栈以更快，更精简的方式处理复杂数据模型。它支持自动机状态转移的状态转移流程，可以很好地应用于React和Redux应用。
此时，您应该有足够的知识和能力来开始使用这个npm包。我们希望这个教程可以帮助你了解这个有用的工具以及如何使用它来简化你的开发工作流程。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055eaf81e8991b448dc3d5