00:00
好了各位,接下来呢,我们要讲解的就是如何借助redux真正的实现多个组件去共享状态。其实我们目前写的呀,同学你说除了APP这个外壳组件,我是不是也就只有一个求和这个组件啊count,那你看啊,现在这个写法呢,就有点儿意义不大,Count求和这个组件把自己求和的那个值是不是交给了Rex去管理?然后自己再从redux里边再把东西取出来,你说对吧,同学只有一个组件的话,你犯得着这样做吗?是吧,啊说老师那我们为什么这么写呢?那因为我们写的时候只能先写一个嘛,然后再把多个都放在redu里面实现共享嘛,所以说同学一个正确的使用方式呢,应该是这样的啊redux呢,还在这儿这个count求和组件呀,把自己那个和交给Rex去管理。
01:05
然后你比如说在这儿,同学我还有一个组件啊,比如说举个例子叫做person,哎,Person去保存一些人的数据,这个person组件呢,也把自己的数据交给redux进行管理,哎,同学我问你第二个组件是不是出现了呀,那么count组件和person组件是不是都把自己的那个状态交给red管理了呀?那同学我想问你。如果有一天person组件需要去读取count组件求和的那个和,那怎么办呀?是不是从re里边把那和拿出来?那如果有一天countt组件需要读取person组件里那一堆人,那怎么办呀?是不是得从redu里面把东西读出来呀,同学,这样写是不是才有意义呀?你看count的东西person也要用,Person的东西count也要用,这样的话都放在这,那谁想用谁就找redu去拿,这是不是才是真正让redu具有意义呀?啊那所以说接下来呢,我们就写一写,但写之前呀,你要做点准备性工作。
02:17
来同学,你比如说啊,一会儿我想把这个一堆人的数据啊,啊,我有一个组件啊,一会儿叫person,这里边呢,能保存一堆人的数据,我想把一堆人的数据交给redux去管理,那你就想吧,同学,我是不是还得建立这么一个文件叫person action,我是不是还得建立这么一个文件叫personr。那同学你想你就得形成这种文件了,来,写着person。下划线action.js啊,就还得再来一个person_reduce.js。
03:00
那同学两个组件,你这东西就都这么多了,那你说要是十个组件呢,是不是就特别多了呀,而且你总是什么什么reducer什么什么reducer,这看起来就特别烦啊,那所以说呢,来这俩文件呢,我先删掉啊,就是给你演示一下这个情况,那接下来应该怎么办呢。你注意了,如果是成型的项目,他一定会这样做,在red里边新建一个文件夹,叫action。再新建一个文件夹叫reducer斯,好,各位。我就把什么什么action这种文件,你比如说person action dog action car action count action,所有的action就都往这里放。进去。所有的各个reducer就都往reducer里边放。且这个名字你注意,我不再叫count action了,那叫什么呢?我就叫,而且这块我也不叫做count reducer了,我就叫count,那可能有同学说了,老师那你这不行啊,那谁知道你这count是干嘛的呀?那我想问各位,我都放在action里了,你告诉我这count是干嘛的,那肯定是count的action。
04:21
那同理,我都把这个count.gs放到reducer里了,那你告诉我吧,你说这count是干嘛的呀?那肯定是count的reducer对吧?哎,说老师那就改完了不行啊,所有用到这两个人的地方路径你是不是得改一改呀?哎,折叠折叠。好了,说老师这个常量和store这就不用了,道整个应用只有一个对不对?哎,那这个常量呢,那没关系,所有的东西都往这配置呗,对吧?啊,你对人的增删改查,你求和的啊,加减乘除是不是都写在这儿啊,写在一个文件里还挺好的呢,因为你可以避免这个东西的冲突,你比如说你这已经定义了一个increment,你在这再定义一个,它肯定会提示错误的,对不对?哎,好了,所以说常量和道一般呢,我们不进行哎这个分割。
05:12
好了,那从头开始捋顺,找到count同学,你是不是用action了?但是action现在是不换位置了呀,嗯,那慢慢来,同学慢慢来啊,来删掉点点盖。点点杠,找到redu,你是不是要引入action呢?诶,来走,找到action那下的count,诶,这就对了。好,那这块改完了再往下找找啊,这里边都是UI组件啊,没有什么需要改的,那再找到这儿,找到这儿,哎,这块呢,同学我把这些注释我删一删可以吧,因为优化版在这个里边,我已经带着注释了,那所以说这些注释我就可以给它删掉了啊删了好,那这也不用改啥好了,关掉。如果你记不住哪个文件用了,同学你就一个一个的扫对吧,再找redux,那再找到action,看看action里面得用啥,是不是得用常量啊,但是我问一下常量在你当前文件夹里吗?没有,那这得怎么办呀?删掉点点这是不是翻出去找到哪儿常量模块OK。
06:17
啊,那把这个关掉,那再往下找,这是不是有reducer啊,Reducer里边是不是也得用常量啊,那所以说这会儿来删下去,点点杠翻出去找到常量,OK,那reducer里的东西咱就改完了啊,那再往下看,哎,这个里边用不用啥东西啊,好像没用啥,就是定义常量,就是暴露对不对,好了,右键关掉,那咱再往下看,这是不是有个死道啊。哎,这同学你看啊,Store呢,得引入credit store得引入apply madeware,这没啥说的了,哎,这这这看是不是得引入为count组件服务的reducer啊,那你这得怎么写呢?来得这么写了吧,当前路径下的reducer,私下的谁count,哎,这回不就得了吗?应该改的地方那咱基本上都改了,那你关掉这些文件,你打开你的应用。
07:09
你得保证你的应用正常,你才接着往下写对不对,加没问题,减没问题,基数加没问题,E不加,诶也没问题是吧,好嘞,那咱给它关掉啊,所以说同学我还没写另外一个组件呢,啊叫person我还没写呢,只是说把文件结构调整一下,真实项目开发肯定得这么调整。嗯,好了。调整完之后呢,我再开始写我另外一个组件叫做person,所以说我是不是得在containers里边再建立这么一个文件夹,叫做大写的person,那这里边儿存什么呢?那就是人的那个组件呗。好嘞,右键新建一个文件index,点儿GS叉啊,正常写同学正常写啊,RC。
08:01
走名改一下person。老师,你想让这个组件干什么呢?啊,先别急,Person点点点,我是不是得把这person用起来,那怎么用呢?回到APP里边,在这是不是得引入那个person了,Import person from哪呢?当前路径下的container下的谁呢?Person?啊,那由于里边叫index,那就不用再写了,是不是好,那person是不是也得用起来呀,那走着在这儿,哎债确认person是吧,你看一个组件两个组件,那中间呢,我给你用一个HR呢,做一个分隔,哎HR做个分隔。好,那这个时候稍等它编译我们打开页面,我们瞧一下效果啊,走控制台打开。啊,那你看啊,这什么组件,是不是count组件,这什么组件。哎,是不是person组件呀,哎,我是这么设计的啊,同学,你听一下我的需求,然后你才知道接下来怎么跟着我的思维去写这什么组件呀,Count组件,爱求和的。
09:11
这什么组件呀,Person组件,哎,存储一些人的信息。然后呢,我是这样想的,在这儿呢。小写的啊,Re,诶,在这呢,好,求和组件,把自己求和的那个和交给Rex。Person组件,把自己一堆人的那个数组,哎,一堆人啊,一堆人的数组放在哪儿?放在里面啊,他把盒放里面,他把人放里面,然后呢,我想让这个count组件。能够展示出来一堆人的信息。同时肯定也得展示这个哈,然后我想让person组件除了展示自己那一堆人的信息,我想让person组件在展示啥呢。
10:03
哎,再展示这个求和的那个和是吧,所以说咱先写一写啊,写一写不就想完成这个数据的共享吗?啊,你看你已经有了一个count了,你这还有一个person对吧?那他俩的数据打通的呀,啊,互相能拿到对方的东西呀,啊那我这person组件呢,是这么设计的在这。能输入人的名字在这儿呢,能输入人的这个年龄啊,然后在这儿呢,你注意哎,它有一个按钮叫添加一个人。好,然后在这个位置呢,是展示一堆人的一个列表,哎,就这么一个效果啊,来,咱先写一写,同学先把呀,Person组件这个静态写完了,来回到代码当中写写吧,关掉APP,哎,找到person写着吧,首先两个input框准备好,再来一个啊,来一个place holder叫做输入什么?诶输入诶,啊慢点来走,输入名字,把这一堆复制粘一下。
11:15
叫做输入年龄,好,再来一按钮,Button叫添加。好,然后下边呢,我写一个u Li和Li的这么一个列表是吧,一个Li就是一个人啊,你比如说名字什么什么,然后是年龄,哎什么什么好,那伪造几个人走,名字一名字二,名字三,年龄一,年龄二年龄三好。写上,那我是不是得拿到这两个input框的值啊,那所以说呢,我也不做受控组件了,直接写ref啊,然后呢,写成那种回调的形式C箭头函数C,然后箭头函数,然后写上this点儿名字叫name。
12:06
啊,然后等于C,那这改一下年龄呢,叫age对吧,如果写的好一点,这应该叫做name node,因为你拿到的是一个名字的节点,那这里叫做a node,你拿的是一个年龄的节点,对不对,好嘞。那它是不是得写一个uncle click呀,哎,走this点添加,那就ad person person好,那就得定义好这个a person的。那这里边呢,非常简单,第一步获取用户的输入,对吗?Cost结构赋值this.name node上,哎,是不是得拿到那个那个name的值啊,那就这样写吧,叫name,然后name node.value啊,那再来一个,这叫做H,那就是this.i node.Y6拿到这个了吧,然后我做一个输出啊,先别一下子写太多,咱看看能不能行啊,稍等它编译。
13:05
好了,打开这个。哎,开始了是吧,啊,那我加一个标签吧,在这个位置啊,写一个H2啊,叫做我是person组件。回到页面看一下效果啊,稍等编译,哎,我是person组件,那这个呢,我也给他改造一下同学啊,回到这儿。找到count组件啊,滑到上方,这不是H1当前求和为吗?我这写个H4当前求和为前边再给他来一个H2啊叫做我是什么组件呢?Count组件好,稍等编译。回到页面来看一下效果,我是count组件,我是person组件,当前求和为对吧,全都展示出来了,那我输入一个名字叫做Tom,输入一个年龄呢,叫做12岁,打开控制台点击添加的时候,是不是能拿到这两个人呢?啊,能拿到这一个人的,哎,两个信息对吧?哎,不是两个人是一个人好。
14:08
行,那就把这些准备性工作我们就做好了啊,那接下来你觉得要干嘛呢?我这个person组件,你看看是不是没有跟redux产生任何的信息交互吧,那接下来就得交互了啊,慢慢来,但是这小节我们先不讲交互,只是做一个准备性工作,只是把redux这里边儿的东西拆成了合适的模式,你比如说都是在文件夹里了,对不对?好,这小节呢,我们先停。
我来说两句