什么是 reduck？
reduck 是一个基于 redux 的状态管理框架，它为了简化 redux 在大型应用中的使用而设计。它提供了一些便于编写和测试的功能和工具，主要包括：
- 异步 action 处理
- action 创建和 reducer 管理的模块化组织方式
- 简单但强大的 state 升级器
reduck 的安装和使用
要使用 reduck，首先需要安装它。使用下面的命令：
npm install reduck
或者使用 yarn：
yarn add reduck
安装之后，你可以在你的项目中按以下方式使用它。
模块设置
reduck 模块由三个部分组成：action、reducer 和 selector。
Action
Action 是指导 reducer 升级数据的指令。它们描述了一个事件在应用程序中的发生，例如用户单击按钮，数据从服务器加载等。Action 是一个简单的 JavaScript 对象，包含一个 type 属性和一个可选的 payload 属性。
通常，在这些 action 中都包括服务器请求，使应用程序在结果准备好之前都有一个加载状态。
在 reduck 中，action 是一个常规 JavaScript 模块。如下是一个简单的例子：
-- -------------------- ---- -------
-- -----------
------ ----- ----------------- - --------------------
-- ----------
------ - ----------------- - ---- -------------
------ -------- ----------- -
------ -
----- -----------------
-
-
------ -------- ---------------- -
------ -------- -- -
------------- -- -
---------------------
-- -----
-
-在上面这个例子中，我们定义了一个 increment 操作，它会自动增加计数器。我们还定义了一个 incrementAsync 操作，它会在 1 秒钟之后异步调用 increment 操作。
Reducer
Reducer 是一个纯函数，用于根据当前状态和 action 来更新状态。它评估 action 的 type 属性来确定 action 的目的，并从一个旧的 state 对象生成一个全新的 state 对象。
在 reduck 中，reducer 是一个常规 JavaScript 模块。如下是一个简单的例子：
-- -------------------- ---- -------
------ - ----------------- - ---- -------------
------ ------- -------- ------------- - -- ------- -
------ ------------- -
---- ------------------
------ ----- - --
--------
------ ------
-
-在上面这个例子中，我们定义了一个计数器 reducer，每次在接收到 action 时都会将 state 加上 1。
Selector
Selector 是一个可选项，用于生成一个从 state 中计算派生的值。它们有效地将业务逻辑代码从 state 中解耦，并允许在不依赖于状态树结构的情况下进行更简单的测试。
在 reduck 中，selector 是一个常规 JavaScript 模块。假设我们在上面的 reducer 中添加了一些新的字段，则可以按如下方式定义一个计算函数：
export const getCounter = state => state.counter;
组合状态和处理器
现在，我们已经定义了 reducer、action 和 selector，我们需要将它们组合起来并输出为一个 reduck 模块。
在 reduck 中，我们可以定义一个 configureModule 函数来组成 reducer 和 selector。例如，在上面的例子中，可以按如下方式定义：
-- -------------------- ---- -------
------ - --------------- - ---- ---------
------ -------------- ---- -------------
------ - ---------- - ---- --------------
------ - -- ------- ---- ------------
----- ------------- - -----------------
-------- ---------------
---------- -
----------
--
-------
---
------ ------- --------------在这个示例中，我们将 counterReducer 作为 reducer 参数来创建一个配置模块。我们还将 getCounter 添加到 selectors 对象并添加到配置模块中。我们还将 export 的 action 添加到 actions 中。
使用 reduck
现在，我们已经设置了 reduck，可以按以下方式在应用程序中使用它：
-- -------------------- ---- ------- ------ ------------- ---- ------------------ -- ----- ------------------- -------- --------------------- --- -- -- ------ --------------------------------------------------
在上述示例中，我们可以将配置模块作为 store.addReducers 的 reducer 参数添加到应用程序中。
此外，我们可以使用 counterModule.actions 对象来调用我们之前定义的 actions。
总结
reduck 为 redux 应用程序的状态管理提供了一个简便且灵活的方法。除了提供基本的 reducer 和 action 创建之外，它还提供了可测试的 state 升级器和简单但强大的组件。
由于它易于使用且高度灵活，我们推荐在开发 redux 应用程序时使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8b8a