前言
在现代 Web 开发中，前端开发环境的自动化已经成为了必要的一部分，npm 是目前最为流行的包管理器之一。npm 具有丰富的包资源，可以帮助前端开发者解决很多难题。在这篇文章中，我们将讨论一个 npm 包 —— @havenlife/semotus。这是一个完全基于 React Hooks 构建的状态管理库，使用它可以轻松管理 React 应用程序的状态。
@havenlife/semotus 简介
@havenlife/semotus 是一个 React 状态管理库，它被设计成使用 React Hooks 来轻松管理您的 React 应用程序状态。它的特点如下：
- 0 依赖：Semotus 的实现完全基于 React Hooks，不需要使用任何其他的第三方库。
- 可测性: Semotus 的状态都是通过纯函数进行更新的，它允许直接测试你的状态更新函数，从而获得简洁可读的测试用例。
- 可组合性：Semotus 依赖于 React Hooks，可以轻松地与其他 React 插件集成。
安装 Semotus
可以通过 npm 来安装 Semotus，打开终端并执行以下命令：
npm install --save @havenlife/semotus
通过这个命令，你将会将 Semotus 安装至你的项目并添加到项目的 dependencies 中。
使用 Semotus
Semotus 的使用非常简单，只需要导入 useStore Hook 并将你的状态更新函数传递给它即可。在应用状态更新后，与 useStore 相关联的组件将自动更新。
-- -------------------- ---- -------
-- ------
------ ----- ---- --------
------ - -------- - ---- ---------------------
----- --------- - ----- -- -- ------ ----------- - - ---
-------- ----- -
----- --------- --------- - -----------
------ -
-----
--------- -----------
------- ----------- -- ---------------------------------------
------
--
-
------ ------- ----如上面的示例所示，你可以通过创建一个简单的状态更新函数来创建并更新应用的状态。状态更新函数基于当前状态并返回新的状态。
Semotus 高级用法
Semotus 支持更多先进的用法，如异步操作、组合使用等。
不可变状态
Semotus 的状态更新函数应该是纯函数，这意味着它应该完全基于当前状态（state）并返回一个新的状态值。在这个过程中，状态应该是不可变的，也就是说，将不会在原来的状态上进行修改，而是创建一个新的状态。
这个限制可能会让你感到不便，不过同时这也可以让你在测试过程中减少很多复杂性。更重要的是，尽管状态更新只是对于当前接收到的状态进行了修改，但 React 仍会认为状态已经发生了变化，从而让相应的组件重新渲染。
异步操作
有时，在更新状态时，你可能需要进行一些异步操作。你可以通过使用 useReducer 使 Semotus 支持异步操作。
-- -------------------- ---- -------
-- ------
------ ------ - --------- - ---- --------
------ - -------- - ---- ---------------------
----- -------- - ------- ----- -- -- --------- ---- ---- - ---
----- --------- - ------- ------- -- -- --------- ---- ---------- ------ - ---
-------- ----- -
----- - ------ -------- - - ---------- ----- --- ---------- ----- ---
------------ -- -
------------------- ------
------------------------ -- -
------------------ ------
------------------- -------
---
-- ----
------ -
-----
---------------- -- --------------------
-------------------- -- -
-- ------------------------------
---
------
--
-
------ ------- ----在这个示例中，我们使用了一个 useReducer 钩子，而不是直接使用 useStore。useReducer 钩子接收一个状态更新函数 reducer 和一个初始状态值 initialState，它的工作方式与 useStore 类似。
不同的是，在这个示例中，我们的状态是一个对象，其中包含了要展示的数据和一个标志 isLoading，表示正在加载数据。当组件被挂载时，我们使用一个组合的 fetching/isLoading 操作来设置状态，同时异步请求数据，一旦数据到达，我们可以再次调度状态更新并将 isLoading 标志设置为 false。确保在异步操作期间显示合适的加载指示器，可以让你的应用程序体验更佳。
组合使用
Semotus 的典型用例是在使用状态更新组件树的根组件中，它然后通过组合将状态传递到各个子组件中。但是，并不一定要完全遵循这种模式，你可以将 useStore 钩子使用到任何需要的地方，以便在组件树上的任何位置管理状态，并且 Semotus 仍然将能够正常工作。以下是一个展示如何将 Semotus 与非根级别组件集成的示例：
-- -------------------- ---- -------
-- -------
------ ----- ---- --------
------ - -------- - ---- ---------------------
----- ------- - ------- ----- -- --
------ ---------- -----
---
-------- ------ -- -- -
----- -- ----- -- --------- - -----------
----- ------------- - -- -- -
----------------- - --- ------ -- --- ----- ---
--
------ -
-----
-------- ---------
------- --------------------------- -------------
----
----------------- -- -- -
--- -------------------------
---
-----
------
--
-
------ ------- -----这个组件是一个简单的任务列表，它展示了使用 Semotus 在子组件中管理状态的方法。它使用了全局状态，但只管理其中一个属性。当按钮被点击时，它调用了一个 addTask 操作，它同时接收列表的当前任务数组以及新添加的任务对象，并返回了一个新的任务数组。在这个示例中，我们保留了其他的状态，以便其它组件可以更轻松地访问共享状态，这也是 Semotus 可组合并可扩展的优点。
总结
@havenlife/semotus 是一个基于 React Hooks 构建的状态管理库，使用它可以轻松管理 React 应用程序的状态。Semotus 拥有简单的 API 和可组合的钩子，带来了极致的用户体验，并提供了更好的测试能力。在本文中，我们介绍了如何使用 Semotus 来管理应用程序状态以及如何利用它的高级用法来解决更多的应用场景。Semotus 是一个非常出色的库，我相信你会非常喜欢它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedbc16b5cbfe1ea06119cf