什么是 Fluxxor
Fluxxor 是一个基于 Flux 架构设计的前端状态管理库。它可以帮助开发者更好的组织前端代码，管理全局状态，并使得代码更加易于维护和扩展。
如何安装 Fluxxor
可以通过 npm 安装：
npm install @demiazz/fluxxor
Fluxxor 的核心概念
Fluxxor 的核心概念包括以下几个部分：
Action
Action 表示用户在前端页面上发生的操作，将这些操作抽象成数据。例如，当用户点击某个按钮时，这个按钮的点击事件可以抽象成一个 Action。
Dispatcher
Dispatcher 负责接收所有发生的 Action，调用相应的 Store 中的方法，并传递数据给这些方法。
Store
Store 相当于前端应用的数据库，它保存着所有前端应用的状态数据。Store 的方法会被 Dispatcher 调用，根据 Action 中的数据做出相应的处理，并在处理完成后将最新的状态数据存储到 Store 中。
View
View 代表前端应用的界面，它从 Store 中获取状态数据，并呈现在用户面前。在用户操作后，View 通知 Dispatcher 发出相应的 Action，从而触发状态数据的更新。
Fluxxor 的使用
创建 Store
在 Fluxxor 中，我们可以通过下面的方式定义一个 Store：
-- -------------------- ---- -------
--- ------- - -------------------
--- ------- - ---------------------
----------- -------- -- -
----------- - ---
-----------------
---------------- ---------------
---------------- --------------
--
--
---------- -------- --------- -
----------------------- - -------------
--------------------
--
---------- -------- --------- -
------ ------------------------
--------------------
--
---------- -------- -- -
------ ------------
-
---在上面的代码中，我们定义了一个 MyStore，它有一个 myData 属性，这个属性用于存储状态数据。我们还定义了两个用于处理 Action 的方法 handleFoo 和 handleBar，这两个方法根据 Action 中的数据更新 myData 属性。我们使用 this.emit("change") 来通知 View 数据已经更新，View 可以通过监听这个事件来知道何时需要更新。
创建 View
在 Fluxxor 中，我们可以通过下面的方式定义一个 View：
-- -------------------- ---- -------
--- ------- - -------------------
--- ----- - -----------------
--- ------ - -------------------
------------------- -------- -- -
-----------------------------------
--
------- -------- -- -
--- ---- - -----------------------
---
------ ------------------
-
---
-------------- - -------------------------- -------- ------ -
------ -
------------ ---------------------------------
--
---在上面的代码中，我们定义了一个 MyView，它用于展示状态数据。我们在 componentWillMount 方法中使用 Fluxxor 提供的 getFlux 方法获取 Dispatcher，然后使用 actions 属性来调用 fetchAction 方法，获取初始的状态数据。在 render 方法中，我们从 props 中获取 MyStore 的状态，然后通过 JSX 来渲染界面。
创建 Action
在 Fluxxor 中，我们可以通过下面的方式定义一个 Action：
-- -------------------- ---- -------
--- ------- - -------------------
--- --------- - -
---------- -------- -- -
------------------------------ -
--- --
----- -
---
-
---
--
----------- -------- -- -
------------------------------ -
--- -
---
-
--在上面的代码中，我们定义了 MyActions 对象，它有两个方法，fetchData 和 deleteData。这些方法通过调用 this.dispatch 方法来触发通知 Dispatcher 发送 Action。在 Action 对象中，我们定义了 ActionTypes，它是一个常量对象，用于标记不同的 Action 类型，例如上面的 ActionTypes.FOO 和 ActionTypes.BAR。
创建 Dispatcher
在 Fluxxor 中，我们可以通过下面的方式定义一个 Dispatcher：
-- -------------------- ---- -------
--- ------- - -------------------
--- ------------ - --------------------------
----------- ---------- -
------------------ - --------------------------------------------
--
------------- ----------------- -
---
--
-------- -------- ----- -
------------------
-
---在上面的代码中，我们定义了 MyDispatcher 对象，它继承了 Fluxxor 提供的 createDispatcher 方法。我们通过调用 this.register 方法将自己注册到系统中，并获取 dispatchToken 标示。在 handleAction 方法中，我们根据 Action 的类型，调用相应的 Store 的方法，并传递 Action 中的数据。在 waitFor 方法中，我们可以等待其他 Store 处理完毕后再处理当前的 Action。
示例代码
下面是一个完整的使用 Fluxxor 的示例代码：
-- -------------------- ---- -------
--- ------- - -------------------
--- ----- - -----------------
--- ----------- - -
---- ------
---- -----
--
--- ------- - ---------------------
----------- -------- -- -
----------- - ---
-----------------
---------------- ---------------
---------------- --------------
--
--
---------- -------- --------- -
----------------------- - -------------
--------------------
--
---------- -------- --------- -
------ ------------------------
--------------------
--
---------- -------- -- -
------ ------------
-
---
--- --------- - -
---------- -------- -- -
------------------------------ -
--- --
----- -
---
-
---
--
----------- -------- -- -
------------------------------ -
--- -
---
-
--
--- ------------ - --------------------------
----------- ---------- -
------------------ - --------------------------------------------
--
------------- ----------------- -
-------------------------- -
---- ----------------
------------------------
----------------------------------------
------
---- ----------------
------------------------
----------------------------------------
------
--------
------
-
-
---
--- ------ - -------------------
------------------- -------- -- -
-----------------------------------
--
------- -------- -- -
--- ---- - -----------------------
---
------ ------------------
-
---
--- ---- - --- --------------
-------- --- ---------
-- -----------
--------------- - --- ---------------
--- ---- - -------------------------- -------- ------ -
------ -
------------ ---------------------------------
--
---
------------------ ----------- --- --------------------------------在上面的代码中，我们做了以下几件事情：
- 定义了 ActionTypes，用于标识不同的 Action 类型。
- 定义了 MyStore，用于存储状态数据。
- 定义了 MyActions，用于创建和发送 Action。
- 定义了 MyDispatcher，用于接收和处理 Action。
- 定义了 MyView，用于展示状态数据和调用 Action。
- 使用 Fluxxor 创建了应用的 Flux，将 MyStore 注入到 Flux 中。
- 注册 MyDispatcher 到 Flux 中。
- 使用 Fluxxor 创建了 MyView，并将 Flux 传递给 MyView。
- 在页面中渲染 MyView。
通过上述步骤，我们成功的使用 Fluxxor 来管理前端应用的状态数据，并在 View 中显示状态数据，通过 Action 中的数据来更新状态数据，进而通知 View 更新界面。
总结
Fluxxor 是一个非常实用的前端状态管理库，它可以帮助我们更好的组织前端代码，管理全局状态，并使得代码更加易于维护和扩展。
在使用 Fluxxor 时，我们需要了解它的核心概念，并遵循一定的规范，例如将所有相关的 Action 类型都放在一个 ActionTypes 对象中，将所有的 Store 注册到 Flux 中等。通过上面的示例代码，我们可以更加深入的理解 Fluxxor 的使用方法和思想，进而使用它来开发高质量的前端应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c7781e8991b448e5f6a