介绍
@uneksija/comea 是一款用于构建复杂前端应用的状态管理库。它提供了一种可扩展的状态容器和基于 redux-thunk 的 action 异步处理机制。如果你熟悉 Redux，那么使用 comea 将会很容易上手。
安装
你可以通过 npm 或 yarn 安装 comea：
npm install @uneksija/comea
yarn add @uneksija/comea
基本使用
1. 创建状态容器 Store
-- -------------------- ---- -------
------ - ----------- - ---- ------------------
----- ------------ - -
------ --
--
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------
------ -
---------
------ ----------- - ---------------
--
---- ------------
------ -
---------
------ ----------- - ---------------
--
--------
------ ------
-
--
----- ----- - ---------------------createStore 接受一个 reducer 函数作为参数，并返回一个状态容器 store。reducer 函数负责处理不同的 action 类型，修改应用的状态。在这个例子中，我们定义了一个叫做 count 的状态，用于记录计数值。当接收到 INCREMENT 或 DECREMENT 类型的 action 时，reducer 函数将从 action 中解析出贡献值 payload，然后据此增加或减少 count 状态的值。注意，永远不要修改原始 state 对象，必须使用展开操作符 ... 或通过 Object.assign() 方法创建新的状态对象。
2. 接收状态变化
在上面的例子中，我们定义了一个初始状态 initialState，以及一个 reducer 函数用于修改状态。但是，如何在组件中访问状态并响应状态变化？事实上，comea 采用了和 React Hooks 类似的机制，通过 useContext 钩子函数在组件中访问状态。不过，comea 将状态管理和 React 组件完美结合在一起，你不再需要使用各种 connect，mapStateToProps，dispatchToProps 等繁琐的代码来完成组件和状态之间的交互关系。相反，你只需要在顶层组件中使用 Provider 组件来提供状态，就可以让所有后代组件都能够访问状态，并且状态变化会自动触发组件重新渲染。
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- -------- - ---- ------------------
----- ----- - -- -- -
----- ------- --------- - -----------
----- --------------- - -- -- ---------- ----- ------------ -------- - ---
----- --------------- - -- -- ---------- ----- ------------ -------- - ---
------ -
-----
---------- ------------------
------- ------------------------------------
------- ------------------------------------
------
--
--
----- --- - -- -- -
----------
------ --
-----------
--在这个例子中，我们使用了 useStore 钩子函数，它返回一个由状态和 dispatch 函数构成的元组 [state, dispatch]。你可以使用 state 来访问状态对象，使用 dispatch 来发送 action。注意，在函数式组件中，必须采用显式声明的方式来定义状态容器，因为没有 this 对象可以使用。而且，state 和 dispatch 都必须使用 const 声明为不可变变量。最后，使用 Provider 组件来包裹所有的后代组件，这样所有的下级组件都可以通过 useContext 钩子函数来访问状态。因为 Provider 是在顶层组件中定义的，所以状态变化可以自动传递到下级组件中。
3. 异步处理
有时候，你可能需要异步地修改状态，例如使用 fetch() 函数从网络上获取数据，然后将数据存入状态容器中。为了实现异步处理，comea 提供了 async 函数的支持，它可以返回一个 thunk 函数，用于包装原始的 action 调用。由于 thunk 是一个函数，所以它可以在内部执行一些异步操作，然后在异步操作完成后再发送 action。在这个例子中，我们使用 async 和 await 关键字，封装了一个 fetchUser() 函数，它从 GitHub 的 API 中获取用户数据，然后将用户信息存入状态容器中。
-- -------------------- ---- -------
------ - ----------- - ---- ------------------
----- ------------ - -
----- -----
-------- ------
--
----- ------- - -------------------- ------- -- -
------ ------------- -
---- ---------------------
------ -
---------
-------- -----
--
---- ---------------------
------ -
---------
-------- ------
----- ---------------
--
---- ---------------------
------ -
---------
-------- ------
--
--------
------ ------
-
--
----- --------- - -------- -- ----- -------- -- -
---------- ----- -------------------- ---
--- -
----- -------- - ----- --------------------------------------------------
----- ---- - ----- ----------------
---------- ----- --------------------- -------- ---- ---
- ----- ------- -
---------- ----- -------------------- ---
-
--
----- ----- - ---------------------
------ - ------ --------- --在这个例子中，我们首先定义了一个 initialState 对象，其中包含了 user 和 loading 两个状态。然后，我们编写了 reducer 函数，它处理三种不同类型的 action，分别是 FETCH_USER_REQUEST，FETCH_USER_SUCCESS 和 FETCH_USER_FAILURE 类型。当接收到 FETCH_USER_REQUEST 类型的 action 时，reducer 函数将设置 loading 状态为 true，表示正在获取数据。当接收到 FETCH_USER_SUCCESS 类型的 action 时，reducer 函数将设置 loading 状态为 false，同时将获取到的用户数据保存在用户状态 user 中。最后，当接收到 FETCH_USER_FAILURE 类型的 action 时，reducer 函数只设置 loading 状态为 false，表示出现错误。
在 fetchUser 函数中，我们首先发送了一个 FETCH_USER_REQUEST 类型的 action，然后使用 fetch() 函数从 GitHub API 中获取用户数据，并将 json 数据解析为 Javascript 对象。如果获取成功，我们将发送一个 FETCH_USER_SUCCESS 类型的 action，将用户信息保存在状态容器中。如果获取失败，则发送一个 FETCH_USER_FAILURE 类型的 action，以便在应用中显示错误信息。
4. 在组件中使用异步处理
有了异步处理，我们可以编写更加复杂的应用逻辑，包括从服务器获取数据、保存到数据库、更新缓存等等。接下来，让我们来看看如何在组件中使用 fetchUser() 函数，并显示用户信息。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - --------- -------- - ---- ------------------
------ - --------- - ---- ----------
----- ---- - -- -- -
----- ------- --------- - -----------
------------ -- -
--------------------------------
-- ------------
------ -
-----
-------------- - -
-------------------
- - -
---------- -- -
-----
---- --------------------------- --------------------- --
--------------------------
-----------------------
-- -------------------------------- ------ -----------
------
-
--
------
--
--
----- --- - -- -- -
----------
----- --
-----------
--在这个例子中，我们定义了一个组件 User，用于显示用户信息。在组件中，我们使用 useEffect 钩子函数来发起异步请求，一旦 dispatch(fetchUser('zhangboo')) 被调用，fetchUser 函数将从 GitHub API 中获取用户信息，并将其保存到状态容器中。因此，当用户信息可用时，state.user 将不为 null，并且我们将使用 state.user 属性来获取所有必要的信息，并显示在组件中。此外，我们还需要增加一个 Loading... 文本，以提示用户正在等待数据的加载。
结语
本文对 comea 的基本使用进行了详细的介绍，并提供了一个异步示例，以帮助读者更好地理解 comea 的功能和用法。总的来说，在使用 comea 时，你需要注意以下几点：
- 使用 createStore 创建状态容器 store，使用 reducer 函数来处理 action。
- 通过 Provider 组件在组件树的顶层提供状态容器，使用 useStore 钩子函数在子组件中获取状态和 dispatch 函数。
- 使用 async 函数来封装异步处理逻辑，包括网络请求和本地存储。
- 在组件中使用 useEffect 钩子函数来发起异步请求，并使用 state 和 dispatch 来访问和修改状态。
由于 comea 的 API 设计类似于 React Hooks，因此你可能需要花费一些时间来熟悉和掌握 comea。但是，一旦你熟悉了来自它的使用方式，你就会发现它非常简洁、可读性高、易于测试和维护。希望通过本文的介绍，帮助读者更好地理解 comea，并能够熟练使用它来构建复杂的前端应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056dc881e8991b448e718b