介绍
reduction-sauce 是一个优化 Redux 性能的工具库,通过批量化处理多个 action,减少对 Store 的写操作,来提高 Redux 应用的性能。在具有较大的 Redux Store 数据时,使用 reduction-sauce 可以明显提升应用的响应速度。
安装
使用 npm 安装 reduction-sauce:
$ npm install --save reduction-sauce
API
reduction-sauce 仅有一个 API 函数 createCloseOperation
,它接收一个 operator 函数和一个默认的返回值,返回值可以不传,此时默认为 false。
- operator: 必选参数,类型为函数,接收两个参数,第一个是默认的返回值 defaultValue,第二个是 action 数组;
- defaultValue: 可选参数,类型为任何值,如果不传,则默认为 false;
createCloseOperation
返回一个 Redux 中间件函数,可以用来加强 Redux Store 状态管理。
用法
将 createCloseOperation
函数导入到相应的文件中:
import { createCloseOperation } from 'reduction-sauce';
然后创建一个 operator 函数:
const operator = (defaultValue, actions) => { // some logic operation return result; }
defaultValue
为操作的默认值;actions
为按顺序收集到的 action 数组,注意顺序是从最近到最久的;- 返回值
result
为操作的结果,reduction-sauce 将用它更新 Store。
最后使用 createCloseOperation
创建一个 Redux 中间件:
const closureMiddleware = createCloseOperation(operator);
将它加到 Redux Store 中:
import { createStore, applyMiddleware } from 'redux'; const store = createStore(reducer, applyMiddleware(closureMiddleware));
现在就可以在操作多个 action 时使用新的 middleware 了。reduction-sauce 会每隔一段时间(默认 100ms)开始处理所有已经收集的 action 数组,并将操作的结果传递给 operator 函数。然后中间件会将操作结果替换 Store 上的值。
示例
对于一个购物车应用,每次点击加入购物车按钮都会发送一个 action 给 Redux Store:
-- -------------------- ---- ------- ----- ----------- - -------------- ----- --------- - ----------- --------- -- - ------ - ----- ------------ -------- - ---------- -------- - -- --展开代码
我们可以先创建一个 operator 来处理 ADD_TO_CART 类型的 action:
const addToCartOperator = (defaultValue, actions) => { let result = defaultValue; for (let i = 0; i < actions.length; i++) { result += parseInt(actions[i].payload.quantity); } return result; };
然后使用 createCloseOperation
创建一个新的 middleware:
const closureMiddleware = createCloseOperation(addToCartOperator, 0);
将它加到 Redux Store 中:
const store = createStore(reducer, applyMiddleware(closureMiddleware));
这时候,每次添加商品时的 action 只是简单地将 quantity 的值添加到 Store 上的 cartCount 属性上,而不是直接修改它。这样等到某个时刻,多个 AddToCart action 将触发 closureMiddleware,执行 operator 函数逻辑,最终将处理结果更新到 Redux Store 上的 cartCount 属性上。这样就可以大大减少对 Store 的写操作,从而提高 Redux 应用的性能。
小结
reduction-sauce 是一个优化 Redux 性能的工具库,提供了 createCloseOperation
函数用于批量化处理多个 action,减少对 Store 的写操作。正确使用 reduction-sauce 可以提高 Redux 应用的响应速度,增强用户体验。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8b82