[JavaScript知识库]【调试工具】：redux devtools的安装和细节

vuex的状态管理可以通过vue devtools就可以轻松看到。
但redux却是独立于react的，同样作为状态管理的redux如何能够看到状态的变化呢？

需要安装谷歌调试工具redux devtools
一般去谷歌应用商店，当然了如果那啥的话，也可以去这里下，大部分的谷歌浏览器插件都有。

下载后直接拖拽到谷歌浏览器的扩展程序中就能正确安装。

安装成功后,会有这么一个插件

当然这样还没完
你会发生redux中状态的变化并没有被记录下来。

其实还有一步就是下载一个第三方库redux-devtools-extension
这个是在react项目中用的。可以用npm i -D redux-devtools-extension也可以yarn add -D redux-devtools-extension.因为这个库只是调试用的。安装到开发依赖就好。

库的使用也极其简单。
对createStore的中间件参数做一下调整即可。

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';

const store = createStore(
  reducer,
  composeWithDevTools( 
    applyMiddleware(...middleware)
    // other store enhancers if any
  )
);

这样就会发现仓库dispatch的action以及state都被记录下来了。跟vue-devtools中vuex的调试类似。

加油！