使用redux-devtools工具
在vue中型项目开发的过程中,一般都是要用到vuex这个状态管理工具的,这样可以方便我们管理全局的状态,同时,为了在开发的过程中,更加方便地实时查看到state状态,我们会使用 vue-devtool 工具,这样就可以在浏览器中实时看到 state 的变化以及触发的 mutations 等等。
在react的开发过程中也是如此,redux类似于vue中的vuex,也是状态管理工具,同样,为了实时观察(而不是讨厌的console.log()),我们一般都会选择使用redux-devtools工具来进行使用了redux项目的开发。
我们先来看看最终安装的效果吧:
文章图片
1044137-20170728113347665-276630558.png 【使用redux-devtools工具】如上所示: 通过redux-devtools, 我们可以清晰的看到当前 store 仓库中的 state 是怎么样的,在可视化工具的左边,我们还可以看到触发的action的变化。 这样,使得我们开发过程中很方便地进行调试。
下面介绍使用方法:
第一步:项目的基本配置
首先,我们要安装到项目的一些基本使用,如: react、redux、react-redux等。基本框架如下:
import Redux from 'redux'// 引入createStore创建store,引入applyMiddleware 来使用中间件
import {createStore, applyMiddleware} from 'redux'// 引入所有的reducer
import storeReducer from '../Reducer/index.jsx'export defaultcreateStore(storeReducer);
第二步: 在谷歌应用商店下载redux-devtools 去谷歌应用商店搜索redux-devtools直接安装即可。 成功后,在浏览器的右上角会有相关的显示。
第三步: 项目中安装 redux-devtools-extension 插件 即在项目中直接执行下面的安装命令:
npm installredux-devtools-extension --save-dev
第四步: redux-devtools在项目中的配置 实际上就是在创建store的时候把redux-devtools安装即可。
最终效果如下:
import Redux from 'redux'// 引入createStore创建store,引入applyMiddleware 来使用中间件
import {createStore, applyMiddleware} from 'redux'// 引入所有的reducer
import storeReducer from '../Reducer/index.jsx'// 利用redux-logger打印日志
import {createLogger} from 'redux-logger'// 安装redux-devtools-extension的可视化工具。
import { composeWithDevTools } from 'redux-devtools-extension'// 使用日志打印方法, collapsed让action折叠,看着舒服。
const loggerMiddleware = createLogger({collapsed: true});
export defaultcreateStore(
storeReducer,
composeWithDevTools(
)
);
推荐阅读
- 由浅入深理解AOP
- 【译】20个更有效地使用谷歌搜索的技巧
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus|MybatisPlus LambdaQueryWrapper使用int默认值的坑及解决
- MybatisPlus使用queryWrapper如何实现复杂查询
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 孩子不是实现父母欲望的工具——林哈夫
- iOS中的Block
- Linux下面如何查看tomcat已经使用多少线程
- 使用composer自动加载类文件