调试redux代码的工具，官方推荐的是redux-devtools-extension，安装好了之后，我们还需要在代码中配置一下才可以在浏览器中调试代码。
**一，我们安装redux调试工具，是在Chrome中去安装的，自行安装**
打开谷歌网上应用店：搜索redux，安装第一个即可
[20191014154725935.png](https://static.golangjob.cn/221226/6a7a1fadac239f82349d4f9d30369a80.png)
**二，在代码中创建store的时候去判断window.devToolsExtension函数是否存在**
更多配置可参考：[官网链接](https://github.com/zalmoxisus/redux-devtools-extension#usage)
To specify extension’s options, use it like so:
```js
const composeEnhancers =
typeof window === 'object' &&
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
// Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
}) : compose;
const enhancer = composeEnhancers(
applyMiddleware(...middleware),
// other store enhancers if any
);
const store = createStore(reducer, enhancer);
```
引入compose，并使用compose结合thunk和window.devToolsExtension结合起来：```store/index.js```
```js
import reducers from './reducers';
import thunk from 'redux-thunk';
const composeEnhancers =
typeof window === 'object' &&
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;
const enhancer = composeEnhancers(
applyMiddleware(thunk),
);
const store = createStore(reducers, enhancer);
export default store;
````
**配置好后，我们在Chrome的调试窗的redux选项卡中可以实时看到state**
[20191014155432975.png](https://static.golangjob.cn/221226/685270dba6495b28001de7ea21745dcd.png)
更多配置和具体使用可参考官网。
##### PS：未来的你，一定会感谢今天拼命努力的自己！
有疑问加站长微信联系（非本文作者）
