介绍
Redux 是一个非常优秀的状态管理库，在前端开发中很常用。但是 Redux 的 API 十分复杂，学习成本也很高。如果你想快速入门 redux，推荐使用 reduct 这个小巧、易用的 npm 包。
reduct 与 Redux 的差异主要在于它采用了更简单的 API，无需繁琐的 actions、reducers 的配置，只需要将业务逻辑抽象成一些纯函数即可。
安装
你可以通过 npm 安装 reduct：
npm install reduct
基本用法
首先，在你的脚本中引入 reduct：
import { createStore } from "reduct";然后，定义一个纯函数，该函数接受一个状态参数和一个动作参数，并返回一个新状态：
-- -------------------- ---- -------
-------- ------------- - -- ------- -
------ ------------- -
---- ------------
------ ----- - --
---- ------------
------ ----- - --
--------
------ ------
-
-接下来，使用 createStore 创建 store：
const store = createStore(counter);
这里的 counter 就是上一步定义的纯函数。
最后，我们可以通过以下方式获取 store 中的状态：
store.getState();
我们还可以通过以下方式来修改 store 中的状态：
store.dispatch({ type: "INCREMENT" });
store.dispatch({ type: "DECREMENT" });这里的 type 就是上一步定义中的 INCREMENT 或 DECREMENT。
使用 Action Crator
通常，我们使用 action creator 来创建动作对象。 action creator 是一个纯函数，用于生成动作。例如：
function increment() {
return { type: "INCREMENT" };
}
function decrement() {
return { type: "DECREMENT" };
}然后，我们可以使用这些 action creator 来调度动作：
store.dispatch(increment()); store.dispatch(decrement());
处理异步操作
reduct 还提供了一个中间件机制，可用于处理异步操作。
在创建 store 时，引入 middleware：
import { createStore, applyMiddleware } from "reduct";
import thunkMiddleware from "redux-thunk";
const store = createStore(counter, applyMiddleware(thunkMiddleware));在 reduct 中，你可以使用 action creator 来发起异步操作。例如：
-- -------------------- ---- -------
-------- ----------- -
------ -------- -- -
---------- ----- --------------- ---
------------- -- -
---------- ----- ------------------ -------- - ----- --- -- -- - ---
-- ------
--
-上面的代码中，fetchData() 返回一个函数，该函数接受 dispatch 函数作为其参数，通过 dispatch 函数来发起动作。
示例代码
-- -------------------- ---- -------
------ - ------------ --------------- - ---- ---------
------ --------------- ---- --------------
-------- ------------- - -- ------- -
------ ------------- -
---- ------------
------ ----- - --
---- ------------
------ ----- - --
--------
------ ------
-
-
-------- ----------- -
------ - ----- ----------- --
-
-------- ----------- -
------ - ----- ----------- --
-
-------- ----------- -
------ -------- -- -
---------- ----- --------------- ---
------------- -- -
---------- ----- ------------------ -------- - ----- --- -- -- - ---
-- ------
--
-
----- ----- - -------------------- ----------------------------------
------------------------------
----------------------------
------------------------------
----------------------------
------------------------------
----------------------------
------------------------------
----------------------------
------------------------------以上示例演示了 reduct 库的基本使用、action creator 的使用，以及异步状态获取的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8b8c