安装 redux-devtools-extension 查看 Redux 中状态变化

image.png

官方说明

浏览器插件下载安装

*   或者使用 1 `npm i && npm run build:extension`
            2./build/extension` 在添加到默认程序

image.png

项目前提条件

请先安装 redux：npm install redux -S

>1.插件安装

$ npm install redux-devtools-extension -D

在谷歌浏览器中安装 Redux DevTools

如果可以访问谷歌扩展程序，直接在 Chrome 网上应用商店下载即可
如果不能访问，可以百度搜索资源进行下载
下载完成之后

image.png

在页面上右键可以看到 Redux DevTools 选项
打开控制台，在菜单栏可以找到 Redux 菜单栏
此时项目中尚未应用工具，面板应该这样显示：

image.png

2.在代码中添加用法

//注意：import 写在前面 不然会报错
import { createStore } from 'redux';
import reducer from './reducer';
 // 引入工具插件
const { composeWithDevTools } = require('redux-devtools-extension');
let store = createStore(reducer,composeWithDevTools());
export default store;

成功

image.png

参考文章：
https://blog.csdn.net/zgd826237710/article/details/86170945
2
https://juejin.im/post/5c35cf00e51d45522665134b