reactjs+redux/react-redux+redux-thunk+mongoose的架构系列之react-devtool-extension配置(四)

接着上一篇的文章，我们用redux-thunk顺利实现了数据的异步操作，这节我们来配置下类似于vue-devtool的工具，在react中就是react-devtool-extension，面板的效果像下面那样：

要实现上面的开发面板的前提是，我假如你已经安装好了chrome的扩展程序，具体的安装步骤请参考其他的文章!
最简单的方法，在应用商店里面搜索，找到了自行添加即可。

安装好了，就是这样。。。

然后再改造我们的index.js入口文件

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { counter } from "./index.redux";
import { createStore, applyMiddleware, compose } from "redux";
//处理异步的中间件
import thunk from "redux-thunk";
//创建store

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(
  counter,
  /* preloadedState, */ composeEnhancers(applyMiddleware(thunk))
);

function render() {
  ReactDOM.render(<App store={store} />, document.getElementById("root"));
}

render();

//监听到render的更新
store.subscribe(render);

// store.subscribe(listener);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

然后再进行测试

这样我们的devtool就安装成功了，也就很方便的实时看到我们的操作了！