前言
随着 React 应用的日益普及，Redux 作为一个可预测的状态容器，也越来越受到关注。而 redux-devtools 作为一个强大的调试工具，也能帮助我们更好地理解和调试 Redux 应用。
然而，对于初学者来说，redux-devtools 的使用可能是一个挑战。本文将逐步介绍如何使用 redux-devtools，希望能够帮助大家更好地学习和使用 Redux。
安装和配置
首先，我们需要安装 redux-devtools-extension：
npm install --save-dev redux-devtools-extension
然后，在创建 Redux store 时，我们需要使用 composeWithDevTools 函数包裹我们的 store：
import { createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import rootReducer from './reducers';
const store = createStore(
rootReducer,
composeWithDevTools() // 加上这一行就可以了
);这样，我们就完成了 redux-devtools 的基本配置。
基本使用
在浏览器中打开应用，我们可以看到右下角出现了一个 redux-devtools 的按钮。
点击这个按钮，就可以打开 redux-devtools 的界面。在界面的左侧，我们可以看到当前状态树的状态。
而在右侧，我们可以看到当前应用中所有的 action。
我们可以在这里查看每个 action 的类型和 payload，以及这个 action 发生时的状态树。
同时，我们也可以在界面右上角的时间旅行按钮中选择之前的状态，重新回到之前的状态。这个功能可以帮助我们更好地调试应用。
除了上述基本使用方法外，redux-devtools 还有很多其他的功能，下面我们将逐一介绍。
监视特定的 reducer
在应用中，我们可能会有很多个 reducer，但是只对其中一个 reducer 进行调试时，我们没有必要监视每个 reducer 的状态。这时，我们可以通过在 composeWithDevTools 中传递参数来选择需要监视的 reducer：
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ - ------------------- - ---- ---------------------------
------ ----------- ---- -------------
----- ----- - ------------
------------
---------------------
------ -----
----------- ---
---------------- ------
-- ------- -------
------------- -
------- -
------ -------
--
----- -------
--
--
--这里我们通过 traceOptions 参数来指定监视哪些 reducer。具体来说，traceOptions 是一个对象，有如下属性：
name: string | string[]，需要监视的 reducer 的名称。可以是一个名称，也可以是一个名称数组。colors: { theme: string, action: string, nextState: string, error: string }，设置状态树、action、下一个状态和错误信息的颜色。其中theme属性可以是'nicinabox'、'bright'、'solarized'、'tomorrow'、'monokai'、'google'或'neat'这几个主题中的一个。其他属性是自定义颜色。diff: boolean，通过比较状态树和下一个状态树，来显示状态的变化。diffPredicate: (getState: () => any, action: { type: string }) => boolean，比较状态树和下一个状态树的函数。默认是使用shallowEqual函数。如果返回true，则显示状态的变化。actionsBlacklist: string | RegExp[]，忽略某些 action。actionsCreators: Function[]，指定 action creator。predicate: (state: any, action: any) => boolean，过滤 state 和 action。如果返回false，则不显示。
这里我们只使用了 name 和 colors 两个属性，表示只监视 user reducer，并使用 neat 主题的颜色。具体的参数解释可以参考 redux-devtools 的文档。
发送自定义 action
在 redux-devtools 中，我们可以通过输入框来发送自定义 action。
输入框中的数据格式应是一个合法的 JavaScript 对象，例如：
{
type: 'ADD_TODO',
payload: {
id: 1,
text: 'Learn Redux'
}
}在这里，type 表示 action 的类型，而 payload 表示 action 的附加数据。
当然，我们也可以通过快捷键 Ctrl + H 或 Ctrl + Shift + H 来弹出快捷命令。这样，我们就可以在命令中直接发送自定义 action。
监视异步 action
当应用中有异步操作时，我们可能需要监视异步 action。在 redux-devtools 中，我们可以使用 redux-devtools-extension/logOnlyInProduction 中间件来做到这一点。
首先，我们需要安装这个中间件：
npm install --save-dev redux-devtools-extension
然后，在创建 Redux store 时，我们需要使用 applyMiddleware 函数来加入这个中间件：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - ------------------- - ---- ---------------------------
------ ----- ---- --------------
------ ------ ---- ---------------
------ ----------- ---- -------------
------ - ------------------- - ---- ---------------------------
----- ----------- - --------
-- --------------------- --- -------------- -
-------------------------
-
----- ----- - ------------
------------
--------------------
--------------------------------
--------------------- -- ---------
-
--这样，我们就可以在开发环境中监视异步 action。
总结
redux-devtools 是一个强大的调试工具，可以帮助我们更好地了解 Redux 应用的状态变化。在本文中，我们简要介绍了 redux-devtools 的基本用法，以及一些进阶功能，如监视特定的 reducer、监视异步 action 等。
在实际开发中，我们可以更深入地学习 redux-devtools，并结合其他调试工具和方法，来更好地调试应用，并提高开发效率。
示例代码
以下是一个简单的 Redux 应用，使用了 redux-devtools：
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ - ------------------- - ---- ---------------------------
----- -------- - -----------
----- ----------- - --------------
--- ---------- - --
-------- ----------- - --- ------- -
------ ------------- -
---- ---------
------ -
---------
-
--- -------------
----- --------------------
---------- -----
-
--
---- ------------
------ -------------- --
------- --- ----------------- - - -------- ---------- --------------- - - ----
--
--------
------ ------
-
-
----- ----- - ------------
------
---------------------
--
------------------ -- -------------------------------
----------------
----- ---------
-------- -
----- ------ ------
-
---
----------------
----- ---------
-------- -
----- ------ ------
-
---
----------------
----- ------------
-------- -
--- -
-
---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a4c548add4f0e0ffd1a24b