简介
preact-small-redux-classic 是一个基于 Preact.js 的 Redux 状态管理工具。相比于官方的 Redux，它更轻量，更易于使用，并且提供了一些额外的功能。
安装
通过 npm 安装 preact-small-redux-classic：
npm install preact-small-redux-classic --save
使用
创建 Store
-- -------------------- ---- -------
------ - ----------- - ---- -----------------------------
----- ------------ - -
------ -
--
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------
------ -
---------
------ ----------- - -
--
---- ------------
------ -
---------
------ ----------- - -
--
--------
------ ------
-
--
----- ----- - ---------------------在这里，我们首先定义了一个初始状态 initialState，然后定义了一个 reducer 函数来处理状态变更。最后我们通过 createStore 创建了一个全局唯一的 Store 对象。
订阅状态变更
const listener = () => {
console.log(store.getState());
};
store.subscribe(listener);在这里，我们定义了一个 listener 函数，它将在 Store 中的状态变更时执行。我们通过 store.subscribe 将其注册到 Store 对象中。
派发 Action
store.dispatch({ type: 'INCREMENT' });在这里，我们使用 store.dispatch 方法来派发一个 Action。Action 是一个包含 type 属性的简单对象，用于描述状态变更的类型。
获取当前状态
console.log(store.getState());
在这里，我们通过 store.getState 方法来获取当前的状态。
示例代码
下面是一个简单的计数器应用程序的示例代码：
-- -------------------- ---- -------
------ - -- ------ - ---- ---------
------ - ----------- - ---- -----------------------------
----- ------------ - -
------ -
--
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------
------ -
---------
------ ----------- - -
--
---- ------------
------ -
---------
------ ----------- - -
--
--------
------ ------
-
--
----- ----- - ---------------------
----- --- - -- -- -
----- --------------- - -- -- -
---------------- ----- ----------- ---
--
----- --------------- - -- -- -
---------------- ----- ----------- ---
--
------ -
-----
---------- -----------------------------
------- --------------------------------------------
------- --------------------------------------------
------
--
--
------------------ -- -
----------- --- ---------------------------------
---
----------- --- ---------------------------------在这个示例中，我们首先定义了一个初始状态 initialState，然后定义了一个 reducer 函数来处理状态变更。我们通过 createStore 创建了一个 Store 对象。
然后，我们编写了一个简单的 Preact.js 组件 App。它通过调用 store.dispatch 方法来派发 Action，以更改 Store 中的状态。组件通过调用 store.getState 方法来获取当前的状态。
最后，我们通过调用 store.subscribe 方法来注册一个 listener 函数，当 Store 中的状态变更时，它将重新渲染应用程序界面。
进一步指导
preact-small-redux-classic 提供了一个相对简单的 Redux 实现，但它并不是万能的。在使用本工具时，需要注意以下几点：
- Action 对象需要描述清楚状态变更的操作类型，尽量使用常量来表示，避免硬编码。
- Reducer 函数需要保证纯函数的特性，不应有副作用或生成新的状态对象，而应该在原有状态对象的基础上进行修改。
- Store 中的状态对象需要保证不可变性，即每次状态变更时，都需要返回一个新的状态对象，避免直接修改已有的状态对象。
如果想要进一步深入学习 Redux 相关概念和技术，请参考官方文档：https://redux.js.org/tutorials/essentials/part-1-overview-concepts
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005590481e8991b448d651f