Redux调试工具

Redux DevTools 是一款用于调试 Redux 应用的浏览器插件，它可以实时地显示当前应用的 state 信息、action 触发的记录以及 state 的变化，在开发过程中非常有用。目前，这个插件支持 Chrome 和 FireFox 浏览器。以 Chrome 浏览器为例，可以在 Chrome 的应用商店中下载安装 Redux DevTools 插件。然后在 configureStore.js 中，使用 Redux DevTools 创建 “加强版” 的 store：

import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import rootReducer from "./modules";

let finalCreateStore;
// 如果程序运行在非生产模式下，且浏览器安装了调试插件，则创建包含调试插件的store
if (process.env.NODE_ENV !== "production" && window.__REDUX_DEVTOOLS_EXTENSION__ ) {
  finalCreateStore = compose(
    applyMiddleware(thunk),
    window.__REDUX_DEVTOOLS_EXTENSION__()
  )(createStore);
} else {
  finalCreateStore = applyMiddleware(thunk)(createStore);
}

export default function configureStore(initialState) {
  const store = finalCreateStore(rootReducer, initialState);

  return store;
}

注意，我们只在开发环境下启用 Redux DevTools。运行程序，打开 Chrome 浏览器的开发者工具窗口，选择 Redux 标签页，即可看到 Redux DevTools 的效果，如图9-3所示。

image 2024 04 24 18 25 55 296
Figure 1. 图9-3

除了安装浏览器插件的方式外，还可以直接在项目中集成 Redux 的调试工具，具体方式可参考 https://www.npmjs.com/package/redux-devtools ，这里不再展开介绍。