00:00
好嘞,各位,我们接下来呢,继续去写。Person组件准备好了,已经包装成一个人的对象了。折叠。Person组建的这套东西呢,也写好了。来,那咱们开始。同学,首先第一步你先实现在页面上展示初始化那个人的信息。我现在写的是一个假的列表,对吗?各位回到代码当中。那我想问你,Person这个组件初始化那个人的列表里面有几个人呢?那人都叫什么名啊?你是不是得找reducer问起,因为reducer是专门负责干嘛的?初始化状态和加工状态对吗?找到person。好,初始化的,他里边是不是有一个人名叫Tom,年龄是不是18呀?
01:01
好。同学,你写到这儿可能会感觉,老师,那就开始吧,人这个组件就要跟redux打交道了,我就得引入connect啊,就得引入一些什么,你别急,同学。我先跟你说。你人的这个reducer啊,是不是负责初始化和加工状态的呀,加工人的状态对吗?同学,我告诉你,这个函数压根没执行,你信不信,如果这个personr它执行了。我问你是不是得输出这个东西。好。那我这么写person reducer,艾附井号,艾附井号,好把这个复制来到count的reducer,是不是在这儿呢呀来。把这段代码粘过来。Cant reducer,艾特福井号,艾福井号两个reducer只要被调用,是不是分别输出自己的名字,加上艾特福井号好的。
02:08
回到页面控制台,我们看效果刷新。同学,你发现谁的reducer是正常执行的谁?是不是count的reducer是正常执行的,而你刚才写那person,各位是不是它没有执行?所以说接下来你不要再接着去写代码了,不行了。你新创建的那个person reducer都没发现,人都没执行吗?那怎么办呀,想想。凭啥他执行了?同学们为啥他没执行呢?这个问题的答案呢?你需要去道里边寻找,好,关掉,我们来到道。同学注意看啊。我在死道当中。引没引入这个reducer,引入了,我就怕到这个位置大家说不明白,所以说我之前写的非常详细,引入为谁服务的reducer。
03:10
为谁呀?Count,而且我还真的是引入了reducer里的count,而且我就连名我写的是不是都是count reducer?那我想问在座各位的一句话啊。我引入R了吗?那我引入了吗?同学,Create道是不能创建出来一个star对象。我想问你的是,你在这儿是不是只是说了can't reducer为star服务啊?你有指定person reducer吗?嗯,没有吧,回到我们这个图里边来看同学是不是得有多个reducer同时为star服务啊。没看人写的是reducer吗?那你刚才只是给谁传过去了,是不是can't reducer啊?
04:02
你有把personr传过去吗?没有吧。所以说,目前能为store效力的只有count reducer,你person reducer压根没工作。那咋办?回到代码当中。你猜应该怎么办?老师,我明白了,就是在这儿啊,再来一下。然后我就引入reducer里的谁呢?Person。然后我改个名呗,老师这叫做什么呀?Personr,然后老师我不用它了,我用这个。行,你这么写personr能工作了,但是谁废了?嗯,Count组件不要了呀。哎,说老师那这怎么办呢?那要不咱这样吧,我传多个参数进去对吧,一个reducer,第二个reducer。
05:01
这都是你的想法,保存回到页面看效果刷新。不能这样做。不可以,他不让你传多个参数。那怎么办?老师那就不写了,那就写count reducer行,那你回头刷新是对的,但是你这个组件根本没有reducer为他服务,你说是吗?那咋办呀?来同学引导大家一波,你说如果说红色的椭圆是Rex。请问redux之前保存的是什么?就没写person组件的时候,Redux保存的是什么?我这样,我把redux呢写在这儿,就代表这个椭圆就是Rex。想当年啊,各位,想当年你没有写person组件的时候。我可以这样讲,你那个里边呀,保存的不是数组,不是对象,就是个数值,随着你这边加呀减呀,这边的值就开始变化,可能由零变成一啊,可能由一变成二,你说对吧。
06:16
好。这是Rex只为一个组件服务的时候。是吧,哎,他写了零,那你想这么一个问题,现在我是不是写了person这个组件。如果说count组件说来兄弟啊,你帮我把那个求和存上,那行我帮你存来写上存了啊,你那和多少啊,嗯,和是零好。Person组建,这个时候说,兄弟,我也需要你帮我存。我需要让你帮我存一堆人的数据,一堆人的数据是不是得用数组啊?好。同学们,你想现在Rex保存的总状态是啥呢?
07:02
里边有零,有数组。那你思考一个问题。P组件从里边取东西的时候,他想取零,它得怎么说呢?你有没有一种感觉,你取不到那个零?你这么写,同学,Redux就是一个乱七八糟的盒子,里边存储了一堆一堆组件的各种各样的状态,你想取数零,你发现你没法取。因为这里边一点数据的结构都没有,你觉得呢,是吧,各位。啊,那比如说别的组件说了,哎,换个颜色说,我这里边儿我想存一个对象呢,啊,那组件还说了,那组件说说那不行啊,我这里边我还想存一个字符串呢,好这么多人往里边存东西,你觉得能不能就这么没有章法的存啊同学,不可能吧,你这存进去可以这样讲,这对象废了,你再也取不出来了。那你想想,如果让你设计。Re,保存一个组件的时候,我可以这样讲,不需要什么标识,就是个数值就得了,你只要掉了这个东西get state,它就把零给你,你说对吧?各位,因为我不存别的,但是目前是来撤回来,目前是有这么一堆,你觉得同学让你去设计这个里边,你觉得用一个什么东西存最合适呢?
08:21
在JS里边想用一个集合类的东西,把东西都存上,同学无非两种选择,一个是数组,一个是对象,你说对吗?好,再分析同学,如果你用对象去存储这些东西来redu,我还写在这啊,小写的哈,嗯,如果你用一个整体的对象去存储。那你说是不是这么一个模式呢?哎,对象,那走写在这儿吧哈。
09:00
这是一个大的对象开始,这是一个大的对象结尾,对吧?来往里存东西,首先存入东西的是count组件,想把自己求和的那个和存进去。你这是不是一个对象啊?对象里的东西,我问大家是不是都是一组一组的k value,所以说它得起一个K,比如说就叫做count值呢?零是不是存进去了。然后有一天呢,Person说,我也想往里边存。我想存一堆人,那我那一堆人呢,我也起个名字啊,我的名字叫。PERSON4它是个数组,好同学你觉不觉得这么管理,我不管你有多少的东西需要存这个格式啊,始终都是K冒号value,比如说K1冒号VALUE1,那再往里存我也不怕,就是K2Y62,你说对吧?好,这是用对象去存储,如果说person组件想取出求和那个和,请问怎么办?
10:10
是不是来到这儿,他得说话说请你把这个count呀,啊,我根据这个K去取出这个value吗?请你把count给我。那我问一下你说呀。是不是就取出来了,是不是就给person了,如果person想取出某一个组件存入的别的东西,你比如说想存啊,想取出这个Y62,是不是得根据K2就取出Y62了,哎,画反了这箭头,这箭头是这样的对吗?各位。哎,这是通过对象去存储,那你再考虑另外一个问题,就是如果它通过一个大的数组去存走写文字,这也是。也是redux,哎,注意了啊注意了,如果用一个大的数组去存,那就是。
11:01
数组开始。数组结尾,好来往里存啊,诶缩小一下啊,缩小一下count组件说了,我要往里存东西,来走吧,他说你存的是什么呢?他说我想把零存进去,好来存零走,由于是数组啊。不能有k value的这种形式了,零好了,走。那然后啊,这个person组件说了,我想把一堆人呢,我存进去,他说行啊,你把数组给我走数组,如果说有别的组件想存个字符串。换个颜色啊。粉色诶,这没了是吧,来写一下,这是一个数组,好换颜色变成粉色。又是一个组件说了,我想存个字符串,那就走字符串啊,这我得补一个蓝色的小逗号是不是,嗯,走。那还有一个组件说了,我想存一个对象来走,你是不是写一个对象行,你存起来挺爽的,你往出读的时候,各位你想一个问题吧。
12:06
T组件想把那零取出来,你是不是得通过下标取值?那你就得知道这么一堆组件往里边存东西的时候,谁是第几个存的?第零个你好记对吧,最开始存的,那你说中间这些呢,难不成你还问问去,你什么时候存的?所以说同学,综上所述,如果有多个reducer要工作的时候,那是不是证明redus其实他要管理多组状态,那你说最好的办法是不是用一个对象去存储所有的东西啊?好。啊,这块大家要接受得了,就是说redux如果只为一个组件服务,就比如说同学就为这个count组件服务,那就来吧,什么对象啊,我就是一个大写的数字零完事,但是现在是多个,是不是都要存呢?必须得用对象的结构,取出值的时候也方便呀,对吧,根据T去取出Y6,好,所以说同学redux目前帮我们保存的总状态一定要写成什么东西才对对象。
13:22
好。那回到我们的代码当中,说老师,那接下来我懂了。啊,就是存的呀,得是一个什么呢?就是一个总的状态,得是一个对象,那老师接下来这个代码它怎么写呢?是呢,这radio在这呢,这radio在这呢,那代码怎么写呢。同学注意了,不是说你把reducer多次的传一个,我再传一个一堆就工作了不行。你得经历这么一个环节,就是合并reducer。好了,走,你需要从redu上引入一个人,这个人的名字就叫做combine reducer。
14:10
那么你想一想啊,Combine有什么意思?Combine本身就有组合的意思吧,有合并的意思吧,Reducer丝是不是一堆reducer?哎,好了,所以说同学,你在跟store建立联系的时候,别说A家的reducer,也别说B家的reducer,你说谁其他人都不愿意,那你这怎么办?你得传一个总的all reducer。那么总的reducer从哪来呢?从这来cost all reducer从哪来呀?Combine reducer s,它是个函数,要调用。啊,要调用是不是得合并多个reducer啊,你注意这里边儿传一个对象。
15:02
这个对象是什么呢?我要说三遍,这个对象是什么?因为它太重要了。我们刚刚是不是说了各位redux帮我们保存的总状态是啥呀?是不是一个对象啊好。说第一遍combine reducer传入的那个对象。就是Rex帮我们保存的总对象。再说一遍,Combine reducer调用的时候传入的那个对象,就是redux帮我们保存的总总的状态对象。第三遍,Combine reduce传入的那个对象,就是redu里边保存的那个总状态对象。所以说同学read里面要保存什么呀。要保存两个信息。求和的那个和那个数值,还有就是person组建的一堆人的数组,对吗?好,所以说开始起名。
16:05
你这个对象里边是不是得写一组一组的key value,那就丁算你写的就是redux帮你保存那个总的状态对象里边的那一组一组的key,这是K后边VALUE6,这是K后边是VALUE6,这个key您随意发挥,你在这叫佩奇都没人管得了你。好,那我就写着,就叫佩奇。啊。那但这么写吧,一会儿大家就晕了是吧?同学你知道存什么呀?嗯,先存的是不是那个和啊,来写和这行吧,对,就这么喽,就先这么写着啊,我要都写count,同同学满屏的count count的reducer count的action count的组件,再来个count的属性,那就懵了,我这就写和,请问这个和从哪来?嗯,谁以后能初始化这个核,谁以后能加工这个核啊谁呀counter。
17:04
是不是还得保存一堆人呢?来写人死对就怎么low,人代表一个S,代表复数好同学,谁能初始化一堆人,谁以后能对这一堆人进行增加操作,是不是person reducer?好了,同学,请问这个时候redux所帮我保存的总状态对象初始化的模样你已经知道了,长什么样初始化的模样我们知道了。首先K叫做和初始值。由于countr。说了初始值是几零,好写零,那再往下。人40。确实有点low哈,人死走是啥呀?那你得问问他去,他是专门初始化人的,以后加工人的。完他说了,刚开始值是空数组吗?不是。
18:03
是有东西的ID是什么什么是吧,完了那个名字大家还记得吧,是Tom,好,然后我再写A18岁好了,屏幕放不下了,你明白就好是吧,OK,说老师,那这就行了呗,就能帮我保存所有的东西了呗,对的。哎,所以说得汇总reducer,汇总所有的reducer,变为一个总的reducer。OK。啊。说老师那听你这意思,现在这个person reducer就能执行了呗,是的。我们看看能不能执行。回到代码当中刷新一波,好说,老师啊,报错了,同学,别急别急,先别看这报错,你看这person reducer执没执行。
19:04
好了,执行了。那直行了,来,我们回到这儿。就在reducer里边,把这行先注掉,把这行也注掉,要不输出的东西太多了是吧,好了,确定了,这哥们真执行了。能帮你初始化一个人了啊,以后也能帮你去增加一个人了,OK。这哥们儿挺给力的是吧,执行了,但是我问一下为啥报错了呢?同学,这个错误,我之前带着你看过来,我们读一读各位。Object是不能够允许作为react一个节点的是吧?啊,Child是孩子是吧节点的,也就是说同学你犯了什么错误?你把一个对象要往页面上放不行。那问题出在哪儿了呢?来,关掉这个问题呀,出在这儿了。
20:00
同学,你说你在死道里边,一旦啊,你进行了这个操作。那你觉没觉得re,之前呀,你没写person的时候。人家那re啊,日子过得挺消停的人就写了一个,诶啥呢,就是一个零,完了以后这数字就来回来回变了,但是由于你刚才合并了reducer,你就把redux里边保存的总状态,您是不是就变成了一个对象了呀,好。说老师那里边存的东西就由原来的零,现在就变成了一个对象了呗,那能怎么的呀,能能怎么的,同学回到这儿你就明白了,我们找到count组件。打开它往下滑。我问你这个状态是啥?这个状态就是redux帮你保存的总状态。这个状态,当年人家就是一个干干净净的零,那所以说。
21:01
就是那个零。你这写count啥意思?是不是传给自己的UI了?但是现在由于你合并了reducer,所以说同学这个总状态还是那个单纯的数字零吗?不是了,那是啥呢?你告诉我是不是一个对象对吧?对象长什么模样啊?对象里边有几个属性,首先第一个属性叫和值是吧?哎,是什么?一会儿再说是吧,其实就是初始化的值,以后可能变,那初始写好了吧,是不是就是零。好,还有啥,哎,就你写的那么low的东西,人死完了里边呢有个数组,数组里边有人,所以说你觉没觉得你在这儿取东西,你没取到位啊。State点和一下子全都对了,打开页面。走。看效果啊,来控制台写好了,右键检查来刷新,各位看东西是不是好了,刷新来走是吗。
22:08
这就是考察点,就在哪呢?你能不能明白?Re,原来里边存的是啥?现在里边存的又是啥?原来是真干净啊,这死data直接来回到这儿,这死date是不是直接就是个零啊,零是不是直接给count呀,嘿,现在呢,是不是点。好了。哦。那OK了,那接下来怎么办呀?同学别忘了呀,你的任务是什么呀?好了,关掉是不是首先得从redux里边把啥拿出来,把那人的列表拿出来,这是不是得变成真的列表啊,那所以说同学。这是一个组件对吗?他要跟打交道了,对吗?那咋玩啊?之前可是总结过的,首先二话不说,是不是得引入嗯,Connect吧,还能暴露它吗?还能暴露它吗?不的了,它变成UI了,小括号,小括号写啥person走这写啥state,你一定要注意这个state是啥。
23:20
嗯,是啥?是re帮你保存的那个总状态对象好,是不是得交出去port default。来这咋写小括号,画括号来想办法把东西传给你的UI好了,我就这么写,非常low啊,我为啥说总是说一堆什么人字什么和,就想让大家做一个区分,来这写一堆人啊,一堆人是吧?哎,就这么写着,一会儿都给它改成标准的,你别急嘛啊同学咋写state点点啥呀啊老师一堆人大叉子不对。同学,你说这写啥?我不能写一堆人,你说写啥啊?老师写person同学在这儿,你是不是不能瞎点啊?
24:09
是吧,你这个T是不是可以随意取值,那我问一下这呢你能瞎点吗?不能,你是不得琢磨好这个总状态对象长什么样啊,长什么样。长什么样?找大找死道长什么样,是不是叫人,哎,那所以说你在这点儿,哎人死是吧,啊好了。同学,这干嘛呀,是不是映射状态?那现在我好像也不需要操作状态的方法,那所以说是不是写一个这就行啊来同学。传没传,自己传没传,给自己的UI传了。这咋办?这Li是不是就别写假的了?来,走起,咋写点杀?是不是一堆人好是不map便利拿到的每一个是不是都是一个人,我就写P了,那在这怎么办?Ren是不是这一堆?
25:13
那人是不是有人的名字呀,别写名字一了,人有名字呀,P点。好人是不是有年龄啊?那别写这假的了,p.age是不完事儿,别忘了每一个是不是都有一个唯一的key啊?来,走起,咋写就用p.ID它不香吗?是吧?好了,保存。回到页面看效果,刷新一波同学,人出来没好来继续走,输入名字,比如说叫做Tom来输入年龄,12岁来添加,你在这是不是还打印log呢,不行。回到这里面,咋写,是不是得映射操作状态的方法,这一切的东西都得建立在之前的东西,你确实练了对吗?好,来,走同学,起个名吧。
26:01
我就这么写,加。一人,哎,对,就这么写,加一人来,后边儿什么你干什么事,是不是就对应什么的action来往上走,引入谁的什么action引入from哪。点点杠是不是翻出去点点杠再翻找到Du,找到action,谁的person干嘛创建加一个人的action对吗?好。往这放对不?那这东西传给谁了呀?是不是传给自己的UI了呀?这段东西同学咱好像说了两遍了吧,哎,好,传过去好,那接下来怎么办?别在这做这种无聊的输出啊,This,点点加一人是不是调用把人丢过去完事?好看效果回到页面刷新加一个人,比如说他叫做Jerry。
27:03
年龄呢,19岁点击添加走,你加没加进去OK了吧?同学,我问一下人的数据是不是在redus里边存着呢?我能读出来做展示,我是不是也可以操作呀?好了,这是不是就可以了呢?啊,来同学。再做点细节上的事儿,我添加完了,先把这个清空,咋办回到代码当中。在这儿开始写。this.node name node.value。等于空这儿呢,把它写一下,这我们就不做什么太多的这个优化了,先写着,先让他把东西能跑得通对吧?来刷新看效果,Jerry年龄19岁,来走起OK不?好,那同学现在是不是这么一个状况啊,来,走,Redux是不是往这一摆,哎,求和的和我问你是不是存进去了一堆人,我问你是不是存进去了,哎,然后呢。
28:10
啊,然后人还是读自己那一堆人啊,完了求和呢,还是读自己那和,这就没意思了,接下来我要这么实现。这个count组件呀,要读出来这里的人。这个人组建呀。要读出来这个里边的什么呢?求和。也就是说,我想在count组件后边来一逗号。下方组建总人数为。我想在person组件后边来一逗号,上方组件求和为。这数据是不是就打通了呀,是不是就交互起来了呀,来吧,那咋写呀。说老师那我不会了。同学,非常简单,你就本着一个原则,现在redux所保存的东西是什么样的总状态,什么样的对象吧,嗯,里边有啥和里边还有啥人似对吗?一堆东西都在这儿了,你想要谁你就拿谁呗,你比如说count组件,想拿总人数咋办?
29:24
那就默默的。来到这些都折叠啊count组件里边它是啥?刚说完之前就说了,它是啥?是总状态,那总状态里边有啥呀?是不是有一堆人呢?那好了,来同学,来一个逗号,这叫做人数冒号,你告诉我咋写吧。啊,如果可以发弹幕,你弹幕走一圈,你告诉我这怎么写,同学,我看你真怎么懂没懂state是不是总状态点里边有啥,是不是人是完了点它是个数组吧。是不是长度,这是不是人数。
30:00
好,传没传给上方的UI,传了UI里边怎么办?来一小逗号在这儿来一小逗号咋说?下方组件总人数为咋写this点啥?你传的是啥?嗯,你给你的UI的是啥?是不叫人数,那这东西挺多的。是不是可以敲个回车,走这儿写啥人数,完事保存,回头看这儿刷新一波。下方组建总人数我我想放在这儿,那就给他调一下位置,把这一堆。带走,往这一放,写逗号。回到页面刷新。下方总人数为一,确实是一个好同学,你再加一个人,Jerry年龄19岁,点击添加走,你这是不是多了一个人,这是不是就涨了一下同学实没实现数据的沟通好没完,在这来一个逗号说上方求和为走。
31:13
回到代码。找到person组件,你只要想要状态。同学,UI组件想要状态,你就找自己容器去,容器这块已经握住了所有red里的状态,对吗?好了,这咋写?再换个名儿。叫求和的和求和。行吧,那或者这和求和有点有点太绕了,一听求和好像是方法似的,我还叫和冒号,这咋写?总状态点儿。这叫count吗?老师,我忘了,没事儿忘了就找,找到reducer啊,找到这个star是吧?来看这是不是叫和,在这别瞎写,是不是叫和。
32:01
好。这个东西是不是传给了UI咋办?来到这儿写一个小逗号,叫到啥上方组件求和为来开始写Z点谁谁。到底写和还是写啥,是不是得看这传的是啥?别看这,这是总状态里的东西,对不对,这是和,好嘞,复制各位走和。回到页面刷新看效果。上方组件求和是不是为零?好,我开始加你发现随着我的加呀,不仅自己这里在变,这是不是也变,那你看来点加走,你看看点减来走是吧,那我加一个人随便写个qwer来,年龄12岁添加,这是不是也变,这是不是也变,同学是不是完全实现了数据的沟通啊好。同学,我们就完成了这个数据共享,但是这里边儿有很多的方法,这个名字都太low对吧,还加一人啊,那一会儿我们单独开一个小节,把这些东西整体进行一些修改,现在我为什么非得写的这么low,为什么非得在这里边就是和人四只想让大家明白谁到底是什么东西。
33:21
这小节我们停。
我来说两句