Redux-DevTools(浏览器调试工具)

一、Redux-DevTools(浏览器调试工具)功能介绍

1.插件体积小巧，存在感低不使用时不会打扰用户，可以很好的保证用户的使用体验;

2.可以帮助用户更好的去监管一些应用程序的允许态度，并对其状态进行修改;

3.可以对开源项目进行调试，扩展为Redux开发工作流程提供了启动功能。

二、Redux-DevTools(浏览器调试工具)特色说明

1.开启后响应快速，程序的运行速度也很快;

2.可以对项目进行一些基本的配置;

3.可以利用redux-logger打印日志。

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

);