在前端开发中，使用 Redux 可以有效地管理应用的状态。而在使用 Redux 进行开发的过程中，我们常常需要使用 reselect 库来进行状态管理。而 reselect-devtools 则是一个针对 reselect 库的调试工具，可以帮助开发者更加有效地调试应用的状态。本文将介绍如何使用 reselect-devtools 对 reselect 库进行调试。
1. 安装 reselect-devtools
在使用 reselect-devtools 进行调试之前，我们需要先安装它。可以通过以下命令来安装：
npm install --save reselect-devtools
2. 开启 reselect-devtools
在安装完 reselect-devtools 之后，我们需要在代码中开启它。具体的方法是在项目入口处引入 reselect-devtools，并使用其提供的 enableDevTools 方法来开启：
import { enableDevTools } from 'reselect-devtools';
enableDevTools(store);其中，store 是我们的 Redux store。
3. 使用 reselect-devtools
在开启了 reselect-devtools 之后，我们可以在 Redux DevTools 的 Selectors 标签中找到 reselect-devtools 的工具界面。在这个界面中，我们可以查看所有的 selector，并使用 reselect-devtools 提供的功能来进行调试。以下是 reselect-devtools 提供的主要功能：
3.1. 查看 selector 调用情况
在 reselect-devtools 的工具界面中，可以看到所有的 selector，并查看它们的调用情况。在调用情况中可以看到 selector 被调用的次数，以及调用时传入的参数。这可以帮助我们更好地了解 selector 被调用的情况，以及 selector 中传入参数的值。
3.2. 记录 selector 的计算结果
在 reselect-devtools 的工具界面中，我们可以记录 selector 的计算结果。在使用 reselect 进行开发时，我们通常会使用 createSelector 方法创建 selector。这些 selector 在计算时会根据输入值进行缓存，在下次相同的输入值传入时，就可以直接返回之前的计算结果，从而节省计算开销。而在 reselect-devtools 的工具界面中，我们可以记录每次计算结果，并查看每个结果对应的输入值。这可以帮助我们更好地了解每个计算结果是如何得到的。
3.3. 对比 selector 的计算结果
在 reselect-devtools 的工具界面中，我们可以对比两次 selector 的计算结果。这可以帮助我们更好地了解 selector 的计算结果是否发生了变化。
4. 示例代码
以下是一个使用 reselect-devtools 的示例代码：
-- -------------------- ---- -------
------ - -------------- - ---- -----------
------ - -------------- - ---- --------------------
------ - ----------- - ---- --------
----- ------------ - -
------ -
- ----- ------ ------- ---------- ---- --
- ----- ------ ------- ---------- ----- --
--
--
----- ------------------ - ------- ------ -- -
----- ----- - --------------------
------------ - - ---------------- ---------- ----------------------- --
------ ------
--
----- -------- - ----- -- ------------
----- ----------------- - ---------------
---------
----- -- ----------------- -- ---------------
--
----- ----- - ------------------ - ------------- ------- -- -
------ ------------- -
--------
------ ------
-
---
----------------------
--------------------------------------------- -- -- ----- ------ ------- ---------- ---- --
------------------------------------------------ -- -
----- -------- - -------------------------------- ---
----------------------------------------- -- --
------------------------------------------------ -- -在上面的示例代码中，我们定义了一个 selector getCompletedTodos，它通过 getTodos selector 来获取 todos，并返回一个数组，包含所有已完成的 todo。在开启了 reselect-devtools 之后，我们调用了两次 getCompletedTodos，并使用 getCompletedTodos.recomputations() 来获取 getCompletedTodos 被调用的次数。最后，我们使用 toggleTodoSelector 方法来修改 todos，再次调用 getCompletedTodos 方法，并使用 getCompletedTodos.recomputations() 来获取 getCompletedTodos 被调用的次数。
5. 总结
通过使用 reselect-devtools，我们可以更好地调试 reselect 库，并更好地了解 selector 的计算结果。在实际开发中，可以使用 reselect-devtools 来帮助我们优化应用的状态管理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d3781e8991b448daf80