简介
ArkhamJS 是一个轻量级的 React 状态管理库，而 arkhamjs-views-react 是在 ArkhamJS 基础上实现的视图层。它提供了一些高级特性，例如 React Hooks 和 Immutable.js，可以帮助你更容易的管理你的应用状态。
在这篇文章中，我们会详细介绍如何使用 arkhamjs-views-react 的组件来创建一个基本的 React 应用，并解释一些高级功能的使用，包括如何使用 ArkhamJS 的 middleware 和如何使用 Immutable.js 来保证状态不可变。
安装和使用
首先，我们需要安装 arkhamjs-views-react 和它的依赖项。你可以使用 npm 来安装它们：
npm install --save arkhamjs arkhamjs-views-react react react-dom rxjs
在你的应用中，你需要引入 React、ReactDOM 和 arkhamjs-views-react：
import React from 'react';
import ReactDOM from 'react-dom';
import { ArkhamJSView } from 'arkhamjs-views-react';现在让我们来创建一个简单的应用。
-- -------------------- ---- -------
-- ------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------------ - ---- -----------------------
----- ------------ - -
-------- -
--
----- ------- - -
---------- ------- -------- -- -- --------- -------- ------------- - ------- ---
---------- ------- -------- -- -- --------- -------- ------------- - ------- --
--
----- ----- - ---------------------------------- ---------
----- --- - -- -- -
----- - ------- - - -----------------
------ -
-----
------------ --------------
------- ----------- -- --------------------------- ----------------------
------- ----------- -- --------------------------- ----------------------
------
--
--
----------------
------------- --------------
---- --
----------------
-------------------------------
--在这个例子中，我们创建了一个简单的应用，有一个点击加1和减1的按钮，展示当前计数器的数值。我们还创建了一个包含两个方法的 action 对象，分别是 increment 和 decrement，他们用于改变计数器的状态。
这个应用的核心是 store 对象，它由 ArkhamJS 的 createStore 方法创建。传入该方法的参数是应用的初始状态和 actions 对象。
在 App 组件中，我们可以像普通的 React 组件一样使用该状态管理。我们利用 store.getState() 获取状态值，该方法会返回 state 对象，并展示在 UI 上。
我们也使用 store.dispatch() 方法来派发 actions，该方法需要传入两个参数：action 名称和 payload。Actions 接受这些参数并返回一个新的 state 对象。派发完成后，该状态将被应用于 UI。
最后，使用 ArkhamJSView 组件将应用和 store 集成在一起，让它们跨组件传递 store。这样，整个应用都经过了 ArkhamJS 包装，并且可以使用 store 对象进行状态管理。
你现在应该可以看到一个展示在页面上有一个计数器的 UI，并有两个按钮来增加或减少它。
基础应用
让我们进一步探讨如何使用 arkhamjs-views-react 开发应用。
如果你正在使用传统的 React，你的 componentDidMount 方法中很可能会拥有获取数据的逻辑。在 ArkhamJS 中，所有的状态管理是集中在 store 中的，你需要将获取数据的逻辑放到 actions 中，发起一个异步请求，请求完成后返回一个新的 state 对象。
这里是一个获取用户数据的例子：
-- -------------------- ---- -------
----- ------- - -
--------- ----- ----- -- -
----- -------- - ----- --------------------
----- ----- - ----- ----------------
------ -
---------
-----
--
-
--此处，我们使用了一个 async 函数来获取数据，并将其作为 action 的返回值。在 UI 中，我们可以使用 store.getState().users 来获取用户列表。
-- -------------------- ---- -------
----- --- - -- -- -
----- - ----- - - -----------------
----- --------- ----------- - ----------------
------------ -- -
-----------------
------------------------------------- -- -------------------
-- ----
------ -
----
-------- - ------------------- - -------------- -- --- --------------------------------
-----
--
--useEffect 中传入一个空数组作为第二个参数，这是因为只有在组件挂载时该方法才会被调用一次。当请求完成后，我们设置 loading 状态为 false，此时用户列表会在 UI 中展示。
中间件
ArkhamJS 还提供了一些中间件的机制，它可以用来拦截 dispatch，同时进行一些额外的处理，这给予了我们更多的控制力以及扩展性。
每个中间件都是一个函数，它接收两个参数，store 和 next（下一个中间件或 store.dispatch()）。中间件的核心目的是修改或拦截 action 的处理过程，例如：限制对某个特定对象的操作或根据条件指定不同的 reducer 等等。
例如，下面是一个简单的 logger 中间件：
const loggerMiddleware = store => next => (action, ...args) => {
console.log(`%c${action}`, 'color: blue;', ...args);
const result = next(action, ...args);
console.log(`%cNew state:`, 'color: green;', store.getState());
return result;
};在这个例子中，我们将 action 名称和参数都记录下来，以及更新后的状态。这可以帮助我们在开发和调试时理解整个 flux cycle 的执行过程。
要使中间件生效，你需要将它们传递给 createStore() 方法的第三个参数：
const store = ArkhamJS.createStore(initialState, actions, [loggerMiddleware]);
这样，在每个派发 action 的时候，就会经过 loggerMiddleware 中间件来处理它。
Immutable.js
另一个非常有用的技术是 Immutable.js，它是一个 JavaScript 库，可以用于创建不可变的对象。在 React 应用中，这是非常重要的，因为它可以确保状态不会被不小心地修改，因此避免了出现潜在的 bug。
Immutable.js 中有三种主要类型：List、Map 和 Set，它们都是不可变的，一旦创建后就不能再改变它们。同时，它们也都提供了一些常用的方法来帮助我们操作和访问其内容。
以下是一个简单的例子，使用 Immutable.js 的 Map 来保存一个用户的信息，当点击时进行更新：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - --- - ---- ------------
----- ----------- - -----
----- -------
---- --
---
----- --- - -- -- -
----- ------ -------- - ----------------------
----- ------- - -- -- -
----------------------- --------------- - ----
--
------ -
-----
-------------
-------- ----------------------
------- ---------------------
------- -------------------------- ------------
------
--
--这里，我们使用了 useState hook，它可以让我们在函数组件中使用状态。我们也使用了 user.set() 方法来更新 user 状态，后者将创建一个新的 Map 对象。
使用 Immutable.js，我们避免了因为错误地修改了状态而导致的不稳定问题，同时也不需要使用深度拷贝（deep cloning）方法，而且相较于其他不可变对象库，Immutable.js 更加完整更灵活一些。
结论
在本文中，我们学习了如何使用 arkham-views-react 包来帮助你更轻松地管理应用状态。我们还看到了如何使用一些 React 相关的概念，包括 useState 和 useEffect。
同时，我们也学习了一些高级特性，例如使用 ArkhamJS 的 middleware 和 Immutable.js 来保证状态不可变。
最后，你可以从这里下载相关源代码：GitHub 页面。
希望本文能够对你有所帮助。如果有任何问题或建议，请随时在下方留言，谢谢！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005702a81e8991b448e7d4e