介绍
Preact-Smitty 是一个小型的状态管理库，使用了 preact hooks。它提供了一种简单的方式来管理您的组件的状态。Smitty 提供了与 Redux 的 Actions 类似的简化版本，适用于更小、更简单的项目。
安装
在您的项目目录下，运行以下命令来安装 preact-smitty：
npm i preact-smitty
快速上手
使用 preact-smitty 非常地简单，只需完成三个步骤：
- 从 Smitty 模块中导入 useStore。
- 在您的组件中使用 useStore 来获取 store 对象和 updateStore 对象。
- 在组件中使用 store 和 updateStore。
以下是一个示例：
-- -------------------- ---- -------
------ - - - ---- ---------
------ - -------- - ---- ----------------
-------- --------- -
-- --- ----- --- -----------
----- ------- ------------ - ---------- ------ - ---
-- --------- -----
----- --------- - -- -- -
------------------- -- -
----------- -- --
---
--
-- ------
------ -
-----
--------- -----------------
------- --------------------------------------
------
--
-
------ ------- --------在上面的代码中，我们从 preact-smitty 包中导入了 useStore 函数，通过它来获取 store 和 updateStore。store 是一个对象，它保存了我们组件中具有状态的属性。updateStore 函数是用来更新存储值的。
在我们的组件中，我们将 store 中的 count 属性作为组件的状态，然后通过使用 updateStore 函数来反映这个状态的变化。
您会发现上述例子中并没有提到 dispatch 和 action，这是因为 preact-smitty 用简单易懂的方式替代了它们。
API 文档
useStore(initialState)
useStore 是 preact-smitty 的核心函数，用于执行订阅状态更新并返回存储值和更新器。
参数：
initialState：任何可以成为您的 store 的初始值的东西，可以是 Undefined，null，Number，String，Boolean，Array，Object 或函数。
返回值：
[store, updateStore]：返回 store 和 updateStore，后者用于更新状态。
updateStore(updateFunction)
updateStore 函数通过 updateFunction 函数来更新存储值。
参数：
updateFunction(state, props)：该函数将被调用，以函数的方式接收 store 和 props 作为参数。该函数必须返回一个新的状态对象或者可以产生新状态对象的函数。
综合示例
以下是一个更完整和复杂一点的示例，用于演示 preact-smitty 如何管理更复杂的状态和逻辑。
-- -------------------- ---- -------
------ - - - ---- ---------
------ - -------- - ---- ----------------
-------- ---------- -
-- --- ----- --- -----------
----- ------- ------------ - ----------
------ ---
-------- ---
------- ---
---
-- ------ ----- ----
----- ------------- - ------------------------- -- -
------ ------------ --- -- -- ------------------------------------
---
-- --- --- ---- ----
----- ------- - -- -- -
------------------- -- -
------------------ ------ -------------- ---------- ----- ---
------------- - ---
---
--
-- ------ - ---- ----
----- ---------- - ------- -- -
------------------- -- -
------------------------- ---
---
--
-- ------ ---- ---- --------
----- ---------- - ------- -- -
------------------- -- -
---------------------------- - ------------------------------
---
--
-- ------
------ -
-----
-------- ---------
-----
------
-----------
---------------------
------------ -- ------------- -------- -------------- ---
--
------- ------------------------------
------
------------------------- ------ -- -
------ -
---- ------------
-------
------
---------------
------------------------
----------- -- ------------------
--
------------
--------
------- ----------- -- ----------------------------------
------
--
---
-----
-------
-------
------
-----------
--------------------
------------ -- ------------- ------- -------------- ---
--
--------
------
------
--
-
------ ------- ---------在上述代码中，我们定义了一个 TodoList 组件来展示一个类似于 TodoMVC 的应用程序。我们的存储包括一个 todos 数组、一个 newTodo 字符串和一个 filter 字符串。我们使用 updateStore 函数来更新存储值。
在我们的组件中，我们展示了存储的所有数据，并提供了添加一个新 Todo，删除一个 Todo，标记一个 Todo 完成的功能。我们还实现了一个过滤器，允许用户根据 Todo 的名称对 Todo 列表进行过滤。
在上面的示例中，我们展示了使用 preact-smitty 来管理更为复杂的应用程序状态的强大方法，并演示了如何使用不同的存储键和不同的更新函数，以更新我们的存储中的值。
总结
preact-smitty 是一个非常有用的小型状态管理库，它使用了 preact hooks，是您在处理更小、更简单的项目时所需要的。 使用 preact-smitty 与 Redux 不同之处在于我们更简单地更新状态，没有必要使用 dispatch 和 action。当您想要对 preact 的开发进行状态管理时，preact-smitty 是一个绝佳的选择。该库是根据 preact 状态管理的最佳实践开发的，具有非常方便的使用和配置方式。 通过这篇文章，您应该已经具备了足够的知识来在自己的 Preact 项目中使用 preact-smitty，并能够编写出更复杂的应用程序状态管理代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005725781e8991b448e86e4