00:00
上节课我们完成了买redux的一个精简版,这里形成了笔记给大家看一下。求和案例的一个经典版。首先要在这个啊,我们原来用react写的这个版本的这个基础上去把。Count组件自身的状态都给去除掉,因为我们使用了redux,会把count组件身上用到那些状态都交给redux来管理,诶,接下来在这个src目录下面建立一个redu目录,我们把redu目录相关的,把redu相关的文件,诶,都放到re目录里面啊,接着我们建了两个文件,一个stop,一个count reducer。啊。石头在监视里面。引入re提供的这个create store函数来创建一个store create store调用的时候需要传入一个啊,为这个store服务的一个reducer,也就是我们这里创建的这个reducer,最后还要去暴露这个道对象,那在这个count reducer GS呢?哎,我们对这个reducer也做了一些说明,首先reducer它本质就是一个函数,接收两个参数对吧,一个哎上一个状态,一个action啊,就是要做什么事情,一个行为,最后返回处理后的一个状态。
01:16
那REDUCER2个作用,在没有状态的时候去初始化这个状态,在一开始运行的时候啊,初始化状态,最后在使用的时候,有这个状态的时候去加工这个状态,Reducer第一次调用的时候,它就是哎,初始化状态的一个过程,那是由套自动去触发的啊随后。嗯,传递的这个per就是说第一次的时候,初始化的时候呢,因为这个是没有没有状态的,所以它是一个安底的啊。然后第一次传的tap就是这个,因为它是这个套啊,自动触发的,随后我们自己出发的时候,可以给他传指定的这个tap。最后啊。还要在这个index GS中去监听这个redu的一个改变,哎,一旦这个re。
02:03
它的状态改变了,我们要重新去渲染这个APP,因为呢,这个redu它负只负责管理我们的状态,但状态的改变想要让这个页面啊组件重新去渲染,还要我们自己去去写啊,就在这里写个监听,我们去当这个状态改变的时候,我们去重新渲染这个组件。啊,这是一个经典版啊,这块我们来写一下这个完整版。精简版其实我们只是省略了一个action,哎,这里啊省略这个action,那其实完整版的话,我们就是要把这个action给加上,还是。复制一下啊,先把这个删掉。接下来我复制一个零二啊,重新复制一个。来复制一下啊。笔记放到了最外层,我们把这个相关的笔记,哎,都会放到这一个文件里面。粘贴一下零三。
03:01
这个我们要写一个什么,一个完整版,哎,我们就用这个凹版。好。切换一下我们控制台的一个目录,现在在零二是不是CD加点杠回到上一层,然后回到上一层以后进到这个零三这个里面啊,Tap键可以补全啊,那进到这个零三里面呢,第一件事先安装这个依赖。哎,因为刚才我把这个。这个包的这个依赖都删了。接下来啊,先让他装着,那我们写完整版要干什么,是不是要把这个action create给加上,对吧?啊,所以我们去创建一个action。同样的,大家看一看这是不是action creates,那既然在X说明这个action也是有多个对吧,那也就是说我们每一个组件都有,都可以有自己的一个这个action。找到。这个目录啊,Re,目录,那我们来创建什么呢?
04:01
我们现在写的是求和案例,所以说是为这个count组件服务的,那我们创建一个count action。有feel feel有问题,Count。Action啊,当然你要想写完整的,你还可以把这个后面的,哎,比如说C给加上是吧,那我们就简单的写啊,Count action.js。来分析一下啊,之前也给大家分析过这个action,它其实它是什么?它就是一个这么一个对象对吧?有这个类型有腰带的一个数据,对不对?诶只不过我们写精简版的时候,我们没有去创建这个action,而是我们自己去写的这个对象,对吧?那所以这个文件的action,这个文件的主要的这个目的,我想大家已经明白了,对不对啊,把这个数字写一下啊。Action。它主要的一个目的就是。
05:01
为这个count组件生成啊X对象。哎,这个就是我们。Action create它最主要的一个目的啊,为我们的这个看到组件去创建啊,去生成一个action对象。那这个对象。是什么呢?啊,我们来想一想啊,其实我们无非最终是想要的就是这样的一个一个数据,对吧?哎,想要得到这样的一个对象对不对啊,所以说我们可以定义一个函数啊,把这个对象给返回出去就可以了,是这样的吧?啊来,我们来定一个函数function,嗯,我们的这个count action啊。它有两个啊,有两个用处。来看一看我们的例子。找到。Count组件这里,诶它有哪两个用处呢?一个是这个增加的对吧,还有一个是诶减法的减少的,所以说这里我们也要对应的去创建一个呃,用来创建这个增加的这么一个action,还要用来创建这个呃减减少的一个这个action对不对,所以我们把这个名字写一写啊音。
06:15
C写完整一点吧啊。Create。Encouragement action来接着呢?它这个函数我们最后调用之后,想要得到一个什么结果,是不是,哎,就是这样的一个结果对吧,所以我们直接哎它就可以了。它就可以是这样的吧,啊来接着再写一个减法的。把这个名字改一下啊,我们的减法是。好,这个是减法的,接下来再看一看啊,首先这里这个数据,这个date就是我们要加多少或者要减多少,你你不能在这写死吧,对吧,你这个得是有有有这个别人用的时候给传过来,也就是说在哪呢。
07:16
在这里。哎,不是这个啊,把这项关了啊,在这里我们用的时候要把这个要增加多少或者减多少这个值,就是我们选择这个值要传过来对不对,所以这个函数我们得提出一个参数date对吧,那date我们就写到这里是不是好,那这个date。是指它,然后这个K也是它,所以我们可以简写,哎直接date,那同样底下这个也一样啊,我们把这个后面的删掉,解出一个date,好,你光这样写完之后,我们这边我们怎么用呢?没法用对不对,你还要把它给给暴露出去,对吧,而且这个文件你看他俩都要去暴露出数据,所以我们就不能去那个使用默认暴露了,我们要分别暴露对不对,那怎么分暴露export,哎这样就可以了。
08:00
一个。好,接下来我们再来优化一下啊。这个函数啊,我们是不是可以把它可以改成这个箭头函数,对不对,来改一下箭头函数啊,我们定义一个。它然后A等于它这里加个箭头,这样是不是个箭头函数,接着我们对这个箭头函数进行简写啊,那首先只有一个参数小括号不要了是吧?好,只有一个,哎,只有一个return,那是不是可以诶把这个return给省略掉,然后直接把这个拿到这个后面,是不是这样的啊。告诉你这样不行啊,如果我们只是说,哎,你返回的是一个啊,简单的一个数据,比如说一啊,返回一个什么字符串啊,哎,这样是可以的,当然你这么写就有问题,有什么问题呢。你这个大括号,它不认为你这是一组对象,它会把这个大括号识别为是它箭头函数的一个函数体,清楚了吧?啊,那想要让他把这个大括号就把这个整体当成一个对象怎么办?我们可以加一个括号啊,这是箭头函数的一个一个基本知识,哎,这样写是不是就简单了,哎,我们可以简写成一行了,好,那同样的下面这个也是一样啊呃,我就哎直接删掉吧,再重新复制一个改一改。
09:25
因为这样改快一些。把这个改成第一是不是就可以了,哎,我们把它给简写成一行,把注释写一下啊。用于A加的X啊。那底下这个是我们这个用于减的这个X。好,而且我们也用了分别暴露,那是不是在使用它们的这个地方,我们去用它就可以了,对不对,来看看在哪用呢,是不是在这使用的啊,所以说我们直接引入这个action就可以了,来在上面引入port,我们要引入谁呢?引入这里面暴露的这两个这个对吧,而且是分别暴露,所以说我们加个这个加括号。
10:17
Create,诶,然后再加一个。减法的啊,注意这一个是减法的,这个是加法的啊,这个后面。啊,如果你用的编辑器没有自动给你引入,你就自己写这个啊from,然后上一级目录,上一级目的,哎,Redu里面的这个,哎,注意当前我们写的是这个index下,它是这个组件这里面的,你要上一级目录,在上一级目录才能到这个统计再去找它啊这个目录结构不要不要写错了啊,这个引入不要写错了,好,这里引入之后,我们是不是可以直接用它了,对吧,而且注意它是一个函数对不对?哎,我们找到这个地方是不是这里在用,这里在用,而且它是一个函数,我们要传的值就是这个啊,这个Y6。
11:03
对不对,来把这个Y6给穿过来。好,先运行看一看啊,如果没有问题,我们再去改下面其他的呀,Start。先把这个加法我们测试通过之后再去改其他的。来打开控制台,防止它有错误。这层啊,下面我来选择一个二,然后加加加,哎,是不是有出现我们之前说的这个问题,这个啊,数据类型的问题,那这里我们传入的时候还是让它乘以一,把它这里获取的这个字符串类型,诶转成这个啊,Number类型转成数字类型,哎,这时候再来看一下啊。刷新一下,选择一个二增加,增加没有问题对吧,那加法没有问题之后,其实我们就哎整个都复制一遍,把这个。也给他改了啊,只不过这里是create啊,减法的这个X,接着再复制一下加法,因为后面这两个都是加嘛,哎,我们把这个给替换掉。
12:14
还有这个地方。好,那这个例子我们把这个action也给用上了,这就是一个比较完整版的,Re,现在再看我们的这个图,是不是只有完全走通了,对吧,你看我们的组件,哎,去,嗯,找这个action,哎,告诉告诉这个。Action你要就说我要干什么干什么,他准备好action准备好这个数据之后再去,诶找这个套子套,再安排给reducer reducer处理好数据之后,加工好状态之后再返给套,最后我们再获取,这个流程就跑通了啊接下来我们再来看看,嗯,还有什么可以优化的,首先我们来看一个地方啊。看一下这个reducer啊,这里你看我们这么去匹配的,匹配的它对不对,这里呢,我们这么去传达这个它是吧?啊,而且现在只有两个文件,你这么去写也没问题,但是如果我们文件特别特别多,有时候我不想用这个名字了,哎,我想改一个名字,比如说RE2。
13:17
你要找到所有用到increment的地方,把它改一遍,是不是比较麻烦对吧,而且还容易写错,比如你这里改了,你这里还有对用去改,这时候怎么办呢?其实一般在真正的这个这这个商业项目中啊,一般像嗯类似于会涉及到这种这种K的这种地方啊,我们就简称为它是K。哎,涉及到这种K的地方,我们都会把它给定义成一个常量,放在个文件里面,这样改的时候我们只要改一个地方就可以了啊,我说的这个K呢,是因为有很多地方会会这么去设计啊,比如说在写这个red,它也是这种,嗯嗯,K value6的这种no circle的形式嘛,也会用到大量的这个K,你要是乱写的话,每次还可能写错,还可能不利于维护,所以我们也会把它定义成单独的一个文件啊。
14:04
那我们怎么定义呢?来在这个还在这个re这里面啊,我来新建一个文件,这个文件呢,就叫cost,诶cost是我们定义常量用的就是cost对吧,那这个其实是cost的一个,呃,完整的一个写法,我们之前定义这些常量啊,使用的这种count啊,都是它的一个缩写,我们定义完这个一个文件之后。啊,要把谁呢?要把我们所有用到K的地方啊,统一放到这里面去管理。先把注释写一下哎,好让大家清楚我们的这个文件它是做什么用的啊,用来存放action对象中使用的啊,Tap的值啊,它主要有两个作用,一个是啊,方便我们维护。
15:03
方便维护,哎,就是当很多文件都用到的时候,我们只要改这里的一个地方就可以了,再一个就是啊,就是防止我们写错嘛,有时候一个这个type比较长的时候,有可能也会写错啊,防止写错。啊,这个文件其实比较简单,我们就定义成常量就可以,对吧,定义成常量,然后常量的值就是它就可以了,啊常量呢,我们一般使用这个关键字去定义,而且常量。一般我们使用大写来in。等于谁等于小写的这个increment啊,就是我们这里的这个值啊。诶,减法的这个让我给删了,刚才啊撤销了一下啊,刚才给删了,接着再来定义一个。
16:04
我直接复制吧,来D这个是减法的啊,我们这里光定义了没有用啊,你得分别给暴露出去才可以来export。Export,因为我们只有暴露出去之后,诶,在别的地方引用这个文件,才可以去使用到这两个常量,好,那接下来我们要把所有用到这个的地方,哎,都可以改成我们的这个常量。看看哪里用了,是不是有一个。哎,这个地方用了对吧,我们的这个count action这里用了import increment dcrement,哎,我们把这里定义的这两个常量引入啊,然后这里它会自动帮我们补出来,如果不补的话,你就自己写一写啊,它是当前目录嘛,它这个文件当前目录,那这里我们就不写这个rement,我们就写这个常量。来这里也写这个常量,是不是,因为这个常量的这个值是从哪来的,是从这里我们定义这里来的,对吧?好,接下来还有一个地方,Re里面是不是也使用了。
17:09
来,我们在这里引一下啊,一般我们引入东西都是在最上面去引入自己的逻辑代码,在下面inputrement,同样的把这两个也给改了。把这个也给改了。好。这样就可以了啊,其实你们也会发现这样的一个好处,哎,假如有一天我不想叫ment,我想叫rement,比如说想加个二,哎,我只要直接去改这个我们定义常量的地方就可以了,那其他地方我不用管你,反正你用的是常量对不对,都是一样的,哎,我这里改的是什么你就是什么,好接着我们来运行试一下啊,不能光改,看看功能还好不好使。刷新啊。随便找几个数加加加,然后这个。
18:01
呃,奇数不好使对吧,它是这个偶数嘛,我们先给它再加一个,变成奇数再来一个,哎,这时候就好使了,包括这个异步。那功能没有问题,那这个我们就优化完成了。这个就是我们redux的一个完整版的一个写法,那把笔记也来整理一下啊。复制一下这个标题。求和案例完整版。完整版呢,其实我们就是多了一个这个action啊,就是在这个reducer。然后是re啊,说错了,Re目录下新建的一个什么文件呢?新建啊count action文件啊,然后这个文件是做什么用的呢?我们就呃直接。
19:08
复制一下啊。最后我们还做了一个优化是吧,然后是在这个目录下新建了一个这个啊constant GS文件,那这个文件它是做什么用的,这里我们也说了啊,就是。在这里啊,就是用来存放action对象使用的这个tab的这个值,方便维护,防止写作,其实这里不太严谨,也不仅仅是action在使用啊,我们的这个reducer它也在使用啊,他要去匹配。那这个我们啊,这么写也没问题,确实是。确实是什么呢?是action在使用,哎,只不过是reduce,它是在在匹配你传的这个type而已,好,我们把这个也放到这里啊,那这个就是我们redu的一个完整版本,这小节先到这里。
我来说两句