1. 废话
当你看到这篇文章应该已经学完redux或者react-redux了,本篇文章使用的是浏览器是edge(谷歌内核)。。。。
2. 安装
- 使用edge打开网址link.
- 搜索 redux devtools
- 安装
- 安装成功图例
注释: 安装完毕打开F12看到选项卡里面有Redux即安装成功。。
3. 使用
注释:打开你使用到redux的项目,这边我使用到的是用自己编写的demo。
- 下载工具依赖的包
npm install --save-dev redux-devtools-extension
- 配置store文件
reducers:你编写的reducers文件
// 引入redux-devtools需要用到的依赖包
import { composeWithDevTools } from 'redux-devtools-extension'
export default createStore(combineReducers({reducers}),composeWithDevTools())
- 完成
配置完成后打开项目,打开开发者管理工具(F12),点击redux即可实现使用Redux DevTools
总结
- 在项目中使用Redux DevTools工具时主要用到的只有(state>tree)、Dispathcher功能
- tree主要用查看Redux的数据
- Dispathcher主要用临时把一个功能dispathcher一下,看看执行的结果
图例并未标全,自己摸索一下吧!!!!