Redux超酷的开发工具Redux-Devtools

时间:2022-12-10 12:40:14

超酷的开发工具 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&plus;redux教程(四)undo、devtools、router

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

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

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

  3. 干货100&plus; 最超全的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. 微信小程序开发工具使用与设计规范&lpar;二&rpar;

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

随机推荐

  1. 《锋利的jQuery》心得笔记--Three Sections

    第六章 1.    JavaScript的Ajax的实现步骤: 1)         定义一个函数用来异步获取信息 function Ajax(){ } 2)         声明: var xmlH ...

  2. iOS开发代码规范

    1.关于命名 1.1统一要求 含义清楚, 尽量做到不需要注释也能了解其作用,若做不到,就加注释 使用全称不使用缩写 1.2类的命名 大驼峰式命名:每一个单词的首字母都采用大写字母例子: MFHomeP ...

  3. android 08 AndroidManifest&period;xml

    AndroidManifest.xml <?xml version="1.0" encoding="utf-8"?> <manifest xm ...

  4. Java 使用Axis实现WebService实例

    在上一篇WebService实例中,基于jdk1.6以上的javax.jws 发布webservice接口.这篇博文则主要用eclipse/myeclipse 使用axis插件进行发布和调用WebSe ...

  5. Just for mysql

    mysql的下载与安装 由于学校开设了数据库专业,并且最近准备在做一个web端的设计,虽然本人是负责前端(当然,前端技术也很LOW),但因种种原因,准备开始学习数据库相关的知识,以mysql为例. 昨 ...

  6. &lbrack;Bat&rsqb;如何彻底关闭每个盘符默认的共享&dollar;&lpar;即使重启也有效&rpar;

    Windows启动时都会默认打开admin$ ipc$ 和每个盘符的共享,对于不必要的默认共享,一般都会把它取消掉,可当又需要打开此默认共享时,又该从哪里设置呢,一般来说有两个地方,MSDOS命令和计 ...

  7. Android悬浮窗及其拖动事件

    主页面布局很简单,只有一个RelativelyLayout <?xml version="1.0" encoding="utf-8"?> <R ...

  8. Linux之Ubuntu系统安装搜狗输入法

    如何在Ubuntu系统中安装搜狗输入法? 1.第一步  下载搜狗输入法文件for Linux 2.检查更新 update 如果没有更新的话,需要做这一步 3.语言支持 选择fcitx,然后关闭界面 4 ...

  9. drawer navigation&comma; tabhostFragment 默认导向

    问题: 项目结构,在一个抽屉导航中的第一个抽屉中加入了一个tabHostFragment,每次进入项目都是在抽屉导航的默认界面,须要把抽屉划出来再选择某个抽屉. 可是想让APP直接跳转到第一个抽屉界面 ...

  10. 利用Django中间件middleware解决用户未登录问题(转)

    add by zhj: Django的中间件一般用于处理通用性的问题,分为五种,按处理顺序为request_middleware,view_middleware,exception_middlewar ...