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