在前端开发中，Redux 是一个非常重要的库。它被广泛应用于很多项目中，用于管理应用的状态。同时，Redux DevTools 是一个非常强大的工具，可以用来调试和监管 Redux 的过程。
本文将介绍如何使用 npm 包 Redux DevTools Extension，以及如何在应用程序中集成 Redux DevTools。
安装
首先需要安装 Redux DevTools Extension，可以通过 npm 进行安装：
npm install --save-dev redux-devtools-extension
集成
集成 Redux DevTools Extension 可以在应用程序中添加一些新的功能，如：
- 提供应用状态的快照和回放功能。
- 显示应用的状态，包括当前的 state 和 action。
- 显示和修改 state 中的每个属性和变量。
使用 Redux DevTools Extension，可以更好地理解和调试 Redux 应用程序。
下面将介绍如何在两种常见的应用程序中集成 Redux DevTools Extension——使用 React 和普通的浏览器应用程序。
使用 React
在使用 React 进行应用程序开发时，可以使用redux-devtools-extension的 composeWithDevTools 函数来集成 Redux DevTools。
首先需要引入redux-devtools-extension，如下所示：
import { createStore } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
const store = createStore(reducer, composeWithDevTools());在上面的代码中，createStore 函数创建了一个新的 Redux store。然后调用 composeWithDevTools 函数将 store 与 Redux DevTools 进行了集成。
普通的浏览器应用程序
在普通的浏览器应用程序中，需要使用remote-redux-devtools连接 Redux DevTools。
首先需要导入 remote-redux-devtools：
import { createStore } from "redux";
import { compose } from "redux";
import { devToolsEnhancer } from "remote-redux-devtools";
const store = createStore(reducer, compose(devToolsEnhancer()));在上面的代码中，createStore 函数创建了一个新的 Redux store。然后，使用compose函数将 store 与 devToolsEnhancer() 函数进行了集成。devToolsEnhancer() 函数内部使用 remote-redux-devtools 库来实现连接。
使用
Redux DevTools Extension 在浏览器中运行，可以像使用任何其他浏览器插件一样使用它。
在 Chrome 浏览器中，只需要打开开发者工具，切换到 Redux 选项卡，就能看到 Redux DevTools Extension。
可以通过点击“Start”按钮来开始监控应用程序的状态。
示例代码
下面是一个示例 Store，使用了 Redux DevTools Extension：
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ - ------------------- - ---- ---------------------------
----- ------------ - -
------ -
--
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------
------ -
---------
------ ----------- - -
--
---- ------------
------ -
---------
------ ----------- - -
--
--------
------ ------
-
--
----- ----- - -------------------- -----------------------
------------------ -- -------------------------------
---------------- ----- ----------- ---
---------------- ----- ----------- ---
---------------- ----- ----------- ---这个 Store 中包含了一个简单的计数器，使用了两个 INCREMENT 和一个 DECREMENT 操作。在每个 dispatch 触发的时候，就会显示当前的 state。
结论
Redux DevTools Extension 是一个非常有用的工具，可以帮助开发人员更好地了解和调试 Redux 应用程序。本文介绍了如何集成和使用 Redux DevTools Extension，希望读者可以在他们的项目中充分利用这个强大的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/62212