Redux超酷的开发工具Redux-Devtools
2024-10-18 13:16:21
超酷的开发工具 Redux-devtools
redux-devtools是一个有趣而又高效的redux开发工具,如果你想直接在github上查看相关的内容,请前往这里。事实上,也鼓励大家养成在github上学习第一手资料的习惯。
ok,首先,让我们来下载redux-devtools的相关资料
$ npm install --save-dev redux-devtools redux-devtools-log-monitor redux-devtools-dock-monitor
- redux-devtools:redux的开发工具包,而且DevTools支持自定义的 monitor 组件,所以我们可以完全自定义一个我们想要的 monitor 组件的UI展示风格,以下两个是我们示例中用到的。
- redux-devtools-log-monitor: 这是Redux Devtools 默认的 monitor ,它可以展示state 和 action 的一系列信息,而且我们还可以在monitor改变它们的值。
- redux-devtools-dock-monitor:这monitor支持键盘的快捷键来轻松的改变tree view在浏览器中的展示位置,比如不断的按‘ctrl + q’组合键可以让展示工具停靠在浏览器的上下左右不同的位置,按“ctrl+h”组合键则可以控制展示工具在浏览器的显示或隐藏的状态。
接下来我们在containers目录新增一个DevTools.js文件,并且设置monitor。 代码清单:demo-redux-devtools/containers/DevTools.js
import React from 'react';
import { createDevTools } from 'redux-devtools';
import LogMonitor from 'redux-devtools-log-monitor';
import DockMonitor from 'redux-devtools-dock-monitor'; export default createDevTools(
<DockMonitor toggleVisibilityKey='ctrl-h'
changePositionKey='ctrl-q'>
<LogMonitor />
</DockMonitor>
);
然后在index.js文件引入这个容器组件 代码清单:demo-redux-devtools/index.js
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import App from './containers/App'
import DevTools from './containers/DevTools'
import { createStore, compose } from 'redux';
import todoApp from './reducers' // 把多个 store 增强器从右到左来组合起来,依次执行
// 这个地方完全可以不用compose,演示一下compose的使用
const enhancer = compose(
DevTools.instrument()
); let store = createStore(todoApp, enhancer)
let rootElement = document.getElementById('app') render(
<Provider store={store}>
<div>
<App />
<DevTools />
</div>
</Provider>,
rootElement
)
注意:在实际项目开发中时应该根据环境来确定<DevTools />组件的展示与否,示例中是在开发环境的演示,直接放在Provider里面。
最新文章
- Here&#39;s to the crazy ones.
- Node.js的process.nextTick(callback)理解
- Oracle中改变表的Owner和tablespace
- Opencv step by step - 视频变换
- IE,Chrome滚动条样式CSS
- algorithm@ KMP
- 微信JS-SDK签名signature错误代码4029
- python运维开发(八)----面向对象(下)
- create a (VSTO) Office 2007 add-in using VS 2012?
- java结构与算法之选择排序
- PHP引用操作以及外部操作函数的局部静态变量的方法
- java实现微信红包分配算法
- 51nod_1264:线段相交(计算几何)
- mysql 创建用户、设置权限
- MyEclipse忽略js报错
- ORACLE删除分区
- ubuntu16系统中pycharm下使用git将代码提交到github仓库
- 【python37--面向对象】
- 矩阵快速幂(以HDU1757为例)
- Python的生成器进阶玩法