使用redux-devtools工具

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

　　

　　在react的开发过程当中也是如此，redux相似于vue中的vuex，也是状态管理工具，一样，为了实时观察（而不是讨厌的console.log()），咱们通常都会选择使用redux-devtools工具来进行使用了redux项目的开发。 

　　

　　咱们先来看看最终安装的效果吧：

    

 

　　如上所示： 经过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 default  createStore(storeReducer);

 

 

第二步： 在谷歌应用商店下载redux-devtools

　　去谷歌应用商店搜索redux-devtools直接安装便可。 成功后，在浏览器的右上角会有相关的显示。 

 

 

 

第三步： 项目中安装  redux-devtools-extension  插件

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

npm install  redux-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 default  createStore(
    storeReducer,
    composeWithDevTools(
    )
);

 

 

 

ok! 到这里，咱们就能够运行react-redux项目，这时就能够使用调试工具调试了。