超酷的开发工具 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里面。
Redux超酷的开发工具Redux-Devtools的更多相关文章
-
react+redux教程(四)undo、devtools、router
上节课,我们介绍了一些es6的新语法:react+redux教程(三)reduce().filter().map().some().every()....展开属性 今天我们通过解读redux-undo ...
-
超全的web开发工具和资源
首页 新闻 产品 地图 动态 城市 帮助 论坛 关于 登录 注册 · 不忘初心,继续前进,环境云V2接口正式上线 · 环境云测点地图全新改版 · 祝福各位环境云用户中秋快乐! 平台信息 培训互动 ...
-
干货100+ 最超全的web开发工具和资源大集合
干货100+ 最超全的web开发工具和资源大集合 作为Web开发者,这是好的时代,也是坏的时代.Web开发技术也在不断变化.虽然很令人兴奋,但是这也意味着Web开发人员需要要积极主动的学习新技术和 ...
-
25个超有用的 AngularJS Web 开发工具
AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,改善了JavaScript. 下面我要说的就是25个超有用的AngularJS工具, ...
-
Chrome 开发工具指南
Chrome 开发工具指南 谷歌 Chrome 开发工具,是基于谷歌浏览器内含的一套网页制作和调试工具.开发者工具允许网页开发者深入浏览器和网页应用程序的内部.该工具可以有效地追踪布局问题,设置 Ja ...
-
iOS程序员的React Native开发工具集
本文整理了React Native iOS开发过程中有用的工具.服务.测试.库以及网站等. 工具 你可以选择不同的开发环境:DECO.EXPO或者你可以使用Nuclide+Atom,目前我使用EXPO ...
-
2020年值得你去试试的10个React开发工具
本文由葡萄城技术团队翻译并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. JavaScript每天都在出现大量的框架和工具,而React是除了上次我们 ...
-
VS code开发工具的使用教程
前言 工欲善其事必先利其器,提高程序员的开发效率必须要有一个好的开发工具,当前最好的前端开发工具主要有VS code.sublime Text.Atom.Webstorm.Notepad++. VS ...
-
微信小程序开发工具使用与设计规范(二)
[未经作者本人同意,请勿以任何形式转载] 上一篇文章主要分析了微信小程序应用场景和优劣势.本篇你可以学习到: 如何使用小程序开发工具写一个Hello World 微信小程序设计规范 微信小程序项目结构 ...
随机推荐
-
《锋利的jQuery》心得笔记--Three Sections
第六章 1. JavaScript的Ajax的实现步骤: 1) 定义一个函数用来异步获取信息 function Ajax(){ } 2) 声明: var xmlH ...
-
iOS开发代码规范
1.关于命名 1.1统一要求 含义清楚, 尽量做到不需要注释也能了解其作用,若做不到,就加注释 使用全称不使用缩写 1.2类的命名 大驼峰式命名:每一个单词的首字母都采用大写字母例子: MFHomeP ...
-
android 08 AndroidManifest.xml
AndroidManifest.xml <?xml version="1.0" encoding="utf-8"?> <manifest xm ...
-
Java 使用Axis实现WebService实例
在上一篇WebService实例中,基于jdk1.6以上的javax.jws 发布webservice接口.这篇博文则主要用eclipse/myeclipse 使用axis插件进行发布和调用WebSe ...
-
Just for mysql
mysql的下载与安装 由于学校开设了数据库专业,并且最近准备在做一个web端的设计,虽然本人是负责前端(当然,前端技术也很LOW),但因种种原因,准备开始学习数据库相关的知识,以mysql为例. 昨 ...
-
[Bat]如何彻底关闭每个盘符默认的共享$(即使重启也有效)
Windows启动时都会默认打开admin$ ipc$ 和每个盘符的共享,对于不必要的默认共享,一般都会把它取消掉,可当又需要打开此默认共享时,又该从哪里设置呢,一般来说有两个地方,MSDOS命令和计 ...
-
Android悬浮窗及其拖动事件
主页面布局很简单,只有一个RelativelyLayout <?xml version="1.0" encoding="utf-8"?> <R ...
-
Linux之Ubuntu系统安装搜狗输入法
如何在Ubuntu系统中安装搜狗输入法? 1.第一步 下载搜狗输入法文件for Linux 2.检查更新 update 如果没有更新的话,需要做这一步 3.语言支持 选择fcitx,然后关闭界面 4 ...
-
drawer navigation, tabhostFragment 默认导向
问题: 项目结构,在一个抽屉导航中的第一个抽屉中加入了一个tabHostFragment,每次进入项目都是在抽屉导航的默认界面,须要把抽屉划出来再选择某个抽屉. 可是想让APP直接跳转到第一个抽屉界面 ...
-
利用Django中间件middleware解决用户未登录问题(转)
add by zhj: Django的中间件一般用于处理通用性的问题,分为五种,按处理顺序为request_middleware,view_middleware,exception_middlewar ...