在前端开发中，常常需要使用到状态管理库，目前常用的有 Redux 和 Mobx，但是它们的体积都比较大。如果项目需要用到状态管理，但是又不想引入大体积的库，那么可以使用 preact-small-redux 包。
什么是 preact-small-redux
preact-small-redux 是一个极小的状态管理库，它只有 Redux 的一小部分功能，但是比 Redux 更小。它使用 Preact 作为视图层库，因此需要先了解 Preact 的基本用法。
安装
使用 preact-small-redux 有两种安装方式，分别是直接在浏览器中引入和使用 npm 安装。
直接在浏览器中引入
<!-- 引入 Preact --> <script src="https://cdn.jsdelivr.net/npm/preact/dist/preact.min.js"></script> <!-- 引入 preact-small-redux --> <script src="https://cdn.jsdelivr.net/npm/preact-small-redux/dist/preact-small-redux.min.js"></script>
使用 npm 安装
npm install preact preact-small-redux
使用
首先，需要创建一个 Redux store，可以使用 preact-small-redux 的 createStore 方法创建。
-- -------------------- ---- -------
------ - ----------- - ---- ---------------------
----- ------------ - - ------ - --
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ---------------------可以看到，这里的 reducer 和 Redux 的使用方式是一样的。
接下来，在 Preact 组件中使用 preact-small-redux 提供的 connect 方法连接 store 和组件。
-- -------------------- ---- -------
------ - - - ---- ---------
------ - ------- - ---- ---------------------
-------- --------- ------ ---------- --------- -- -
------ -
-----
----------------
------- ------------------------------
------- ------------------------------
------
--
-
-------- ---------------------- -
------ -
------ ------------
--
-
-------- ---------------------------- -
------ -
---------- -- -- ---------- ----- ----------- ---
---------- -- -- ---------- ----- ----------- ---
--
-
----- ---------------- - --------
----------------
-------------------
-----------可以看到，这里的 mapStateToProps 和 mapDispatchToProps 和 Redux 的使用方式是一样的。
然后，将 ConnectedCounter 渲染到页面中。
import { h, render } from 'preact';
render(<ConnectedCounter />, document.body);至此，使用 preact-small-redux 实现状态管理的过程就完成了。
示例代码
完整的示例代码：
-- -------------------- ---- -------
------ - ----------- - ---- ---------------------
------ - -- ------ - ---- ---------
------ - ------- - ---- ---------------------
----- ------------ - - ------ - --
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ---------------------
-------- --------- ------ ---------- --------- -- -
------ -
-----
----------------
------- ------------------------------
------- ------------------------------
------
--
-
-------- ---------------------- -
------ -
------ ------------
--
-
-------- ---------------------------- -
------ -
---------- -- -- ---------- ----- ----------- ---
---------- -- -- ---------- ----- ----------- ---
--
-
----- ---------------- - --------
----------------
-------------------
-----------
------------------------ --- ---------------总结
preact-small-redux 是一个非常小巧的状态管理库，如果项目需要用到状态管理，但是又想要减小项目体积，那么可以考虑使用 preact-small-redux。同时，preact-small-redux 的使用方式和 Redux 是一样的，因此可以很快上手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600558a681e8991b448d5f7f