npm 包 reduction-sauce 使用教程

阅读时长 5 分钟读完

介绍

reduction-sauce 是一个优化 Redux 性能的工具库,通过批量化处理多个 action,减少对 Store 的写操作,来提高 Redux 应用的性能。在具有较大的 Redux Store 数据时,使用 reduction-sauce 可以明显提升应用的响应速度。

安装

使用 npm 安装 reduction-sauce:

API

reduction-sauce 仅有一个 API 函数 createCloseOperation,它接收一个 operator 函数和一个默认的返回值,返回值可以不传,此时默认为 false。

  • operator: 必选参数,类型为函数,接收两个参数,第一个是默认的返回值 defaultValue,第二个是 action 数组;
  • defaultValue: 可选参数,类型为任何值,如果不传,则默认为 false;

createCloseOperation 返回一个 Redux 中间件函数,可以用来加强 Redux Store 状态管理。

用法

createCloseOperation 函数导入到相应的文件中:

然后创建一个 operator 函数:

  • defaultValue 为操作的默认值;
  • actions 为按顺序收集到的 action 数组,注意顺序是从最近到最久的;
  • 返回值 result 为操作的结果,reduction-sauce 将用它更新 Store。

最后使用 createCloseOperation 创建一个 Redux 中间件:

将它加到 Redux Store 中:

现在就可以在操作多个 action 时使用新的 middleware 了。reduction-sauce 会每隔一段时间(默认 100ms)开始处理所有已经收集的 action 数组,并将操作的结果传递给 operator 函数。然后中间件会将操作结果替换 Store 上的值。

示例

对于一个购物车应用,每次点击加入购物车按钮都会发送一个 action 给 Redux Store:

-- -------------------- ---- -------
----- ----------- - --------------

----- --------- - ----------- --------- -- -
    ------ -
        ----- ------------
        -------- -
            ----------
            --------
        -
    --
--
展开代码

我们可以先创建一个 operator 来处理 ADD_TO_CART 类型的 action:

然后使用 createCloseOperation 创建一个新的 middleware:

将它加到 Redux Store 中:

这时候,每次添加商品时的 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

纠错
反馈

纠错反馈