00:00
好了,各位咱继续啊,回到页面当中,同学问你一个问题啊,我现在有几个组件两个,一个叫做count,一个叫做person。他俩呢,借助咱们的这个redux,是不是已经完成了数据的共享啊。其实两个组件吧,还好,存什么呢?你自己心里边也明白,但是同学你想,如果说以后这个应用啊,组件特别的多,而且是好多程序员写组件,你写三个,我写十个,你写20个,然后大家都要往redux里边存东西,那你觉没觉得redux里的东西就会越来越多,而且我们互相都不知道你往redu里面存了什么,我存了什么,什么时候存的,后来又变成什么样子,是不是都没有办法观察呀,所以说同学呢,也是有一个自己的开发者工具的啊,其实谁也有啊,咱之前学react是不是也有?你比如说安装了react开发者工具,这就有一个这小家伙,而且我可以借助这个选项卡components去查看整个应用有几个组件,对吧?这组件都是干嘛的?嗯,里边都有什么样的props和state,里边东西都是什么时候变的,是不是都能观察出来啊?那么re也有自己的开发者工具。
01:18
呃,名字叫什么呢?在这儿打开网上商店,直接在这搜索redux啊,如果有条件的同学啊,这个可以访问外网的同学,那你可以在这搜索一下,搜索redux安装哪个呢?安装这个。哎,安装这个好,那可能更多的同学啊,是没有办法访问外网的,哎,那我大家演示一下怎么去做呢?关掉它,找到更多工具,找到扩展程序,咱之前也操作过是吧?你点击这个东西叫做加载已解压的扩展程序,那当然我这之前已经加载了,那我把它移除掉好了没有?点击加载已解压的扩展程序,找到我给大家的这个文档在哪呢?全家桶,其他看没看到,这儿有一个redux DV tos,不是react啊,React你已经导导入过了,咱研究的是这个redux啊,然后点击选择文件夹走,就会出现这么一个东西。
02:19
诶,这个就是redux DV tos,诶开发者工具好了,安装完之后呢,可以把这选项卡关掉了。然后呢,你打开这个东西。它在这藏着呢,点一下这个图钉,把它钉在这就可以了,说老师他怎么没亮呢。那说老师是不是没刷新呀。那我刷新一下来走它也不亮。同学,正常对于一个开发者工具来说,咱就拿它来说,如果你这网站是用react写的。那我问各位一下啊,是不是它就会亮啊。那你说如果你的网站里边应用了redux技术,它是不是也会亮啊,正常来说的话是吧,我用了呀,那就得亮啊,是这样的,对于redux的开发者工具,各位不是说你这个应用拿redux写了。
03:12
哎,然后呢,你再安装上一个工具,还是说它就亮了,不是你要进行一些编码性的操作,而且还需要一个库的配合才可以啊,回到代码当中啊,那就跟大家说一下,如果想让你的开发者工具工作起来,那你需要这样做,首先第一步把你的应用停掉。第二步,安装一个库啊,这个库的名字呢,稍微有点长,我先敲一下啊,课件里有笔记,里边也会给大家写进去的,叫什么名字呢?Redus-DV tooth,哎,开发者工具杠extension。啊,Extension就叫这个名字,把它装上,哎,其实那个extension啊同学有扩展的意思是吧,哎,有扩展的意思,稍等等着它安装。
04:10
等他安装完啊。就是他这工具不是你想的那么简单,我安了就能用,安了就亮,不是啊,安哪了是吧,老师那回来我再刷新不是不是等等,不是说安装完了就得了,你得改点东西去哪改呢?Src里边我们找到谁呢?Redux里边最为核心的那个人,Star。哎,你找他聊点事情,老师为什么找他聊点事情呢?咋不找别人聊呢?同学们,你看你现在所面临的一个尴尬的状况啊,整个网页用不用re用了。安没安装开发者工具安装了,那刚才所说那个库安没安装也安装了,但是你觉没觉得开发者工具就是不认识你整个这个应用里的。那我再问大家,整个Rex里边谁最重要啊?那当然是啊。
05:04
哎,那所以说怎么办呀,来吧,你得在道里边做点文章。啊同学,我先说一下这些东西啊,这些东西先别看什么人字核,一会儿都改,一会儿我给大家形成一个最终版,咱在那里边改最终版,不改别的,就是改这些命名啊,正好也锻炼一下大家,看你能不能记住哪些地方都用了哪个文件啊来走同学刚才是不是下载东西了?嗯,来引入说老师为什么非得在这儿呢?其实你在这也可以啊,也没问题,来走引入你刚才下载那库叫什么名字来着,Rex。杠d tooth extension没有这stension好走,回撤port引入。啊,花括号from DV toth extension,我既然敢用花括号,那就意味着这个库肯定使用了分别暴露或者统一暴露的形式往出交东西,对吧?你要引入什么呢?引入这么一个there,叫做compose with d toth,说说这词什么意思,怎么能把它?呃,记住哈,其实你记不住也没有事了啊同学,Compose有变异的意思,With有伴随的意思,D tos,开发者工具引入了这个东西,你就可以使用它了,就把你整个应用按照D一位toth的那个标准,哎,再加点东西,再编译一下就可以了,那怎么去用它呢?来同学,注意,这个用法呢,比较奇葩。
06:33
找到great star。找到第二个参数,同学,我问一下我现在写没写第二个参数,写了,如果你没有写第二个参数,那就简单了,你把compose with DS往这一放,写个小括号就得了。就可以了,但是目前你第二个地方是不是写参数了呀,那怎么办呀,注意看。把这一堆东西先拿走,放在这儿。你还是正常的去调用compose with DS。
07:03
如果说你不需要1ACTION,你不写这个同学,你说是不是可以把它放在这儿了。但是问题是我有啊,异步action,那就把原来的第二个参数作为compose with DV tos的参数给它传进去,哎呀。说老师这会儿这会儿就没人能帮得了咱了,同学,这就是人家的语法规矩,这就是人家的API设计,咱们只有遵循的份儿了,好保存,说老师,这样我的开发者工具就可以用了,是的,N PM start走重新开启。稍等。控制台呢,准备好。把原来的关掉啊。看这个东西一会儿亮还是不亮是吧。好同学,注意观察东西是可以用的,来我添加一个人试一试,12岁走是不是也是可以用的,各位图标是不是亮了,亮了就代表能用了,而且你看这是不是多了一个选项卡,叫做redux呀,来走起点击往这边动一动啊,如果你缩的太窄了呀,同学,它那个布局就错乱了,就是上下的了,一般呢,我们让它诶宽一点,是左右的这么一个布局。
08:15
哎呀,舒老师这些都是干嘛的呀,来我们刷新一下。这里边啊功能很多啊,我们用的呢,其实就那两三个,首先看这这是干嘛的,Init这东西你见过艾特符艾特符init这是干嘛的呀。其实这是初始化那一次的你的action里的type类型。说老师没懂啥意思,我点一下加号你就懂了,同学我是不是点了加,那你那个action动作是不是当年你自己写的increment呀,你再点个减,那我问各位,那是不是就是呀,所以说在这个区域呈现的东西是你的action.t。就说的再直白点,再接地气点,你干嘛了?哎,都在这儿呢啊,我加了,我减了,那我在写这儿呢,Q weer12岁走啊,你添加了一个人对吧?哎,他是有这些东西的,说老师这是什么意思呢?这有什么jump,什么skip,这是什么意思呢?你比如说我想回到最初始的那个状态,你就可以瞄到这儿,你点一下jump,但是现在呢,它已经不允许你直接回到最初始那儿了,你可以回到这儿啊,放在这,你点JUMP1跳,同学,你发现那人也没了。
09:29
也回到了当年的那个一是吧,啊说老师初始化状态,初始化状态现在不允许你直接回去了啊,但是你可以回到这儿,那你没发现这两个人变成暗色的了吗?是吧,老师,那我想跳到这儿,你再点你发现诶刚才我那个茧就奏效了,你再点这,哎跳过来,同学你看这人就有了,是不是可以对状态进行一个哎跳转的这么一个操作,好刷新一下我们呢,再说说右边。右边你看这这有一个action选项,什么意思呢?就是直接看你的action对象,你比如说啊,注意看我加一下走同学,你看type类型是什么呢?Increment date呢是一,哎,OK,这就是看action。
10:10
好,那其实我们在右边用的最多的,你知道是哪个吗?同学,就是state刷新一下,点击state,同学你看多明白,这是不是re里边帮我保存的总的状态对象啊。对吧,同学你看咱们那么low的名字,这不摆在这儿的吗?是吧,和人字人里边有几个,打开是不是一个人再打开看人的信息是不是都在这儿,同学你看这多好呀,而且呢,它还有图表视图,这是属于树形结构的视图,这是图表形式的视图,点击。看总状态有和有人死,人死里面还有一个,哎,在这儿呢,这个人你看啊,这个绕呢,就是原始视图了,几乎不用,因为这个东西呢,它不太友好,看起来也不美观,一般我们用的多的是这个是吧,那这个dif什么意思呀,Dif其实有比较的意思啊,你刷新一下,然后你点击加同学,你看他告诉你原来是零,现在变成一了。
11:11
你再加他说原来是一,现在变成二了,还是一个比较,其实后边这三个呀,同学其实挺鸡肋的,我们一般不用,我们用的一定是中间这个state,而且调成的是树形的视图。好,那左右说完了,同学,我们再说说下边这都是干嘛的呗,同学你注意看啊,我连续点五次加啊,走走走走再走是吧,哎,我加了五次。那就是这个和是不是从零一直变往下变呢,比如12345是不是变到现在啊好,那这是干嘛的呀,回放。我接下来点击这个按钮,你看一下这个地方你就明白了,走回放刚开始是零点了一下,又点了一下,又点了一下,就整个这个动作给你回放一遍,你刚才都干嘛了,给你回放一下啊,而且这儿呢有倍速啊,你比如说说一倍还是0.5倍还是二倍啊,这有一个速度的选择,当然他这块可能有点小问题啊,它一直有这个小问题,就是说你得鼠标放在这儿,他才告诉你是几倍速度,同学,这个东西啊,其实用的也不多。
12:14
啊,那咱再说说下边这一块,这是啥意思呀,靠左悬浮这儿呢,靠右悬浮这儿呢,靠下悬浮啊,那我们一般呢,不用这个悬浮的,直接用在这个里边就可以了啊还说一个啊同学这个也挺有用的,那这个键盘一样的东西,你点击一下它啊来走。有点像干嘛呢?CH。啊,那我说一下同学,你可以在这个位置写一个action,临时dispatch一下。你比如说我不知道现在我这个减啊,它好不好用了,那我就可以这样写来,Typeb类型是不是减啊,哎,我要减减多少啊,Date告诉人家datata就是在这是可以编写代码的啊date加几呢?比如说举个例子,加100好,写完了吧,我要减减100我写加吧,啊减100太丑了,加啊increment加,加100来看着啊,现在是不是五啊,我点一下pach走,是不是105。
13:11
哎,就是不靠你在页面上点按钮去完成这些功能,在这儿可以临时哎做一些小测试是吧?哎,所以说常用的呢,就这么多啊,我们需要记住的是这里边展示的是action.type借助这个看状态,借助这个看改变,那么借助这个呢做回放,那借助这个呢,临时dispatch一下就可以了,那我们总结一下,回到代码当中,打开read me这个文档啊,把六这个折叠起来,我把接下来的这个开发者工具使用的笔记给大家形成来到这个位置敲个回车啊往下接着走,这是第七个了,六折叠起来开发者工具的使用,首先第一步啊,我们得安装这个东西,然后在道当中呢进行配置,引入compose with DV tos,把它作为第二个参数传进去,如果之前有第二个参数,那是不是把之前的参数作为它的参数再传进去啊,哎。
14:12
一个包裹的感觉好啊,那笔记呢,保存一下,我们这样关掉它,把src呢,我再复制一份,我先把项目停掉,Src复制一份,改个名吧啊叫八_src_re react盖redux,然后叫做开发者工具的使用,工具的使用啊,或者说就叫做开发者工具就可以了啊,这是第八个,那这小节呢,我们停一下。
我来说两句