Redux DevTools 是一款用于调试 Redux 应用的工具，它可以帮助开发者追踪 Redux 状态树中的变化，以及定位问题的发生位置。在开发复杂的 Redux 应用时，Redux DevTools 是一款非常实用的工具。
在本文中，我们将探讨如何在 Next.js 应用中加入 Redux DevTools，让我们更方便地进行开发和调试。
1. 安装 Redux DevTools Extension
首先，我们需要在浏览器中安装 Redux DevTools 扩展。这个扩展可以在 Chrome Web Store 中下载与安装。
安装成功后，打开浏览器的开发者工具，点击 “Redux” 标签，如果看到如下图所示的 “No store found” 提示，说明扩展已经安装成功。
2. 集成 Redux DevTools 到 Next.js 应用
接下来，我们需要在 Next.js 应用中配置 Redux DevTools。首先，安装依赖包 redux-devtools-extension：
npm install redux-devtools-extension
在 Redux 中使用 redux-devtools-extension 提供的 composeWithDevTools 函数。这个函数将会自动集成了 Redux DevTools：
-- -------------------- ---- -------
------ - ----------- - ---- -------
------ - ------------------- - ---- --------------------------
------ ----------- ---- ------------
------ ------- -------- ------------------------------ -
----- ----------- - --
----- ----- - ------------
------------
---------------
--------------------
-------------------------------
-
-
------ -----
-最后，我们需要在页面中引入 Redux DevTools 的组件。在 pages/_app.js 文件中进行如下配置：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------------- - ---- --------------------
------ - -------- - ---- -------------
------ - ------------------- - ---- --------------------------
------ -------------- ---- ----------
----- ----- ------- --------------- -
-------- -
----- - ---------- ---------- ----- - - ----------
------ -
--------- --------------
--- ----- ----- -------- ---
---------- -------------- --
-----------
-
-
-
----- --------- - ------- -- -
------ ------------------
-
----- ------- - ------------------------ - ------ ---- --
------ ------- ------------------------在 return 方法中，我们把页面组件通过 props 传递进来并渲染，这样就可以在页面中看到 Redux DevTools 了。
3. 总结
本文介绍了如何在 Next.js 应用中加入 Redux DevTools。我们首先需要在浏览器中安装 Redux DevTools 扩展，然后引入 redux-devtools-extension 包，接着将 composeWithDevTools 函数应用到 Redux 中，最后在页面中引入 Redux DevTools 组件即可。
Redux DevTools 可以极大地提高我们开发和调试 Redux 应用的效率，希望这篇文章能够帮助你更好地使用 Redux DevTools。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646dd5ae968c7c53b0c7449e