P06:Redux基础-Redux Dev Tools的安装
在前面的文章中已经制作了 Redux 中 state 仓库,也可以从仓库中取出数据了。接下来我们需要在控制台调试这些仓库里的数据,需要使用Redux DevTools
。这是一个 Chrome 插件,专门用来调试 Redux 数据的,安装这个需要你科学的上网,才可以安装下来,不过码云笔记也为大家提供 redux-devtools 离线安装 crx 文件,所以不会科学上网的也可以用这种方法安装。
Chrome 插件 Redux-DevTools – Redux 调试工具
安装完成后,你在控制台中就可以看到Redux
标签了,有了这个标签也说明安装成功了。
如何配置Redux Dev Tools
如何配置这个Redux Dev Tools
插件,其实网站上已经说的非常清楚了,现在通过插件,打开这个网站。根据网站提示,我们把之前课程的index.js
代码改为下面的样子。
import { createStore } from 'redux' // 引入 createStore 方法 import reducer from './reducer' const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()) // 创建数据存储仓库 export default store //暴露出去
非常简单,就是加了这样一配置代码:
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
这句话的意思就是看 window 里有没有这个方法,有则执行这个方法(不要被大写的方法名吓到)。
这步完成后,就可以启动项目测试一下了,你会发现 State 数据变的一目了然,以后再进行 Redux 调试,就会变的非常简单了。
本文内容就先到这里,接下来我们继续学习如何通过创建Action
来改变Redux
里State
的值。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » P06:Redux基础-Redux Dev Tools的安装
码云笔记 » P06:Redux基础-Redux Dev Tools的安装