00:00
好,各位,咱继续,目前呢,我已经能在person组件里边获取到这个人的名字,还有这个人的年龄了。那接下来呢?不想做这种无聊的输出,我得把这个人的名字和年龄是不是得交给Rex?那也就意味着redux里边不仅仅要保存刚才count组件求和的那个数字了,是吧?刚开始是零,后边可能变成13579什么的,那还得再多保存点东西,是不是就是人这些数据啊?那你觉不觉得回到代码当中,组件你确实是准备好了,那么是不是得为person组件去准备一套redux相关的东西啊?那就折叠起来吧。打开redux。同学,我们从下往上去看。哎,先考虑死道里边我们用不用改什么东西,先观察观察。
01:02
好像目前来看。也不用改什么东西,是不是a store啊,A apply where啊,什么reducer,诶好像也不用改什么是吧,那就把store先关掉。你说常亮这里边我加不加点儿东西呢。得加。你这为什么写increment和re,那是因为回到页面,你的组件里面确实有加这个动作,有减这个动作,有一种行为,你说对吗?好,那你说我这个person里边有什么行为啊,是不是有添加人这个行为啊。那所以说同学你觉没觉得康。就这个文件里边啊,这个constant这个常量文件里边配置的都是你要做事的类型,咱之前是不是就写好了type。那所以说同学你是不是得在这再配一个叫什么呢?不叫加不叫减,叫做增加一个人,那所以说我们就叫做爱的下划线person,那在这儿呢,就得把这I person粘过来,把它调成小写的啊,那套路这不都是固定的吗?哎,添加一个人好了,常量准备好了,关掉,接下来呢。
02:16
是不是得准备action呢?右键新建一个action,是自己是自己的,对不对?好了,We person,准备一个action。同学,X里边写啥?你还记得吗?打开炕瞧一眼。是不是得引入常量啊?然后是不是得是创建什么什么action呢,然后拿到一些东西,哎,然后在这,哎说你要干嘛干嘛对吧,那如果你记不住的话,你可以把这些行给它复制过来,但是我们尽可能自己写一下啊,首先来第一步咋的是不得引入常量from当前路径下的不行了,点点杠翻出去找到常亮。
03:00
我对人的操作只有一个增加。没有删改这些东西,那所以说引入谁就够了,At person先不嫌那复杂,常量准备好了,接下来呢,Export是不是得暴露一个叫做create。A person action呢?这个名字最后咱都要改掉的啊,我只说在这先这么写着,Create a person action。我这么一写,你引入这个东西的时候,你就特别明白啊,知道了这个东西就是创建人的action,其实你知道真正它应该叫啥吗?它就应该叫person。老师,那咋区分呢?都在action里了,那你说它叫啥,它啥意思?哎,但是我在这先不这么写啊,来走port啊create,那这应该加一个cost是吧?哎,定义这个变量来等于它是个啥类型,是不是函数。好,能接到一个什么信息呢?同学,人是不是得是一个对象啊,啊,人是一个对象里面包含什么呢?Name as,那所以说我用这个行参叫person obj。
04:08
是不是人的对象?哎,我不想用什么data啥的,我就想用person OJ能让大家知道啊,这东西呢,是一个人的对象,那接下来呢,走。咋办?是不是得默认返回一个对象啊?哎,走起,那么type类型,同学,你是不是想增加一个人呢?那上边的常量得用上是吧?Person好了,Date是不是真正的数据?那把哪个数据加进去呢?那你得给我一个人的对象呢,是不是在这呢,啊,Person o BJ啊这落了一个S,补一下person so BJ好。来那写完了,那这写好一个注释叫做创建增加一个人的action动作对象。好,写完了,也暴露了action准备好了,接下来呢,各位。
05:03
你一定要一步一步跟着我来REDUCER4同学,这个东西可重要了,你说对吧,没有了它,我们的初始化状态呀,我们后期对状态的操作呀,你是不是都没办法进行了呀,所以说怎么办?右键新建一个person.JS老师,那你这person是干嘛的?你说我放在reducer里了,你说它是干嘛的呀?是不是肯定是对人进行状态的初始化,以及后续人状态的加工,你说对不对?好,我想存储一堆人是不是得是个数组?好来走着各位,咱不看这count,你自己练习的时候,如果说老师我实在忘了,那你可以看一下这个count,咱自己再写一下同学,Reducer是什么高级的东西吗?不是,它是不是就是一个普通的函数,你比如说叫做person rer,走。是不是得交出去port?
06:02
你就暴露一个是不是可以default。好走,他能接到什么呢?是不是一个是state之前的状态,一个是action动作对象?那同学你是不是得对之前的状态进行一个初始化呀?是不是从第二次开始才有之前的状态呀?那第一次呢?Pre state为find,那我们固定的套路是怎么做的来着?Cost init state,初始化的状态吧,初始化的状态同学你要想好,在count组件里边,你的初始化状态是不是那个零,为什么?因为你的count组件就是玩这数字的,就是对这个数字的增啊,或者是这个减是吧,那我们现在的person你注意了,我想存储一堆人呢。你那数值倒简单了,一个数值就搞定了,我现在是不是要存储一堆人呢?那咋办呀?
07:00
那你就得是一个数组。你觉得呢,完了数组里边是不是放置一个一个的人呢?那我先写一个人,同学,我先写一个,诶有一个初始化的人,这人名字呢叫Tom,这人年龄呢,18岁。那18岁好。那同学你说人是不是也有一个ID呀,对吧,唯一标识你可以在页面上不展示这个ID,但是它得有,对吧,你比如说第一个人我就写一个001好。那这怎么写,是不是这么写?那这里边干什么来着?大家还记得吗?结构赋值从action动作对象上拿出来两个东西,一叫type,二叫date。接下来进入Switch case,判断对吗?判断谁type。那这就得哎区分一下,诶回来啊,来到这儿就得区分一下,就得想一下你这个type类型如果是怎么的我就怎么的,那同学我对人有几种动作呢?是不是只有一种动作,就是增加一个人,那from咋写,是不是得引入常量点点这翻出去找到常量。
08:13
哎,那这怎么写a person呢?你这不得判断吗?那咋的,你自己在这写呀,写引号完了ad下划线,那你万一写错了呢,是吧,所以说同学都是固定的套路,那你看这是不是也引入了加和减,这是判断的,是不是也是加和减呀,那所以说在这呢,那准备好常量了吗?A person,那这走kiss啥at person。如果你是增加一个人,那你说怎么办?Break,咱也不写了,增加一个人你说怎么办?原来你对数值进行加和减的时候,你是不是直接返回之前的值加上这个值啊。那你说现在呢?我咋办?你哎,你直接这么写能行吗?Pre state完了我就加data,老师,我觉得这样行,行吗,哥们。
09:05
这我问你啊,如果说从第二次开始算的话,你说第一次传的时候,它是不是已经是一个人的数组了,同学往数组里边多加一个东西,用加号啊。不对吧,你说这是啥?想data是啥?Date是不是action在这儿给你创建的一个人的对象啊?数组里边加一个对象,哥们儿,你用加号。不对吧,原来已经是一个人的数组了,初始化本身就是一个数组,想在数组里边加一个人,而且我想有一个要求,就是后加的人跑到前面去,那怎么办?同学可能想到on shift对吧?我在这不用shift,我这么写看大家能不能理解啊,你是不是带过来一个date date里边的是不就是一个人的对象啊?OK date点点点state,这不就搞定了吗?
10:04
同学,这什么意思呀?这是不是之前那个人的数组,我通过展开运算符,是不是把它展开到这儿,这是不是我新带过来的人的对象,是不是加在最前方,这一行不就搞定了吗?是吧?好,那default这怎么写呢?是不是得写return返回的是不是state同学人的reducer是不就写完了呀?哎,想想,如果同学你觉得这有点生疏了,那一定是你之前没有练到位这个。Reducer干嘛的呀?同学,咱分析reducer干嘛的?专门负责初始化状态和加工状态的对吗?初始化状态是不是在这儿体现好?写好注释,这一行就叫做初始化人的列表。
11:00
对吧,OK。啊,那这儿呢,根据你的判断,这写好了叫做若啊,是添加一个人,那你就得这么做呗,原来的展开运算符摊在这儿啊,把新加的放前边儿,那不就得了吗?好,完事了,那把这些呢都关掉。那同学,你觉不觉得我已经为人这个组件准备好了?他的action,准备好了他的reducer,也准备好了它的常量,对吗?那同学,你想想,接下来我们要干嘛?同学,接下来啊,你得来到你的组件里边。你是不是得保证拿到人的名字和年龄之后,是不是得包装生成一个人的对象才可以啊?啊,那怎么生成一个人的对象啊?那来吧,Cost准备好一个person OJ。
12:02
啊,等于是不是一个对象,那人的名字就是这个名字,年龄就是这个年龄,那我问一下人是不是得有ID呀,而且这个ID最好是不是一个唯一值。你用时间戳随机数都行,但是咱之前练过有一个更好的选择是不是nano ID nano ID还可以为咱们生成一个随机的,并且是唯一的这么一个ID,那叫nano ID,之前咱在做那个todo list的时候,是不是用过这个呀?嗯,好了,稍等安装完了给这关掉,怎么用的大家还记得吗?Import引入划括号from哎哪啊,Nano ID。是不是引入nano ID,那在这儿是不是我可以直接就调用这个nano ID就可以了呀,最终把这个东西输出我们瞧一瞧啊,回到页面。
13:06
输入刷新一下,输入Tom年龄12岁走,你同学ID是不是生成了唯一的有名字吧,有年龄吧?好,那你就已经把person这一整套的东西都准备好了,人的对象包装完毕,关掉人的所有,这套东西是不是也准备OK了呀?好,别急,我们分好几个小节去讲这件事儿啊,这小节我们停。
我来说两句