Redux DevTools|Redux调试工具

: Redux DevTools是一款可以在浏览器对redux项目状态进行调试的chrome插件。

Redux DevTools Chrome插件开发背景

在vue中型项目开发的过程中,一般都是要用到vuex这个状态管理工具的,这样可以方便我们管理全局的状态,同时,为了在开发的过程中,更加方便地实时查看到state状态,我们会使用 vue-devtool工具,这样就可以在浏览器中实时看到 state的变化以及触发的mutations 等等。

在react的开发过程中也是如此,redux类似于vue中的vuex,也是状态管理工具,而我们今天要介绍的是一款可以在浏览器中选择使用redux-devtools工具来进行使用了redux项目的开发的chrome插件。

通过redux-devtools, 我们可以清晰的看到当前 store 仓库中的 state 是怎么样的,在可视化工具的左边,我们还可以看到触发的action的变化。 这样,使得我们开发过程中很方便地进行调试。

Redux DevTools Chrome插件使用方法

1.在使用Chrome Redux调试插件之前,我们需要做一些项目的基本配置。我们要安装到项目的一些基本使用,如: react、redux、react-redux等。基本框架如下:

import Redux from ‘redux’ 

// 引入createStore创建store,引入applyMiddleware 来使用中间件

 import {createStore, applyMiddleware} from ‘redux’ 

// 引入所有的reducer

import storeReducer from ‘../Reducer/index.jsx’

export default  createStore(storeReducer);

2.点击下方的插件下载,下载redux devtools插件。

3.要想使用chrome redux调试插件,还需要在项目中安装 redux-devtools-extension 插件。其安装方法如下:

即在项目中直接执行下面的安装命令:

npm install redux-devtools-extension –save-dev

4. 安装成功后,还需要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 default createStore(

storeReducer,

composeWithDevTools( )

);

插件下载地址:

此处内容已经被作者无情的隐藏,请输入验证码查看内容:
验证码:
请关注本站公众号回复“验证码”,获取验证码。 【注】”在微信里搜索“不会笑青年”或者“laughyouth”或者微信扫描右侧二维码都可以关注微信公众号。
不会笑青年

本文由网站小白学堂创作,采用 CC BY 3.0 CN协议 进行许可。 可自由转载、引用,但需署名作者且注明文章出处。
小白学堂 » Redux DevTools|Redux调试工具

提供最优质的资源集合

立即查看 了解详情