redux-devtools-filterable-log-monitor 是一个 npm 包，可以帮助前端开发者实现 Redux 应用的状态管理。它可以将 Redux 应用中的 action、state 和错误信息以日志的形式记录下来，方便开发者进行调试和分析。同时，它还提供了一些筛选和搜索功能，可以帮助开发者快速定位需要查找的信息。
在本篇文章中，我们将分享如何使用 redux-devtools-filterable-log-monitor，让你能在开发中更加高效的处理 Redux 应用状态管理和问题调试。
安装 redux-devtools-filterable-log-monitor
使用 npm 安装 redux-devtools-filterable-log-monitor：
npm install --save-dev redux-devtools-filterable-log-monitor
如果你使用的是 yarn，可以使用以下命令安装：
yarn add --dev redux-devtools-filterable-log-monitor
集成 redux-devtools-filterable-log-monitor
集成 redux-devtools-filterable-log-monitor 很简单。首先，在 Redux 应用中导入该模块：
import FilterableLogMonitor from 'redux-devtools-filterable-log-monitor';
将其添加到 devTools 中：
const DevTools = createDevTools(
<DockMonitor toggleVisibilityKey="ctrl-h" changePositionKey="ctrl-q" defaultIsVisible={false}>
<FilterableLogMonitor />
</DockMonitor>
);最后，在开发模式（development mode）下启用 Redux DevTools：
const store = createStore( reducer, initialState, DevTools.instrument() );
现在，你已经集成了 redux-devtools-filterable-log-monitor！打开控制面板（Ctrl + H），你可以看到你的 Redux 应用的所有日志记录。
redux-devtools-filterable-log-monitor 的搜索和筛选功能
redux-devtools-filterable-log-monitor 提供了一些搜索和筛选的功能，帮助你快速定位所需的信息。
搜索
在控制面板中输入搜索关键字，可以筛选出与该关键字相关的日志。你也可以使用正则表达式进行搜索。
筛选
你可以选择只查看特定类型的日志，如 Action、State、Diff、Error。此外，你还可以设置最小日志级别，以过滤掉无关的日志。
完整示例代码
下面是一个完整的示例代码，你可以将其复制到你的 Redux 应用中：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- - ---- --------
------ - -------- - ---- --------------
------ - -------------- - ---- -----------------
------ - ----------- - ---- ------------------------------
------ -------------------- ---- ----------------------------------------
----- ------- - ------ - - ------ - -- ------- -- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - --
---- ------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
--
----- ------------ - - ------ - --
----- -------- - ---------------
------------ ---------------------------- -------------------------- -------------------------
--------------------- --
--------------
--
----- ----- - ------------
--------
-------------
---------------------
--
----- --------------- - -- -- -
----- --------------- - -- -- ---------------- ----- ----------- ---
------ ------- -------------------------------------
--
----- --------------- - -- -- -
----- --------------- - -- -- ---------------- ----- ----------- ---
------ ------- -------------------------------------
--
----- ------- - -- -- -
----- - ----- - - -----------------
------ -------------------
--
----- --- - -- -- -
------ -
--------- --------------
-----
-------- --
---------------- --
---------------- --
--------- --
------
-----------
--
--
------ ------- ----在控制面板中，你可以看到以下日志：
-- -------------------- ---- ------- ------ --------- ----- ----------- ------ --------- ----- ----------- ------ --------- ----- ----------- ------ --------- ----- -----------
你可以尝试使用搜索和筛选功能查找某些特定的日志。
总结
redux-devtools-filterable-log-monitor 是一个非常棒的 npm 包，它为前端开发者提供了一个强大的工具来处理 Redux 应用的状态管理和问题调试。它提供了搜索和筛选的功能，让开发者可以更快速、准确地找到想要的信息。在 React 和 Redux 的项目中使用 redux-devtools-filterable-log-monitor，会帮助你更加高效地管理和维护你的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8b64