redux-devtools 工具使用须知-JavaScript中文网-JavaScript教程资源分享门户

前言

随着 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：

import { createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import rootReducer from './reducers';

const store = createStore(
  rootReducer,
  composeWithDevTools({
    trace: true,
    traceLimit: 25,
    shouldHotReload: false,
    // 监视某个或某些 reducer
    traceOptions: {
      colors: {
        theme: 'neat',
      },
      name: 'user',
    },
  })
);

这里我们通过 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 函数来加入这个中间件：

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import logger from 'redux-logger';
import rootReducer from './reducers';
import { logOnlyInProduction } from 'redux-devtools-extension';

const middlewares = [thunk];

if (process.env.NODE_ENV === 'development') {
  middlewares.push(logger);
}

const store = createStore(
  rootReducer,
  composeWithDevTools(
    applyMiddleware(...middlewares),
    logOnlyInProduction() // 在开发环境下不开启
  )
);

这样，我们就可以在开发环境中监视异步 action。

总结

redux-devtools 是一个强大的调试工具，可以帮助我们更好地了解 Redux 应用的状态变化。在本文中，我们简要介绍了 redux-devtools 的基本用法，以及一些进阶功能，如监视特定的 reducer、监视异步 action 等。

在实际开发中，我们可以更深入地学习 redux-devtools，并结合其他调试工具和方法，来更好地调试应用，并提高开发效率。

示例代码

以下是一个简单的 Redux 应用，使用了 redux-devtools：

import { createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';

const ADD_TODO = 'ADD_TODO';
const TOGGLE_TODO = 'TOGGLE_TODO';

let nextTodoId = 0;

function todos(state = [], action) {
  switch (action.type) {
    case ADD_TODO:
      return [
        ...state,
        {
          id: nextTodoId++,
          text: action.payload.text,
          completed: false
        }
      ];
    case TOGGLE_TODO:
      return state.map(todo =>
        todo.id === action.payload.id ? { ...todo, completed: !todo.completed } : todo
      );
    default:
      return state;
  }
}

const store = createStore(
  todos,
  composeWithDevTools()
);

store.subscribe(() => console.log(store.getState()));

store.dispatch({
  type: ADD_TODO,
  payload: {
    text: 'Learn Redux'
  }
});

store.dispatch({
  type: ADD_TODO,
  payload: {
    text: 'Learn React'
  }
});

store.dispatch({
  type: TOGGLE_TODO,
  payload: {
    id: 0
  }
});

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a4c548add4f0e0ffd1a24b

redux-devtools 工具使用须知

前言