超酷的开发工具 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的更多相关文章

  1. react+redux教程（四）undo、devtools、router

    上节课,我们介绍了一些es6的新语法:react+redux教程(三)reduce().filter().map().some().every()....展开属性 今天我们通过解读redux-undo ...

  2. 超全的web开发工具和资源

    首页 新闻 产品 地图 动态 城市 帮助 论坛 关于 登录 注册 · 不忘初心,继续前进,环境云V2接口正式上线 · 环境云测点地图全新改版 · 祝福各位环境云用户中秋快乐!   平台信息 培训互动 ...

  3. 干货100+ 最超全的web开发工具和资源大集合

    干货100+ 最超全的web开发工具和资源大集合   作为Web开发者,这是好的时代,也是坏的时代.Web开发技术也在不断变化.虽然很令人兴奋,但是这也意味着Web开发人员需要要积极主动的学习新技术和 ...

  4. 25个超有用的 AngularJS Web 开发工具

    AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,改善了JavaScript. 下面我要说的就是25个超有用的AngularJS工具, ...

  5. Chrome 开发工具指南

    Chrome 开发工具指南 谷歌 Chrome 开发工具,是基于谷歌浏览器内含的一套网页制作和调试工具.开发者工具允许网页开发者深入浏览器和网页应用程序的内部.该工具可以有效地追踪布局问题,设置 Ja ...

  6. iOS程序员的React Native开发工具集

    本文整理了React Native iOS开发过程中有用的工具.服务.测试.库以及网站等. 工具 你可以选择不同的开发环境:DECO.EXPO或者你可以使用Nuclide+Atom,目前我使用EXPO ...

  7. 2020年值得你去试试的10个React开发工具

    本文由葡萄城技术团队翻译并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. JavaScript每天都在出现大量的框架和工具,而React是除了上次我们 ...

  8. VS code开发工具的使用教程

    前言 工欲善其事必先利其器,提高程序员的开发效率必须要有一个好的开发工具,当前最好的前端开发工具主要有VS code.sublime Text.Atom.Webstorm.Notepad++. VS ...

  9. 微信小程序开发工具使用与设计规范(二)

    [未经作者本人同意,请勿以任何形式转载] 上一篇文章主要分析了微信小程序应用场景和优劣势.本篇你可以学习到: 如何使用小程序开发工具写一个Hello World 微信小程序设计规范 微信小程序项目结构 ...

随机推荐

  1. Xmodem Bootloader

    了解更多关于bootloader 的C语言实现,请加我QQ: 1273623966 (验证信息请填 bootloader),欢迎咨询或定制bootloader(在线升级程序). 多年前玩Cisco交换 ...

  2. 美帝的emal to message gateway

    Provider Email to SMS Address Format AllTel number@text.wireless.alltel.com AT&T number@txt.att. ...

  3. IO流-ZIP文档

    java中通常使用ZipInputStream来读ZIP文档 ZIP文档(通常)以压缩格式存储了一个或多个文件,每个ZIP文档都有一个包含诸如文件 名字和所使用的压缩方法等信息的头.在Java中,可以 ...

  4. Swift：如何判断一个对象是否是某个类(或其子类)的实例

    在OC中我们直接可以用如下方法即可 [obj  isKindOfClass:[obj class]]; 在Swift中,并没有 .class 属性或者方法, 便可以用如下方法 class Person ...

  5. A840S黑砖修复过程(2013-05-22修改)

    首先感谢su_ky大神,没有他的博客和帖子,这次救砖根本没有成功的可能.其次谢谢A840S交流群284998898的Sunny deng,没有他提供的分区镜像同样也完成不了这次的工作.现象:手机完全没 ...

  6. CustomTabBarViewController

    // AppDelegate.m // CustomTabBar // // Created by qianfeng on 15/7/9. // Copyright (c) 2015年 qianfen ...

  7. char 和 varchar

    固定长度或可变长度的字符数据类型. char [ ( n ) ] 固定长度,非 Unicode 字符数据,长度为 n 个字节.n 的取值范围为 1 至 8,000,存储大小是 n 个字节.char 的 ...

  8. [liu yanling]测试用例设计综合策略

    Myers提出了使用各种测试方法的综合策略: 1)    在任何情况下都必须使用边界值分析方法,经验表明用这种方法设计出测试用例发现程序错误的能力最强. 2)    必要时用等价类划分方法补充一些测试 ...

  9. bootstrap3-datepicker and jquery.form.js

    bootstrap3-datepicker 和 jquery.form.js 这两个控件又起来都比较简单,就一起介绍了. 先说datepicker. github上的地址是:https://githu ...

  10. Django:之中间件、微信接口和单元测试

    Django中间件 我们从浏览器发出一个请求 Request,得到一个响应后的内容 HttpResponse ,这个请求传递到 Django的过程如下: 也就是说,每一个请求都是先通过中间件中的 pr ...