00:00
Port组件我们已经准备好了,哎,但这只是一个精彩的一个组件。我们最终想要的是让person组件也能把它的这个状态存到这个redu中,而且能从re中去获取这个数据,而我们上面的这个已经是在使用redu,那接下来这节课我们让这个person诶也去使用这个redu,那我们先进行一些前期的一个准备啊。他在这个基础上来看一看person,如果要去使用这个。需要进行哪些准备,看一看我们之前的这个。这里面的这些文件啊,我们一个一个看,从套里面开始去看。哎,这里,呃,不用配置什么对吧。那接下来再看这个X。那这里我们有一个看X。用来。处理这个count这个组件,它相相应的一些,呃,行为和操作。
01:00
那是不是我们还得为person去创建一个action?我们新建一个啊。文件啊,Person。加JS,哎,我们不用带这个action前缀,本来就是在这个目录下面,大家想一想,我们这个action主要的作用是什么啊,主要的作用是啊,为这个组件去生成一个action对象对吧?好,那这个是为count组件生成action对象,那我们这个person这个action,那就是为person组件去生成对应的action对象。啊,接下来看一看,在这个里面我们需要做什么,哎,需要,嗯,去。返回我们的action对不对,但是为了防止这个tap哎不容易去维护,以及可能会写错我们使用的这个count,去把这个所有我们用到这个tap,用这个常量来进行一个维护,所以说那我们这个P组件也是这么去做,那我们得在这个cost.gs里面去来定义我们这个。呃,Person这个人他需要的一些操作的一些类型,我们之前这个求和他有加,哎有加的行为,有减的这个行为,对不对,你看有这个加,有这个减的行为,但是我们这个人有什么人,是不是只有一个这个添加人的一个。
02:09
哎,这么一个行为,我们把这个给大家定义一下啊,Export cost a cost,好,那等于一个什么呢?等于一个字符串,这个字符串我们就小写ADD_person哎,是这么一个行为,好,那在这个X里面,我们就可以去引入这个常量啊,引入常量。常量import引入谁呢?我们的这个ad person。哎,自己就给我们补全了啊,那引入产量之后。想想我们这个action他要做什么,他要去为法,为我们去提供这个。啊,一个X对象对不对,其实就是我们定义了一个函数啊,然后。这边接收一个数据,然后去返回这么一个对象,对不对,哎,所以。
03:04
我们这里也定一下,Person这里也定一下。用于添加人的啊,大型行为来也找对象啊。Export吧,直接给他暴露出去。那么这个名字我们使用什么呢?Person I,诶,当然其实我们直接,哎名字写短点也行,这个名字的话呢,还有变脸名什么的,我们到后面再去优化,现在还和我们之前写的去保持一致啊。来它等是一个函数,哎,可以接收一个参数,那接收这个参数我就不写对的,我们之前是零,我们写对的啊,那这里我写一个什么person。OBG,让大家知道这是一个对象,哎,因为你。执行这个人的一个操作人,他是有姓名有年龄对吧,他是一个对象,哎,所以这里我们也是接受一个对象person或BG,然后是一个建头函数,最后我们要return的是一个Jason啊,是一个对象啊,是一个对象的话呢,等于括号包起来对吧?啊,这个对象里面有什么?有有这个type type就是我们的这个ad at person,然后我们要传到这个数据,Date就是我们的这个person OG。
04:24
那这样我们就写完,因为我们这个人的话,只有一个添加人的一个行为嘛,啊,所以呃,就没必要写这么多,接下来去写谁呢,写这个。Reducer啊,这个reducer这个是最关键的一个东西,它是真正执行,哎和这个,呃,就是说操作数据的一个地方,对吧。啊,我们看看我们的这个countr。好。然后reducer呢,它是专门为这个那个某个组件去提供服务的。那这个是为count组件提供服务的,我们为person组件是不是还得再建立一个啊?
05:01
来新建一个文件。Film。直接就叫P加GS,哎,因为是在这个目录下面,所以嗯,我们也不写那么详细文件名,就这么写就可以啊来。Person啊。Person组件。为P组件服务的。服务的啊,Reducer啊。同样的,哎,我们说过我们这个reducer啊,它实际上它的本质就是呃,一个函数,我们要默认去暴露一个函数就可以了,然后函数可以接收的上一个状态,以及嗯,他要。匹配的这个就是我们传送过来的这个行为action对吧?啊,那这个我们也写一下注释就不写得详细了,Export。Default啊,直接默认暴露就可以了啊。看一下这里啊。
06:01
那这个名字呢,其实呃,也无所谓了,你怎么定义都可以啊,那我们为了这个整整体的风格的一个统一,我们就叫这个person reducer function形。来,给个名字,Person。第一个消息啊。Reducer它接受两个参数,一个是上一次的存在一个状态,对吧,还有一个就是我们的这个X来。在这里面我们是不是要对我们的这个,呃,从这个action里面去获取到这个type,对这个type进行一个。进行一个识别,我们要进行哪些行为的哪些的一个操作,对吧,那想想这个,看到这里是不是要从这个。这个action里面去,哎,拿到这个tap和date,以及我们要。就是说处理的要匹配的一些行为,对吧,那我们这里也是一样的啊,Let也是在这,我们提前把它给解读好,一个tap啊,一个date。等于谁呢?从这个X里面去解构出来,接下来呢,还是Switch。
07:07
Switch啊,Switch还是Switch这个tap啊。KY6,那我们开开是谁呢?匹配谁呢?这个我先等会来说啊,我们先把这个这个结构给写上啊。来,接下来想一想一个问题啊。就是这里我们匹配这个type,要匹配,哎,匹配这个行为,匹配这个谁是不是这样的啊,那匹配谁呢?是匹配我们传入的这个action的这个type对吧?那你看看我们action type传的是什么,找找这个person action是不是传的是这个a person对吧?那这个a person呢,又需要这个常量,所以我们还是得在呃,Reducer里面要先引入常量啊。来引入常量。Input,哎,我们只需要谁呢?只需要这个at person这个常量。然后去匹配它,如果是你要添加一个人的话啊,那我就在这里给你去返回。
08:04
返回一些数据就行了啊,那这个返回什么我们先不写啊。嗯。写什么呢?先先把我们的这个初始化的一个状态给写好,因为在第一次进来的时候就说瑞大层他没有数据,就他把帮我们去初始化这个数据,对吧,我们看到这里面,哎,初始化的时候是初始化的一个一个呃零对不对,但是我们这个人呢,他不是这么不是这个整形啊,不是这个简单的一个数字,它是个对象对不对,哎,所以我们也得去先把这个人给初始化一下,要不然一开始里面是没有的是吧,那这个先控制不知道法为什么先先先先问号先写着啊。来初始化。State啊。Cost。It啊,Person state啊,等于谁呢?我们说了我们这个人呢,嗯,大家来看一看这个图啊,我们人要存很多人,是不是你要存很多人,你看一个人两个人三个人啊,当然还有其他更多的,所以说这里。
09:12
我们要存什么?要存的是一个数组,就初始化转的时候把它数上成一个数组,然后里面我们先放一个人啊,这个人有有ID啊ID。看001,然后有谁呢,有这个。内蒙。啊内先给一个汤姆,还有个年龄是吧,A给个20。这样初始化这个数据我给到谁给到这个T的,就是说当一开始你进来的时候,没有这个状态的时候,哎,我用初始化的这个状态清楚了吗?接着我们去匹配,哎你要执行添加人了,添加人了那这个date是你要添加的这个人对不对?我把这个人添加到哪里,添加到是不是我们初始化的这个这个数据里面对不对,也就是我们的pre对吧,我要把我们新增的这个人添加到这个。就是说return return数据对吧?啊,那我们之前return是求和之后的一个数据对不对,但是我们这边这个是PI类,它是一个数组,它是一个数组,你要把这个一个对象啊,把这个数据放到数组里面,那你肯定不能用加就不合适了,不能用加啊,因为它是一个数组,数组的话呢,你们怎么办,你可以是不是哎使用这个啊,Push写NC这个我们先不用啊,后面再说。
10:24
数组想要往一个数组里面去加入一条数据,是不是还有更简单一个方式,我们可以使用这个展开运算符对吧?然后第一个是我们要放的数据,然后后面是把原先的这个数据给展开放到这里,然后第一个是我们添加数据,这样我们得到了一个新的一个来,最后把这个新的返回就可以了,那既然已经返回到这个break是不是就可以不要了?对不对啊,那我们是不是少少了一个初始化的一个动作,就是一开始没有匹配到任何东西的时候,我们应该。应该我们初始化的这个状态。是不是这样的啊,那是小冒号啊。那我们这里匹配是不是就写完了啊,其实和这个,呃,整体上看是类似的,只不过是因为数据类型的不同,所以我们这边操作数据的方式就不同,好,那这个reducer我们也写完了,哎,接着。
11:11
再来看一看啊。看一下我们的这个。容器组件啊,Person这个容器组件,诶在这里我们点击,然后去获取了这个name,获取了这个A,是不是来看一看这个输出。嗯,我再刷新一下啊啊,写个A,写个一一是不是获取到这个name和at对吧,那我们再更进一步,我们提前封装好我们要存入的一个对象,因为我们的对象它不是简单的name和A级,它还有什么我们要插入这个人的人的这个对象呢,它还有。嗯,在这呢啊。啊,从这点也行。它还有什么,他还有ID是吧,还有name,还有age,嗯。那我们得封装好这个对象,先为我们使用这个re提前做好准备啊,行,太多了,全部关掉一下啊,重新去找,就是这个人的这个组件这里嘛。来,我来封装一下啊,That。
12:02
Person。OBG啊,人的这个对象等于什么?等于这个对象对不对?好,还有谁有ID啊,那还有谁有这个name对吧?Name就是我们的这个name,那名字一样,那直接缩写对不对?好,A级也是都一样,也直接缩写。好,那个写成一行吧,也不是特别长,对不对。来写成一行。嗯,把这个删了啊。来,接下来想想这个这个ID我们怎么来处理。ID,你。不可能自己去去写对吧,我们要保证这个ID的唯一,还记得之前为大家讲过的一个nano ID有印象吗?那么安装一下呀,Ddd。ID啊。这个是不是可以给我们生成唯一的一个ID。安装好之后,我们要在这引用才行啊。
13:01
它暴露了一个拉ID的一个函数,对吧,那我们直接执行这个函数就可以得到这个ID,是不是这样的,我们来打印一下这个人的这个数据,哎,人的这个对象,看能不能拿到这个数据。来刷新一下啊。啊,没有启动,来启动一下start。嗯,等他刷新完成。然后我们来试一试,看能不能拿到这个我们封装好的,哎,得到我们封装好的这个人的一个数据,好丽丽,然后年龄是15评价,诶可以看到啊,我们可以拿到啊,ID是给我们随机生成的,年龄是我们输入的,Name是我们输入的,这样我们就把这个人的对象提前准备好了啊,然后我们这个person相关的这个action。哎,Action也准备好了,哎,就是一个添加人的一个行为的一个action。
14:00
诶,等会儿啊。Export啊,并且也暴露了,然后我们的reducer人的这个reducer也处理好了啊,那这节课呢,我们就先写到这里啊,先简单的先把数据准备出来。在后面的小卷我们再去完成,让这个person去使用Du去进行这个数据的一个添加,以及从Du里面去取出数据往下面编历,那这小卷先到这里。
我来说两句