前言
随着前端项目越来越庞大和复杂，redux 中的 reducer 也变得越来越复杂。一些大型的、嵌套的 reducer 可能无法使用正则表达式或手动计时的方式方便地进行性能测试。此时，distributedlife-redux-log-slow-reducers 这个 npm 包就在这个时候应运而生。下面我们将介绍这个包的使用方法和意义。
安装
首先，我们需要安装 distributedlife-redux-log-slow-reducers 这个包。在项目中使用以下命令进行安装：
npm install --save distributedlife-redux-log-slow-reducers
使用
distributedlife-redux-log-slow-reducers 库提供了一个叫做 logSlowReducers 的方法。这个方法可以用来监测一些 reducer 在运行时是否会有性能问题，并将结果输出到控制台。
第一步，我们需要将这个方法引入我们的项目中：
import { logSlowReducers } from 'distributedlife-redux-log-slow-reducers';第二步，我们需要在 createStore 的时候将 logSlowReducers 方法传入 createStore 方法中：
const store = createStore(reducer, initialState, logSlowReducers);
通过以上两步，我们就可以在 redux 运行的时候监测到哪些 reducer 存在性能问题了。
意义
distributedlife-redux-log-slow-reducers 为我们带来的最大意义就是可以帮助我们在运行时找到 reducer 中的性能问题。这些 reducer 可能已经被多次调用，如果没有监测工具的话，我们很难知道它们是否已经成为了应用程序中的性能瓶颈。
同时，这个工具还可以在一些代码 review 和开发优化阶段派上用场。我们可以使用这个工具确定哪些 reducer 是性能问题，找到代码中究竟哪些部分引入了性能问题。然后再进行优化。
示例
下面是一个简单的示例，用来说明 distributedlife-redux-log-slow-reducers 是如何使用的：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - --------------- - ---- ------------------------------------------
----- ------------ - - ------ - --
----- -------------- - -- -- -- ----- ----------- ---
----- ------------ - ------ - ------------- ------- -- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
--
----- ----------- - -----------------
------ -------------
---
----- ----- - ------------------------ ------------- -----------------
-------------- -- -
---------------------------------
-- ---在上面的代码中，我们首先引入了 logSlowReducers 方法，并在 createStore 方法中将它传入。然后我们运行了一个无限循环，持续向 store 中 dispatch incrementCount() action，以模拟项目中复杂的 reducer 调用。
结语
distributedlife-redux-log-slow-reducers 这个 npm 包为我们提供了一个实用的工具，可以帮助我们找到复杂的 redux reducer 中的性能问题。它的使用方法简单明了，可以帮助我们在开发过程中快速定位性能问题。在大型项目中，这个库的意义尤其重要。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005596b81e8991b448d6f04