P06:Chrome插件 Redux-DevTools 用来调试Redux数据

左手的ㄟ右手 2023-10-06 20:53 75阅读 0赞

#### Redux基础 ####

*  阐述
 *  如何配置Redux Dev Tools
 *  Chrome插件 Redux-DevTools – Redux调试工具

## 阐述 ##

在前面的文章中已经制作了Redux中state仓库，也可以从仓库中取出数据了。

接下来我们需要在控制台调试这些仓库里的数据，需要使用 `Redux DevTools`。

这是一个Chrome插件，专门用来调试Redux数据的，安装这个需要你科学的上网，才可以安装下来。

`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的值。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]

## Chrome插件 Redux-DevTools – Redux调试工具 ##

Redux-DevTools是一款谷歌浏览器调试插件，用于调试应用程序的状态更改，提供redux-devtools离线安装crx文件，通过redux-devtools， 我们可以清晰的看到当前store仓库中的state是怎么样的，在可视化工具的左边，我们还可以看到触发的action的变化！

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 1]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/12e1a5c7731c4c21bb2b915e50be01a1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/98c1294b2a4243c4959b62954368620d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16