Redux DevTools下载|Redux DevTools(Chrome调试插件) V2.15.2 Chrome版下载

Redux DevTools是Chrome浏览器中的一款调试插件,它可以用于调试应用程序的状态更改,我们可以清晰的看到当前store仓库中的state是怎么样的,在可视化工具的左边,我们还可以看到触发的action的变化!

Redux DevTools

【使用说明】

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(    )

);

下载仅供下载体验和测试学习,不得商用和正当使用。

下载体验

请输入密码查看下载!

如何免费获取密码?

点击下载

评论