00:00
好,同学们,我们继续说。完了开发者工具的使用,我们就进入redux学习的最后一个环节,就是我要形成一个最终版的代码。其实目前这个src里的代码啊,同学其实已经能用了,一个最基本的形式已经形成了,就等着你添加更多的组件去共享更多的数据就可以了。但是这个里边呢,还有一些不合理的小地方,你比如说第一个地方,我们是不是写过这种代码加,哎,什么一堆人,这些不合理的命名都要改掉是吧?那么第二个就是很多方法的名太长了,我们要进行一些精简啊,那么第三个就是很多的这个注释啊,我们也没写全,哎,所以说最终版呢,就是查漏补缺,把一些不合理的小地方都改一改,就形成最终版了。那么打开src同学,我们整体来过一些这些文件啊,首先从index开始给大家写好这些注释啊,那来上边引入这些呀,我就不再说了啊,我就从这儿开始,为什么要用provider传递store,这是为什么我把注释呢写在这儿。
01:14
写上啊,叫做此处需要用provider包裹APP,目的是让APP所有的后代组件,啥叫后代组件?可能APP有子组件,它的子组件还有子组件啊,子组件的子组件的子组件,那就叫后代组件了啊,目的是让APP所有的后代容器组件。啊,都能接收到道,不用你自己再一个一个来了,人家直接能帮你传过去。啊,OK,这注释写好,关掉,我们再看PAPAPA里面没什么可写的啊,需要注意的是这啊引入的是。
02:08
Count的什么组件呀的容器组件,你别引入UI呀,是吧,引入UI没用啊呃,这再来个注释,把这改一下,叫做person的容器组件,哎,注释写上好了再往下走,同学,接下来呢,就得改名了啊,打开redux。找到这个里边最核心的那个人,叫到。这些注释啊,咱写的还行,但是有一个地方呢,我得改一下person reducer这是为谁呀?哎,为person组建服务的reducer,这得改一下啊P呢,还得大写的走这些引入,那只能写到这这种程度了,是吧,咱往下看这你觉得这有什么问题呢?首先啊,你看这叫和,这叫人字,这些命名是不是都不合理啊,各位,那所以说怎么办呀?改吧同学,你想存一个和,那要么用some,要么用count,哪怕你用一个number是不是也行啊,但是最好同学让人家一读就明白这玩意儿是啥,所以说呢,我采用的是这个叫做count啊,那这叫人字是不是也不合适啊?Person代表人,Person思是一堆人,对吗?行,老师这就改了,哎,你这改了,别的地方不改了呀。
03:24
同学呢,我问一下啊,看你真没真懂,我这改了影响的是什么呢?我改了啊,我改了我影响的是什么呢。你是不是影响了redux里边保存的那个总状态啊,你把总状态都影响了,那我想问你用总状态的地方。是不是就也得改呀?哪儿用了呀?来找到container。啊,咱一个一个来,先看这person往下找同学,他想把一堆人传进去,那你看他在这干嘛呢?啊,总状态点人四不行了吧,是不是persons。啊,那这个呢,他想传一个和进去,那是state点和也不对了,是不是得叫count呀?哎,你这会可得记着得改,同学你想嘛,你存入reus里的总状态发生变化了啊,然后你之前写的那些呃,不合理的那个属性名还在那写着,那肯定不对嘛,对吧,还有这同学这是多组KY6吧,那所以说最好我们敲个回车。
04:24
走,改,这改不改,一堆人就这么叫着,哎哟,真low,说老师就想表达的是一个人的数组,哪怕你写个这个也行啊,Person AR对吧?那就看你之前有没有好好练了,这影响的是什么呀?我改person AR影响的是什么呀?嗯,我影响的是传递给UI的东西,你说对吧?我这为什么写persons,我咋不写佩奇呢?那是因为store里边人家汇总的时候,人家写的就是person对吧?哎,回来来走,同学咋写这。啊,Person丝是吧?那这呢,其实你也可以叫person丝对吧,不一定说哎老师他和他就得不一样,不一定啊可以一样啊啊person斯,那这和呢,那就count,那这呢state.count诶这回是不是就可以了呀,那你往上找,上边但凡用到一堆人的地方,哪儿你就找我便历的时候呢,肯定得用到这个东西了,原来这写的是什么来着,原来这写的是这个,来撤回来看一眼,走,原来叫一堆人是吧?啊这叫和是吧,那行。
05:25
CTRY再回来再回来走,那这叫做count哈,找那一堆人一堆人一堆人,肯定得变利吧,这呢是吧,嗯,改改成啥PERSON4好啊,还有哪用到和的地方是不是也得改啊,CTRLF,找找谁找和,和是在这儿呢?啊,那找改成啥呀,Cot看看哎,这回是不是可以了呀,好,然后呢啊,这改完了,这就得了。哎,同学,还有一个地方也得改,关掉你countt的容器里边是不是也得改啊,啊,来这儿啊,叫count还行,那这儿呢,别叫和了呀count,那这儿呢,别说人数了,Person count啥意思?那就是人数嘛,Person count,那就是state点,谁是人似点lengths吗?不是,是PERSON4点烂,你说对吧?
06:16
好来,咱启动一下n PM start,如果你东西启动没问题,那证明你改的是合理的对不对,慢慢来。稍等空台呢,给他准备好。等着它启动。好,目前来看正常哈,嗯,切到控制台来试试加哎减哎,没问题,输入个名字,哎是二走也没问题,OK啊说老师还能改哪呢?来,先把这些关掉,同学改东西要有顺序,我们一点点来,我刚开始是在这里边没改东西,我给你写注释,APP里边呢,我也给你写了点注释,然后我们才来到的redux,然后我们才来到的到然后才发现这块不太合理,然后我们是不是开始改了呀?哎,好了,还有一个地方呢,也可以再改一改哪呢,同学你说啊。
07:11
我在store文件里对吗?嗯,干嘛呢?是不是汇总所有的reducer呢?在这儿是不是汇总所有的reducer呢?啊同学们问一下啊,你说如果你的组件里边有40个组件都要跟redu打交道,是不是得有40个reducer,那是不意味着你在这引入的时候不再是两个了,而是40个。那你觉没觉得star文件有点太大了呀?是吧,有点太大了呀,那怎么办呀,我们一般这么做。把这些东西都引入到一个JS里面,在这个JS里面进行合并,把最终合并完的东西再交给star。一句话总结就是store里边不引入任何的reducer store里边只引入一个人,就是汇总之后的总reducer,那么reducer在哪汇总啊,你单独建立一个文件去去汇总,哎,来同学,一般公司都这么写。
08:05
你打开reducer,右键新建来一个叫做index点儿GS。同学,我咋没说谁谁谁的reducer咋没写名呢?Count就是count的reducer,那person呢,就是person reducer,哎,那你说这个index呢。他不是任何人的reducer,它是用于汇总的,该文件用于汇总所有的reducer为一个总的reducer,对吧?来,走着吧。那就得把死道儿里边的这两个引入,咱是不是给他带走?是不是得放在这儿,那就得把这一堆也给带走,也得放在这儿,对吗?那最后呢,这东西是不是得交出去啊,所以说来一个export default这家伙是不是就得了呀?但是别忘了你这里边是没有combine reduce啊,那咋办?那就来到这儿,把这个combine reducer就带走,那这个里边呢,是不是就不要了?
09:08
哎,那回到这儿,是不是得引入的最上方啊,那这两个我是不是不要,我这里边只是汇总吗?那所以说是combine reducer4好,那写好处是叫做引入combine reducer司用于汇总多个reducer。引入它去汇总,引入这个,引入这个是吧,那在这呢,All reducer,那写的太麻烦了吧,非得拿all接一下再暴露出去,那莫不如就直接aport default combine reduce这就不要了,那这为什么飘红了呢?是吧,因为你这个路径呢,不一定对,是吧,你目前是不是在这儿啊,你想引入count的reducer,好像不用点reducer私下的count了吧,应该是直接写。
10:02
这是不是也是直接写呀,好东西,引入完了。啊,然后呢就汇总了,然后呢就交出去了,那在store里面同学咋办呀?这all reducer是不是得从外部引进来呀?嗯,写好注释叫做引入汇总之后的r import引入。那叫什么呢?All all reducer from从哪儿啊?当前路径下的reducer下的谁?Index?既然叫index,我是不是可以不写了呀?好,那这个名字也没有必要非得强调叫all reducer就叫reducer就得了。啊,汇总之后的好,那这呢就叫reducer就可以了,哎,说的再直白点各位就是汇总的动作交给别的文件去做了,谁呢?Index这一堆引入这块,一汇总一暴露啊回头来到页面上刷新,应该还能用加啊,然后当前奇数在加,偶数不能加了,奇数来走E不加,诶等一等减啊可以随便输入个名字,13岁走是不是也行,回到代码里面继续优化,还有哪能优化呢?这儿还能再优化优化,同学你看这是不是K呀?嗯,这是VALUE6啊嗯。
11:24
那我问一下这名是不是您说了算呀,那为啥非得叫count reducer呢?同学们,你想一想,你都已经在这个reducer这个文件夹里边操作了吧?所以说吧,别那么麻烦,不叫count reducer就叫count,不叫person reducer就叫person,那你说这呢?是不是就可以写count,那这是不是就可以写person,那你是不是处罚了对象的简写方式啊?那也就是说在这儿啊,嘿,是不是可以删了去,你这样写多干净啊。啊,Person是吧?啊,那person没定义啊,是person保存,哎,这不就得了吗。
12:01
啊,你看这多精精简呀,是吧,其实就是一个名的问题,对吧?同学你这写佩奇,那你这就写佩奇呗,那莫不如就直接叫做count对吧?好,这是一个优化的地方,你看reducer呢,给它折叠起来,哎,就差不多了,说老师reducer里边这person这里边没有什么文章可做了,咱们直接写的时候写的就是比较标准的是吧,好了,关掉。And reduce的事儿呢,咱说完了。咱再说哪呢,Action。同学,随便打开一个,比如说count action,你觉得这里边有哪块不合理的地方,Create increment action,觉不觉得这两个词create什么什么action觉不觉得有点太重复了呀?随着你的代码增多,你就一直在写create什么什么action,什么什么action特别烦,那所以说我们怎么做呢?来,撤回来,我们这么做,把那俩词儿都省略了。这不叫create increment action,这叫叫一个词,你是不是想加就increment就得了,不用再说创建increment action,哎哟喂,太麻烦了,说老师那不行。
13:07
你这一写increment,我哪知道它是干嘛的呀,看文件呀。你是不是在action里,那你说它是干嘛的吧,肯定是创建加的action,你这儿呢,是不是呀,得了嘛。那你这呢,什么创建加的异步action,哎哟喂,真麻烦,咱就直接说increment啊,Think完事,那这儿呢。是不是得调用那个同步action,是不是得这么写呀,哎,OK。他说老师行,写完了,哎,你光改这就行吗?不行啊各位。咱说了有一个地方。加就得对应加的action,减就得对应减的action,那你说来到容器里边,你找到count,你来到这儿。加就对应家的action,我想问各位,还有这action了吗?还有了吗?没了吧。哎,那咋办呢?这也没了,这也没了,那就划到最上方,咱去重新引入去,这仨东西都没了,那取而代之的是什么呀?
14:09
Increment,还有rement,还有crement think,这不就得了吗?那这就不用写的这么长了呀,啊,改叫啥increment。完事儿,这叫啥?Rement,这叫啥increment s是不是就可以了呀?啊,这样写就能精简一点,稍等,等着它编译这玩意得能用是吧,刷新一下啊,哎呀,有问题了,不能够读取lesss在and find上,那检查一下吧,他说的是哪有问题,注意看这。Count组件。Index里边的第多少行啊,63行,那检查一下吧,Person can't stick.persons.lengths那回头咱检查检查63行咋的了呢?看这person count state,点person's,点S。
15:04
那肯定是这块取的有问题是吧,那来吧,咱试试啊,找一下汇总reducer那一块,找到reducer,找到汇总同学。你原来这写的是不是person思,但你这S1删人家是不不对了,那所以说这改成这改成好person思,那这回人家在读的时候,那你看一下这儿呗,PERSON4这不就有值了吗?你刚才写person人那边就读不到了呀,是吧?来再刷新一波走正常了吧,哎,你自己练的时候,如果也有这问题,同学你就慢慢分析啊,我读没读出来呢,为啥没读出来呢?我看看这汇总的啊,少写S了是吧?来加没问题,减没问题,基数加没问题,E不加是不是也没问题啊好了,回到代码当中。同学,还能再精简?你说啊,这非得叫加呀,这非得叫减呀,这写的太low了吧?加能不能就叫做increment,减能不能就叫做rement?那加AS能不能就叫做increment a s是不是处罚了对象的简写方式啊?那这是不是也可以省略了?这是不是也可以省略了呀?啊,那再往上找来吧,所有之前用到this.prop点加的地方。
16:20
我是不是都得改成this.crement因为什么呢?因为你这啊,你给人改成crement不再是加了,所以说来改走划到最上方,Ctrl f this.pro点加。啊,这几个加都得给它变成什么呢?this.cment但是有一个这个减啊,咱得单独操作一下,那我就自己手动改吧。Equipmentment对吗?啊in好啊,这是家,所有用到家的地方都得改,这是不是这再往下找,哎,加a think,那咱就得改一改了,因为加a think人叫做increment a think啊,那来到这儿是吧,那减呢。
17:07
是不是叫往上滑找到减是不是。诶好了,那你看这回来看你这儿是不是就清晰了不少呀,啊,那你真没办法了,你得自己一点一点取嘛,是吧,那回到页面刷新看效果加没问题减没问题,基数加没问题,等一等再加没问题好嘞。啊,那同学你刚才是从redu里边,Action里边开始改的吧,你改了count,然后这一路就都走下去了,那你说人呢?创建加一个人的action真烦呀,Ad person完事,你这一改,那么加就得对应加一个人的action,那你说这儿这儿是不是都得改呀,划到最上方。这不能叫做create a什么person action了,很简单,就是a person。完事儿,复制这个东西往下滑,到这儿别叫它了,是不是叫I person,那你给人家传的时候能不能也别叫做这么low的名字,加一人呢?那叫什么呢?是吧,I person呀,那是不是又重名了呀?那这是不是删掉了呀?所有用到加一人的地方不要再写this,点加一人了就叫做I person,但是你可要注意,这有I person,那是本身的方法,这有一个I person是它的容器组件,是不是传给他的?诶,就这回事好了,回头看代码刷新加一个人。
18:33
Q we 12岁走也没问题吧?哎,那我们就把哪儿改完了呢?Action,那么顺带着容器组件是不是也改完了呀?来,同学,我们整体搂一遍,这是一个最终版本了,折叠全都折叠,打开s RC index,长这样。要用provider进行包裹,APP是那个整体的外壳组件,APP里边非常简单,你只需要引入容器去渲染就可以了。那么逻辑都在这儿呢,对吧?Res,这就是store的最终版本,没有引入那么多的东西,Create store,创建store apply midware干嘛的?执行中间件的reducer,那这是什么呀?一定要注意,这是汇总之后的reducer,对吗?那这个thank呢?用于支持异步action的,那这个呢,用于支持开发者工具的。所以说同学以后的项目当中,Store里的写法其实很固定。
19:29
啊,这个常量里呢,不需要有什么改变,你就一个一个配置就可以了,然后值得你注意的啊,Reducer里边。什么点GS就是谁的reducer reducer也不是什么高级的东西,它就是个函数,接收之前的状态,根据不同的动作给你执行,哎,不一样的这个事情,而且你要注意就是这个里边同学一定不要这么写,Reducer是纯函数,这个概念一定要根深蒂固,Reducer是纯函数,不得改写参数数据,你这么一写,那不改写了吗?
20:03
那index呢?Reducer这个文件夹里边一定有一个index干嘛的?不做别的,就是汇总。汇总之后呢,交出去啊,尽可能的我们去触发对象的简写方式,尽可能的去触发啊,然后回到ACTION4里边,那这里边同学不用写的那么麻烦,Create什么什么什么action。写时间长了,你会觉得带有create带有后缀的action特别烦加,就说加的就得了,你都写在action里了,你就明白这玩意就是管加的action,这是管减的,这是管异步的,完事是吧?那最主要的是容器组件里边,我们其实更关注的是这个里边,对吧?那这个里边来吧,同学,一个组件要跟re打交道怎么办呀?首先第一步是不是引入connect,第二步是不是映射状态,第三步是不是映射操作状态的方法,而且这个方法里面是不是要尽可能的去触发对象的简写方式。
21:00
啊,那你这么一写啥后果呀,你这是容器就交给了自己的UI,一个方法叫incment,那咋调啊,this.process.increment就可以了,啊,这是count,那这呢是person,那划到最后你看映射状态,这呢,映射操作状态的方法,其实在这儿你可以再写的好看一点,就是把它写成一行,对吧,不是特别多可以写成一行吗?在这儿OK,这不就搞定了吗?映射状态操作状态的方法,那上边呢,您该怎么写组件就怎么写组件,对吗?同学就是多引了一个action,以及最后我暴露的时候做了一点手脚,暴露的是容器,这不就可以了吗?啊,那说到这儿呢,同学,我们整个redux里的东西呢,就都给大家说完了啊,我们最后再来一个刚才的这个小记啊,给大家补在readmi里边,那就不是第七个了啊来往下提前我就写好了啊,这是第几个呢?第八个了啊,最终版,那最终版就是。
22:01
所有变量的名字尽可能要规范,尽可能的触发对象的简写形式。reducer这个文件夹中要编写一个index.js,专门用于汇总并暴露所有的reducer。所以说刚才我的最终版同学只是多了一个文件,就是reduce里的index.js,剩下的那些就是一直在改方法的名字,尽可能的处罚简写形式,仅此而已,对吗?好,那这一小节呢,如果大家也能拿下,最终你能把这个src里的最终版啊利用呢,这一个小时左右啊,都能给它写下来,那还是比较不错的啊,多加练习啊好了,那我把这应用呢,停一下,我把这src呢,CTRLCCTRLV再来一个命名,为什么呢?九哎九_src下划线,那叫做什么呢?三个字最终版,最终版就可以了,那说到这儿,我们整个redu的学习呢,就到此结束了,哎,这小节呢,我们停一下啊同学,关于改名这啊多聊几句,你必须同学你觉不觉得你得对文件熟悉,谁改了会影响哪里,你是不是才能改下去啊。
23:17
那说老师我也想明白,就一说改哪儿我就知道,我得去改,那那就得要求你得把前边这些版本一个一个都好好练了,对吧,好,这小节停。
我来说两句