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