Redux DevTools:Redux调试工具redux-devtools-extension的使用介绍

xiaotu123 · · 903 次点击 · 开始浏览    置顶
这是一个创建于 的主题,其中的信息可能已经有所发展或是发生改变。

调试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:未来的你,一定会感谢今天拼命努力的自己!

有疑问加站长微信联系(非本文作者)

入群交流(和以上内容无关):加入Go大咖交流群,或添加微信:liuxiaoyan-s 备注:入群;或加QQ群:692541889

903 次点击  
加入收藏 微博
暂无回复
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传