Redux DevTools :Redux调试工具安装使用步骤

3,467 阅读1分钟

1.Redux-Devtools调试工具下载

chrome.zzzmh.cn/info/lmhkpm…

2.安装过程

  1. 地址栏输入:chrome://extensions/
  2. 将上一步下载好的crx文件拖入

如果出现无法拖入的情况

解决:

  1. 地址栏输入:chrome://flags/#extensions-on-chrome-urls
  2. 将Extensions那一项改为Enabled,重启chrome

3.使用

  1. 在项目中安装依赖:npm i redux-devtools-extension -D
  2. 在创建store的地方引入
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import thunk from "redux-thunk";
import { reducer } from "./store/reducer";
import { createStore, applyMiddleware } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import MyApp from "component";
const store = createStore(reducer, composeWithDevTools(applyMiddleware(thunk)));
ReactDOM.render(
  <Provider store={store}>
    <MyApp />
  </Provider>,
  document.getElementById("root")
);

示例代码 github.com/zoulizhi/re…

启动项目后打开插件就能使用了

image.png

image.png