00:00
给大家介绍了纯函数的概念,哎,我们说我们的redux中的reduceduction,它是一个纯函数,这个大家在写的时候一定要注意啊。那这一块本来我们打算啊做一个优化的,但是在这个优化之前呢,我们先来看一个工具,看什么工具。就是。我们在使用,哎,在学习这个react的时候,给大家说过,我们装了一个这个react工具,可以很方便的让我们在这里去看一下我们react,诶它的这些组件的一个情况,对吧?那现在我们学了这个redu,那有没有一个很好用的一个redu工具,能让我们方便的去看一下我们这个redu中它存储的数据的一个情况呢?因为我们现在只是两个组件,你感觉还好,这个数据你能啊,就是分得清,哎知道怎么去用,但是一旦当这个我们的组件就特别特别多的时候,我们就特别需要一个这个redu的一个工具来帮助我们去来。让我们哎更方便的去看看这个re中到底是存在了什么哎。
01:00
啊,那其实是有这个工具的啊,那这个工具呢?啊,其实我们使用的是谷歌浏览器啊,谷歌浏览器它最强大的地方就在于它丰富的一个扩展,那我们需要什么工具呢?都可以直接去他的谷歌应用商店去下载就可以了啊那当然这个前提是你得能访问外网啊,那我先演示一下能访问外网的一个情况下,找到更多工具,我们的扩展程序。好,然后。在这里啊,点开这有一个打开谷歌就说打开网上应用商店。这里已经打开了啊,那我们搜索什么呢?哎,你需要什么呢?查就是说工具,你就去搜索对应的工具可以了,那我们是不是需要诶re的一个工具,直接搜索re,然后回车啊一般啊就是。就是排在前面的,就是比较。就是比较好的啊,当然也有很多其他人出的嘛,对吧,那我们就用这个这个吧。啊,点开之后呢,诶,可以看到它有一个这个预览图,告诉我怎么用怎么用,然后直接点这就可以安装了啊,添加到我们的顾客中啊但是。
02:01
嗯,大部分用户呢,啊,这个使用的人还比较多,大部分用户呢,都不具备一个访问外网的功能,也就是我们访问不了谷歌,那更别说这个谷歌应用商店了,对吧?好,这时候也也没有事情啊,给大家准备好了。就是说给大家已经嗯打包了,就是我之前装过之后,给大家已经打包了一份出来,打包了之后呢,我给它放到了桌面啊,它就是一个文件,那我打包之后的这个文件大家怎么使用呢?来我从头给大家演示啊。如果你拿到一个我这个打包之后的这样一个文件来怎么使用啊,当然这个文件呢,会呃提供给大家下载,首先还是一样要从这里打开,找到更多工具,找到你的这个扩展程序啊。然后把这个开发者模式一定要一定要点开啊,现在我就是开着呢,如果是关着的,它是这个情况,哎,就是没有那几个按钮选项,你只有把它打开之后,你才会出现这几个按钮选项,清楚了吧,然后出现这几个按钮选项之后,你去加载已解压的啊这个扩展程序,来我们找到这个桌面。
03:02
好,找到这个文件包啊,直接就整个这个文件包选择就可以了,好是不是已经有了啊,如果大家不能访问这个谷歌外网,你就。哎,这么去添加啊,添加好之后呢。哎,你会发现并没有多对吧?啊,这个是因为它会帮你折叠起来,在这呢,哎,我们来找找。看一下在哪呢啊。啊。这是react,那这个在这呢是吧,我们只有把它点这固定住,它才会在这里出现,看到了吧?啊好,当然这里也有了是吧,那我们刷新一下页面看一下啊。你会发现啊,它并没有亮,对不对,那为什么呢?那是因为。我们还缺少一个很关键的工具,它不像这个react的这个,呃,开发者工具,哎,这么就好用。那我们还得配合一个工具去使用它才会亮,那什么是工具呢?就配合一个库啊,还得,而且还得配合我们的代码,接下来我们来安装一下这个库。
04:01
打开终端先把这个停掉啊,还是在这个目录下进行啊,在这个final这个目录下进行,因为最终我们还要对这个版本进行优化,包括这个工具也给大家直接就放到这里面安装一个库的名,这个库的名字比较长。啊,回答行程笔记啊。大家看着这个视频答也可以啊,看着视频输了也型,那首先肯定是哎,Relax对吧,杠D就是我们的这个开发工具啊,因为toys接着呢还得加一个扩展,因为它是一个属于配合谷歌浏览器的这个扩展去使用的一个工具啊。等他安装啊,已经安装完了,安装完成之后啊,我们还要去写一些代码才能使用,那写什么代码,那既然是redu相关的,肯定去改这个redu最核心的一个文件,Redux最核心的是谁,是不是这个套对不对啊,那这里面我们就得去写一些编码,那既然我们安装了这个库,就要引入这个库啊。
05:04
引入啊,Re,杠第一位。Toys。生气啊。引入input。哎,它也是一个分别暴露,所以我们呃要引入这个,哎。Compos啊,With这个第一位toys诶,它会自动给我补全啊,如果没有自动补全,你自己手手打一下这个,因为这个可能编辑器不一样。哎,当我们引入之后,它的这个用法呢,嗯,有点有点奇葩,我们来看看怎么用啊,首先你先看到这个小写就明白它是一个函数对不对,函数的话,那我们。就是在执行这个函数才可以在哪执行呢?当我们没有使用这个中间键啊,就是说不让这个套去支持这个异步的X的时候,没有使用这个中间的时候,其实哎,这个函数直接在这执行就可以了,比较简单对不对,但是我们这里使用了,我们要支持这个异步的X,使用了这个中间点,这时候就比较麻烦了,那怎么麻烦呢?也就是说现在我们有一个这个东西,然后还有一个这个东西对不对?所以哎,这个时候大家去考虑吧。
06:10
啊,你要么就说你这个函数你传给他,要么你这个函数传给他,对不对啊,当然我直接给大家说结果是把这个函数。作为参数传给它是这么去用的,清楚了吧,有点。啊,记下去,因为这个是人家设计的这个规范,这这个也没办法,你要这么设计,咱就得这么写是不是啊。好,那你写了这个之后,哎,这个redu它就能和这个工具去配合起来,去使用我们来保存来刷新看一下啊,好刷新一下啊。啊,没有启动啊,没有启动,在这里刚才给他停掉了。Start启动项。启动完成,我们来浏览器中看一下啊。嗯,刷新可以看到啊,这里已经亮了对吧,那说明我们已经可以使使用这个工具了,那这个工具怎么去使用呢?我们直接点开这个工具,你看现在左键就可以点了,刚才还点不了对不对,好点开之后会出现啊这么一个界面啊。
07:05
那这个界面呢,就是我们的这个。它的这个工具的一个界面,来,我们一点一点看一看怎么用啊。首先。好看左边这里啊,左边这里这个initt这个大家说我是re它的初始化的时候使用的一个东西。接下来我来点一个加,我们来看一看啊。诶一点我还没点呢,只要碰到浏览器它就消失了,对不对,那这个体验不是特别好,来我们接着点开看给大家说怎么用它这这三按钮呢,是一个浮窗,诶向左边浮窗,向右边浮窗,以及向这个下面浮窗,那我们把它给诶悬浮到左边啊,那在左边出现之后呢,一点也会没有,因为它是一个属于一个独立的一个窗口,还是被我们这个全屏的给指导了,对吧,因为我录视频,我要我要全屏,那其实我们把它缩小一点就可以看到它对不对。那说到这个或者再小一点啊。
08:03
来,再给大家调大一点。哎,这个时候就差不多了啊好,那这个工具我们再小一点。那这样给大家来演示,现在我们来看看啊,这个刚才说了,这个it是我们在初始化。这个Du的时候,它的一个状态是不是接下来我来选择,诶增加一个数,可以看到这里是不是有一个increment啊,是一个增加,那接着呢,我再加。来再加一下,再加一下,诶现在加到六,每一次我去操作这个redu啊,它都会给我去,诶出现一个这个对不对,那如果我是减呢,比如说我是现在嗯,减个二,还可以看到这是decre的,大家可以看到这其实是什么,是我们的。呃,Action的那个tap对吧,那这其实是我们的action是不是好在这里呢,我们还可以,你看悬浮上去啊,你要先点到这里悬浮上去,它会有这个切换,可以让你切换到你的某一次提到的一个状态啊某一次哎。就是说这个X的一个状态啊,我们提到一个状态,那比如我回到这里,哎,是不是结果就变成了二,假如我到这里是不是变成四啊,然后哎,六。
09:08
一直回到最新的这个看到了吧,啊,那这这是一块这块显示我们的X啊,接着这块看完之后,我们看下面这个啊,下面这块呢。嗯。呃,也可以给大家说,首先看这个action啊,那这个action呢,是我们整个action的一个详细信息啊。对吧,比如说我点到这里,可以看到我这个action的一个信息,哎,我传的数date是二,然后这个type是它,然后比如我点到这个ment,然后type increment知识二啊,这个可以看我们就是某一次的这个action的一个详细的一个信息,清楚了吧,啊就是。这是这个X,那接着把它底下说完,然后这个是图表的形式啊,它会告诉我们啊,Data里面有什么啊,Data是什么,Tap是什么啊,如果比如我们现在加一个人AA以添加好,然后接着点到你看这个at形式at tap,这时候哎,它这个呢,就相当于啊,以这种树状的形式给我们展示啊,以图表的形式,树状形式给我们展示啊。
10:06
然后这个呢,是原始数据,这两个病毒都少,一般我们就看这个trade用的多一些,哎,注意。啊,这个地方显示的这个区域啊。是我们啊提交的这个action嘛,对不对,你看我们这个提交的这个类型是这个date,是这个数据啊,这个一定要记住啊,我们是tree这个用的是最多的,接着这个说完了,再看我们第二个啊state啊,上面的已经说过了,上面是我们每一次去操作这个re的,就是每一次提交的啊推就说dispach这个action这里面都会有记录啊。嗯,还可以在这进行搜索吗?好,那接着说这个啊,State state是我们就大中我们保存的这个总的一个状态,哎,我们是不是存了一个和和现在是四对不对,它是不是还存了一个人S人S呢,第一个啊。下面这个零一是我们初始化的那个对吧,那这个是我们刚才哎新添加的这个对不对?好,同样的这个它也有三种形式,也是这个哎,图表的形式啊,然后以这种原始数据的形式,当然我们看的最多的还是这个treat的形式啊,Treat的一个形式,树状的一个形式,看的比较多一些啊,这样我们想用re大中某个键,就是说存到大中某个数据的话,直接在这看它又都有什么K就比较清晰了,是吧?这个工具好接着看这个啊。
11:20
碘伏的低伏啊。它会显示啊,数据的一个变化的一个情况,比如我们点到这个加这一次的一个啊一个提交。嗯,这个。它是显示最新一次的吧,我再再加一次啊。再加一次。啊,没有点到啊,再加一次,好,新增加了一个increment是吧,好这时候。嗯,我刚才这个没有选啊,这个因为是点到那里了,你看这里是是四变到六啊,这边它会有一个这个导航,大家要注意一下,刚才我没注意到啊。
12:03
好,这个时候他会看到他的这么一个一个变化啊。好,接着比如点它,这可以看到我们人的一个变化啊,比如说点它这时候可以了,刚才因为这个DEF,它就是说往往后又点了一些啊。就是我们是刚才是。点了一下这个数据啊,点了一下这个他的这个。啊,层级变了,所以我们再点那个其他的就没有效文要从这点回来就可以了。这个地方看它数据的一个变化啊,好这些这些都,哎用不到了,我们其实用的最多的就是一个state啊。看一下我们的。大中存的总的数据的一个状态,再一个就是action用的也比较多,看一下我们某一次提交这个action啊,提交的一个数据的一个情况啊,这两个用的是最多的,而且这两个中的tree这个是用的最多的,好那这是这个,那关于底下呢,你给大家说一下啊。啊,这个是。呃,大家看到这个播放按钮就知道了,它应该是一个播放啊,播放什么播放,我们整个re,它的整个的一个过程是怎么来的,那我们来刷新一下啊。
13:06
刷新之后呢,啊,这个数据还在啊,有有时候是这个工具它造成的一些缓存的一些影响啊。那我们先把这个把这个关了,把这个我把它放大一点。啊,这时候你新开一个标签就好了。对吧,我们把这个关掉,然后呃,有时候你你直接在这儿使用这个工具不方便,刚才给大家说的是这三种方式是哎让它就悬浮对吧,但悬浮呢,它是一个独立窗口,这时候你还可以怎么办呢。还可以啊,我先把这个打开啊,先把我们的调试工具打开。在这里啊,就是这边啊,如果没有的话,它可能折叠这里面它也会显示一个啊re,那。如果没有这个选项呢,你要把这个浏览器关了,重新打开一个啊,因为之前我刚装完也是没有,然后我是啊重新打开了一个浏览器,诶,就会有一个这个啊,这个时候我们点这个的话呢,就会直接在我们的开发者工具这边去显示。
14:04
当然你也可以去点这个啊,或者说点那个一个独立窗口,看你怎么用都可以啊,啊推荐大家使用在这个开发者工具这边去显示啊。好,那这边呢,给大家说完了,这边是所有我们操作了这个redu的记录都会在这是我们展示啊所有的这个。X啊,然后这边。也给大家说过了啊,我们最常用的就是一个,哎,一个action的一个详细的一个情况,以及我们的就是。中保存到我们的这个总的一个状态,对吧,啊那。一开始之前我们说到这里对不对,这个给大家演示它是一个这我们这个操作主义大的一个过程,那比如我现在选择一个数字二啊来我123。四五哎,我加了这么五次,接着呢,我去点那个播放。他可以。看注意的数字啊,它可以一次一次的帮我们去,诶重新走一遍的一个过程,当然这里可以调这个倍速啊,0.5啊,两倍啊等等啊,那这是这一块。
15:03
嗯。接着这个其他的就呃不说了,再说一个比较常用的啊,就是这个键盘这块,你点你看这个键盘对吧。啊。点开之后。大家可以看到啊,这里可以让我们去编辑啊,然后这还有个dispatch,这是什么,这是可以让我们,哎自己去手动去写一些这个action,然后哎,Dispatch到这个套中让他去。完成我们的数据的一个操作,那比如。这来写一下啊。Tab。哎,我们写一个,呃,Drement啊,为了明显一点,我写个increment吧,Inment那逗号date,哎,我tap是increment,那date就是我要啊变更那个数据嘛,来,我传个100。啊,注意现在是十对吧,那如果我直接点点那个发,可以看到这边也提交了一个X,然后这边变成一百一百一啊,那这个也是我们比较常用的一个功能啊,就是这个键盘这里让我们自己去编辑啊好,这个就是redu它工具的这么一个使用啊,有一点要注意的就是。
16:15
啊,一开始在我们刚安装好这个工具啊。这个浏览器这里,它可能不出现这个东西啊,也可能在这藏着呢,也可能不出现,这时候你重启一下浏览器就可以了,它就有了。好,那。这个我们就。你看有时候刷新它还在,那刷新还在的时候呢,那可能就是这个工具造成的是吧,那这时候啊,你去先打开一个标签页就可以了。来看一下啊。好,这个就是我们的这个工具的一个使用。呃,笔记呢,也给大家。整理好了,放到了还是放到了这个。啊,笔记里面啊,在这里我们的一个开发者工具的一个使用安装,先安装扩展,然后要在套中我们诶导入这个函数。之后执行这个函数,并且把原来我们使用插件的这个函数放到这里作为参数来使用,好,那这小节先到这里,哎,主要给大家说一说如何使用这个re。
17:10
这个开发者工具那。在下一小节再对我们的这个代码进行一个优化,以及我们的这个求和案例最终版的一个实现。
我来说两句