前言
在前端开发中，Redux 非常流行，通常情况下使用 Redux 就会用到 Redux DevTools 来进行调试和查看状态。在 Redux DevTools 中，最基础的是使用 Redux DevTools Extension 来查看状态。但是在某些情况下，Redux DevTools Extension 是无法满足需求的。
在这种情况下，我们可以使用 @minedeljkovic/redux-devtools-inspector 这个 npm 包来进行调试和查看状态。
安装
使用 npm 安装 @minedeljkovic/redux-devtools-inspector 包：
--- ------- ------ ---------------------------------------
使用
基础使用
在 Redux DevTools 中，可以使用以 createStore 方法为参数的 reduxDevTools() 来启动 DevTools。在 reduxDevTools() 方法之后，可以将 @minedeljkovic/redux-devtools-inspector 的 inspector() 方法作为参数传入，并将返回值传递给 createStore 方法即可。
以下是基础使用方法的示例代码：
------ - ----------- - ---- --------
------ - ------------- - ---- ------------------------------------
------ ----------- ---- -------------
----- --------- - ---------------------------------------------------------------
----- ----- - ------------
------------
---
---------------
------ -----
-------------
--进阶使用
在 store 中，可以使用 inspector() 方法来获取 inspector 对象，并使用实例中的方法来设置调试时所需要的配置项。以下是一些常用的配置项：
title
使用 setTitle 方法可以设置标题。标题将出现在最上方的导航栏中，用于标识当前状态的标题。
----- --------- - ------------------ ---------------------- --------
pause
使用 setPause 方法可以开启/关闭暂停。如果暂停被开启，当状态变化时，某些操作将被忽略并不会产生结果。
----- --------- - ------------------ -------------------------
filters
使用 addFilter 方法可以添加一个过滤器。这样，在调试时，可以根据过滤器来筛选显示的数据。
----- --------- - ------------------ --------------------- ----- --- -------- ---------- ----- --------- ----- -------- -- -- --- ---
tabs
使用 addTab 方法可以添加一个 tab。这样，在调试时，可以根据 tab 来查看并筛选显示的数据。
----- --------- - ------------------ ------------------ --- --------- ------ --- ----- ------ --- ---------- ----- -------- ----- ---------- -- -- --- -------- -- -- --- ---
recoil
使用 setRecoilOptions 方法可以设置需要使用的 recoil 分支。Recoil 是一个状态管理库，提供了一个链接各种状态的统一状态源。可以在调试时使用这种方式进行调试和查看状态。
----- --------- - ------------------ ---------------------------- ----- ------- ---------------- -- -- --------- ---
custom
使用 setPlugins 方法可以设置自定义插件。这样，在调试时，可以添加自定义的组件来查看状态。
----- --------- - ------------------ ---------------------- --------------- --------------- ---
结论
使用 @minedeljkovic/redux-devtools-inspector 包可以更好的进行 Redux DevTools 调试和查看状态。在前端开发中，这个 npm 包是非常实用的，可以帮助我们更快地定位和解决问题。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066bcb967216659e24475d