简介
Redux 是常用的 JavaScript 状态管理库，它让应用程序可以方便地管理状态变化。而 redux-roll 是一个 Redux 的中间件，可以将 Redux actions 封装为可重复执行的函数，从而使得 Redux 的数据流更加易于理解和维护。它起到了类似领域驱动设计中“领域事件”的作用，让 Redux 应用程序可以更加符合业务逻辑。
安装和配置
先安装 redux 和 redux-roll：
npm install redux redux-roll --save
然后在 Redux 应用程序中添加 redux-roll 中间件：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ - -------------------- - ---- ------------- ------ ----------- ---- ------------- ----- -------------- - ----------------------- ----- ----- - ------------ ------------ ------------------------------- --
使用示例
假设有一个购物车的应用程序，用户可以向购物车中添加商品，调整购买数量，继续购物，为商品打标签等。开发人员需要在 Redux actions 中定义各种操作，但这样会导致 actions 变得可读性差，难以维护。
使用 redux-roll 可以将多个操作封装起来，组成一个可重复执行的函数。例如，我们可以定义一个名为“addToCart”的滚动操作，它可以实现将商品添加到购物车，更新购买数量，记录操作日志等：
-- -------------------- ---- -------
------ - ---------- - ---- -------------
------ ----- --------- - ------------
----- ------------
------------ -- ---------- -------- -- -- -- ---------- -------- ---
-------- -
- ----- ------------------- ---------- --------------- --------- ------------- --
- ----- ------------ -------- ------ ------- ------------ ---- -------- ----------- -- ----- --
--
----- -
- ----- ------------------------ ---------- -------------- --
- ----- ------------ -------- -------- ------- ------------ ---- ----- --
--
----- -
- ----- ------------------- ---------- --------------- --------- ------------- --
- ----- ------------ -------- ------ ----- ------- ------------ ---- -------- ----------- -- ----- --
--
---其中，createRoll 函数接受一个对象参数，包括以下字段：
- name：该滚动操作的名称。
- initialArgs：一个函数，返回该滚动操作的初始参数，用于初始化滚动操作的状态。
- effects：一个数组，包含多个 Redux actions，用于执行该滚动操作时的数据变化。
- undo：一个数组，包含多个 Redux actions，用于撤销该滚动操作时的数据变化。
- redo：一个数组，包含多个 Redux actions，用于重做该滚动操作时的数据变化。
在上述代码中，我们为 addToCart 定义了数据变化的逻辑，包括添加商品到购物车，更新购买数量，并记录操作日志。undo 和 redo 分别指定了撤销和重做时的操作。在所有的数组中，我们可以使用模板变量 ${} 来引用 initialArgs 函数返回的初始参数。
现在可以在 Redux 应用程序中使用 addToCart 函数了。例如，当用户点击“加入购物车”按钮时，我们可以执行以下代码：
import { addToCart } from './actions';
dispatch(addToCart({ productId: 123, quantity: 2 }));这将执行 addToCart 函数，将 productId 和 quantity 参数传递给 initialArgs 函数，并执行 effects 数组中的 Redux actions，从而将商品添加到购物车。
如果需要撤销该操作，可以执行以下代码：
import { undoRoll } from 'redux-roll';
dispatch(undoRoll());这将执行 redux-roll 中间件中的 undoRoll 操作，从而撤销上一次 addToCart 操作，执行 undo 数组中的 Redux actions。
类似地，如果需要重做该操作，可以执行以下代码：
import { redoRoll } from 'redux-roll';
dispatch(redoRoll());这将执行 redux-roll 中间件中的 redoRoll 操作，从而重做上一次 addToCart 操作，执行 redo 数组中的 Redux actions。
总结
在 Redux 应用程序中使用 redux-roll 可以让我们更加方便地管理状态变化，并让代码更加易读和易于维护。它的使用方法并不复杂，但可以带来巨大的收益。建议开发人员在开发 Redux 应用程序时尝试使用该中间件，以提高代码质量和开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600552cb81e8991b448d0322