前端开发中，Redux 是一个非常流行的状态管理库。为了更方便的调试 Redux，社区中出现了很多的 Redux DevTools 工具。其中，relogic-redux-devtools 是一个基于 Redux DevTools 的插件，为我们提供了对 Redux 应用进行调试的良好体验。
本文将详细介绍如何使用 relogic-redux-devtools，为大家带来指导意义，并给出多个示例代码。
安装
relogic-redux-devtools 可以作为 npm 包引入到项目中。在项目目录下，运行以下命令进行安装：
npm install relogic-redux-devtools --save-dev
relogic-redux-devtools 依赖于 Redux DevTools，因此，需要先安装 Redux DevTools：
npm install redux-devtools-extension --save-dev
配置
在项目中使用 relogic-redux-devtools 的方式非常简单，只需要引入并使用即可。在 configureStore 函数中配置 relogic-redux-devtools，示例如下：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - ------------------- - ---- ---------------------------
------ - ------------ - ---- ---------------
------ - ------- -- -------------- - ---- ----------
------ - ------- -- --------------------------- - ---- -------------------------
------ ----------- ---- -------------
----- ---------------- - ---------------
----- ---------- - -------------------
----- ----- - ------------
------------
---------------------
---------------- ----- -- -------------------
---
-------------------------------
-----------------
-----------------------------
-
--
------ ------- ------可以看到，在 createStore 函数中使用了 composeWithDevTools 和 applyMiddleware 两个函数来为 store 添加了 relogic-redux-devtools，同时，还在 installRelogicReduxDevTools 中使用了一些配置项来让 relogic-redux-devtools 更好的工作起来。
用法
启动应用后，在 Redux DevTools 中即可看到 relogic-redux-devtools 提供的多个特性。下面将一一介绍。
Quick Navigation
Quick Navigation 是一个快速导航工具，可以在 Redux DevTools 的侧边栏中快速定位到特定的 action 和 state。为了使用 Quick Navigation，你需要在 installRelogicReduxDevTools 中添加以下配置：
installRelogicReduxDevTools({
quickNav: {
actions: true,
states: true,
},
})History Export and Import
History Export and Import 允许您导出和导入当前用户的状态历史记录，非常适合团队协作和重现 bug。要使用此功能，您需要在 installRelogicReduxDevTools 中添加以下配置：
installRelogicReduxDevTools({
exportHistory: true,
})然后，您需要从 Redux DevTools 中导出状态历史记录。此操作会在浏览器中下载一个 json 文件。您可以将该文件发送给您的团队成员，人员在自己的浏览器中导入该文件即可访问您的历史记录。
Actions Lock / Filters
Actions Lock 和 Filters 允许你锁定 action 执行，或对 action 进行过滤，只保留特定的 action。为了使用此特性，您需要在 installRelogicReduxDevTools 中添加以下配置：
installRelogicReduxDevTools({
actionsLock: true,
actionsFilters: ['SOME_ACTION'],
})以上代码以 SOME_ACTION 为例，锁定该 action 的执行，且只保留该 action。
示例代码
以下是一个简单的 Redux 应用，示例代码中详细展示了如何使用 relogic-redux-devtools：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ - ------------------- - ---- --------------------------- ------ - ------- -- -------------- - ---- ---------- ------ - ------- -- --------------------------- - ---- ------------------------- ------ ----------- ---- ------------- ----- ----- - ------------ ------------ -------------------------------------- ----------------- ------------------------------ -- ------ ------- ------
结尾
本文详细介绍了 relogic-redux-devtools 的使用，包括安装、配置、用法和示例代码。希望这篇文章可以为您提供帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600554d281e8991b448d2066