00:00
这小节我们来写一个真正数据共享的例子,那是什么呢?因为我们现在这个求和的例子比较简单,哎,就是他把他自己的这个状态放到了re中,由re来管理的状态,对吧,然后它用到的时候从中去取,哎,但是。这不是真正的数据共享,我们想要写的是什么东西啊,比如说诶,这是一个组件,然后我们下面还有一个组件,哎,我们先不说这个组件什么,接着呢,这边是我们的这个re啊。那。画个箭头啊,然后。它的这个状态放到了redux里面,哎,他用的时候可以从redux里面去取好,那这个组件的状态呢,也放到了redux里面,他用的时候也能自己也能自己去取,对吧?但是呢,它里面的这个状态呢,实际上。呃,这个第一个组件也能去取到,哎,就是说也能去取到懂了吧,而我们第一个组件的啊,往redux里面放到这个状态,而我们这个组件也能取到,就是做这么一个例子,哎。
01:00
比如说有两个组件,他们这两个组件之间可以相互共享数据,就是通过我们的这个redu去共享这个数据啊,那这个组件呢,我们写一个什么呢?就写一个哎,Person的这么一个组件啊,Person的组件。好,那这个组件大概长什么样呢?我们来稍微画一画啊。那首先。这边有一个一个标题啊,有一个标题。哎,说这个,这我是P组件,然后。下面有一个输入框,然后还有一个输入框,一个输入年龄,一个输入姓名,一个输入年龄,这边有一个按钮啊,是添加。当我点这个添加的时候呢,在这下面去,诶,展示我们的这个一行一行的人的信息,哎,一行一行的人的信息,就是这样的一个组件啊。画的比较抽象。大概知道什么意思了吧,啊,上面一个标题,然后有我们的这个姓名年龄点添加,点添加的时候多出来,哎,这个人的一个信息就在这下面去展示。
02:02
那我们要写这么一个例子来完成我们的数据共享,哎,我们添加的这个人呢,这个人的数据会被这个呃,放到re大管理,然后我们在这个组件里面也可以去拿到这个人的数据,嗯,而我们这边计算的这个结果呢。这个状态我们的计算的这个这个状态也在大中,我们在这个组件里面也可以去显示这个计算的一个结果,哎,就是说这么数据共享的这么一个例子啊。好,那明白了,我们在写什么东西之后我们先干什么呢?在写之前先对我们的文件进行整理,哎,上节课已经把那个呃,那个目录删了是吧?那个no的那个依赖删了,接着我来复制一个零六啊。零六,嗯,React啊下分享吧,我们用为分享,就是共享数据的意思。接着进到这个目录里面。好,这是上节课运行还没有停掉,我CD到,注意现在是目录是在零五呢啊,我要CD到上一级目录的零六,我们新建的这个里面,然后去安装啊相应的一个依赖。
03:04
这个依赖相等它装着,我们先不用管它,我们看看这个代码还有什么地方可以改进一个空间啊,虽然我们经过那么几步之后,对我们的react已经进行了很多的一个优化,但是我们来接着再来看一个问题啊。那看一个什么问题,就是这个reducer这个目录中,因为之前我们一直没有去动它,哎。来接着看一看啊,这个已经安装完了,把它先把它折叠啊。看一看这个东西啊,在这个reducer目录里面,我们主要放了这么几个东西啊,一个是我们定义的这个常量,对不对?好,再一个是我们定义的这个套啊,还有就是我们的action和reducer,然后action呢,因为它可能有多个,所以我们前面加了前缀count-action,哎,而reducer呢,也可能有多个,我们加了一个前缀count-reducer,那我们来想象一个场景,还是我们就说组件比较多的情况下,假如我们有20个或者40个组件,那你会一直在写什么样的一个类型呢?一直在写哎这样的。
04:00
就是什么什么杠什么什么杠什么什么对吧,都带前缀,那特别的,哎,麻烦啊,一般在真正的项目项目中我们不这么写啊,虽然你这么写也能用,但是当组件多起来的时候,你就没法去维护了,所以怎么办,我们会给他去建一些目录啊。来,那其实我们主要可能存在多个的情况下,是谁是这个action和这个reducer,因为对应的啊,每一个组件,它每一个容器组件,它都可能会有一个count,都可能会有一个这个reducer啊,都可能会有一个action啊和reducer,所以我们只对他们两个进行一个优化,那新建一个。Counter目录。啊,不是count,是action目录,说错了啊,Action在这里面新建一个action目录,这个里面我们用来放所有的action。接着再来新建一个,我先建完,我们再整理念,再建一个reduce啊,加个S,因为可能有多个啊,加个这个目录,接下来那action我就放到X里面,对不对,然后是这个。
05:01
Reducer我就放到reducer里面,是这样的吧,啊,那这样的话,即使是你再多的action,我都放到这个action这个目录,你再多的reducer我都放到reducer这个目录,那接下来来。在想个事情,我既然已经放到了这个action这里面,那我这个名字是不是就可以改一改了,我就不用标明我是count action,我就写count就可以,因为我在这个目录里面,我肯定知道我是action是吧,包括这个也是同理,我就不用再写这个reducer这个后缀了,因为已经在这个reducer目录了,可以表明它是reducer是吧,把名字改一改来。啊。那就不要这个X了。好,同样的这个不要这个reducer。哎,好,那我们既然改了名字,是不是所有用到他们的地方,用到他们的地方都要改对吧,好。那先折叠,等会我们从还是从index开始去捋代码,然后碰到的地方都改了啊。
06:00
接着说一下这个这个文件抗这常量的话,我们就这一个文件不用做对它处理,你再多的常量都往这后面继续写呗,是不是,而且这个套的话也也是也只有这么一个,我们也也不用动它,就这样了啊,那从头去,你大家开始去改我们代码啊,那这个这些注释啊,我们就都删了,因为之前这个零五呢,已经给大家留了完整的这个注释啊,这个就不要了啊,删了。好,这个里面看一下没有用到对吧,就有一个啊,那这个不用管我们关掉,接下来走到这个f.GS那f.GS呢。嗯,也是没有用到,他只是使用了这个。Count这个容器组件好将这个关掉。接下来就是去到。我们到这里来使用,就是说容器组件这里啊,那这里面看一看啊。嗯,看看这里引入的这些这个地方。引入到这地方。这个action是不是没了,他要去这个Du目录里面的啊,这个action目录里面去找对应的这个count才可以,这个是不是得改了啊,好接着往下找,看看还有什么要改的地方啊。
07:08
啊,这是我们的这个UI组件,UI组件我们先给它折叠一下啊。这是我们的UI组件啊,下面是我们定义的这个容器组件嘛,我们之前已经对他们做了一个整合啊,那这些注释就不要了啊。因为这些都留的有,咱零五这个留的有好,那这个是没有了,接着我们。再来对我们的reduce里面用到的一些东西进行一些调整啊。来主要是我们的这个reducer reducer这里面。看看有没有用到啊,没有用到,它只是用到了一个常量,还有我们的这个action啊,也是只用到了一个常量。好的,那我们来运行看一看吧,有没有问题啊。
08:00
嗯。看一看报错有没有,我们就是说先用一下看有没有报错,有没有遗漏的地方。呃,有一个啊这个。里面。啊,这个action里面。嗯,我们所有引用的地方都出现了问题,因为它的这个目录结构发生了变化,对不对,好,那把这个里面,哎,主要就是这里面。都给它改变一下啊。一个一个来改,先改这个count,那这个呃,确实是我们做了这个目录的调整,所以当前目录它就没有这个count,他要去他上一层。上一层目录。里面去找啊。从他上一层目录去找。接着还有它也是啊啊,这个常量它也是要从嗯上一层目录去找才可以。诶,这个两个刚才漏掉了啊,来保存再看看有没有问题啊。
09:02
嗯,GS里面也有引用。那这里引用了谁?Reducer reducer呢,我们得去当前目录的啊,Reducer。当前目录的reduce里面的count,啊,引入这个count reducer,因为这个reducer也做了一个调整。你在里面呢,我们要去把这个reducer给它应用上才可以。嗯。来看一下啊,好,没有问题了,来使用一下。都是正常的。啊,这个是只有一波才加啊。这个基础才加这个是一步都正常了,现在啊好,大家改了之后呢,也要注意这几个,比如说stop啊,Count,还有这个就是action啊和reducer这里面各个词的一个引用啊,因为它的这个目录结构层级发生了变化嘛,之前都是在Du,现在我们把它给又建了一层目录,所以像这个所有涉及到这个呃,引用的地方啊,所有涉及到引用的地方都可能要调整一下,包括文件名,好那现在就调整完了。
10:14
调整完之后。哎,就可以开始去写我们的组件了,按照我们的这个需求对不对,我们要在这里面下面去给他建立一个person的一个组件,然后去,呃,输入姓名啊年龄,然后添加下面展示我的列表,我们先把这个静态组件完成,然后。啊,再一步一步去完成这个数据共享啊。找到代码,那创建一个person组件,因为我们person组件它也要也要用到这个redux嘛,所以我们还是直接创建这个。容器组件就可以了啊。来新建一个目录person,好,接着来新建一个文件。Inex.GS差好rcc正常的去先创建我们的person这个组件。
11:03
因为你不管怎么着,你还是得先创建这个UI组件,最后只不过我们再去创建容器组件,然后容器组件就包我的UI组件就可以了啊。来这里写一下我们的这个例子啊。嗯。先随便写上一句话啊,先让它在页面中,我们先给它啊渲染出来。在这干。之后再。爱不点GS。我们把这个P组件给引入啊。之后在这里去用一下加个分隔线一起啊。再来引入我们的P,好刷新一下看看啊,好有一条水平线啊。然后由我们的这个person组建。接着去完成一下我们的破损组件。按照我们的设想。来找到这个破损组件,那我先来一个。
12:02
H4。啊。组建啊。接下来下面是一个输入框。铺子。我们把这个盆子啊,姓名。然后嗯,输入框的话呢,我们要捕获这个输入框的这个这个输入,获取这个输入框的这个内容呢,要给他这个RF对不对。诶,我们直接使用这种函数的形式Z点。嗯,这个是我们的name是吧,Name node,因为我们拿到的是个节点,这个C,这个current是当前的一个节点来接着。
13:10
这个是我们的年龄啊A。然后这里pro这个给改了年龄。再来一个按钮添加,那添加呢,它需要一个事件,当我们点击这个添加事件,获取我们输入的这两个两个。值z.ad person。在这里我们来定义一个a person这么一个方法。等于个箭头函数。在这里面我们来获取这两个值啊,那这两个值呢,都是挂到了这个啊实例的,哎,这个上面。只不过。这里一定要注意,我们拿到的这个是。是节点啊,要想获取输入值还要继续点value,所以我来分分别来写吧啊。
14:05
Name等于那直接结构吧。Y v Le。等于Z点。Name node啊,然后我再给它取个别名,比如我叫name。可以取个别名是吧。来回撤一下A。背景。啊。这个呃,如果大家不太好理解的话,我我我这样写吧,直接在后面点吧。直接定义定义变量吧啊。也是直接定义变量吧。点value,因为这个A啊,之前我们也讲过这个node,我们也讲过这个c car,它获取的是当前的这个节点,所以我们想拿值的话,必须还得在点Y6,然后先不做其他的,先做一个输出啊。
15:02
先把这个name和这个A级做一个输出A级。Type啊,给不给都可以来,我们给上吧,那这个可以给个number啊。你用M。Nu加number,然后还可以给最小值,Mean是零,最小只能是零。这样就稍微严格一点啊,那接下来底下还需要一个列表。列表呢,我们就用这个P标签简单的显示,比如说姓名。啊,XX啊。接着来。空几个年龄?然后是用个用用这个线点吧,啊,年龄20。好多给几行。这时候我们来看看效果啊。好效果是有的啊,能打开控制台看一看,我们能不能获取到输入的姓名,姓名,比如说小名好年龄年龄,这时候你输入中文输入不上的,因为我们把它改成了这个。
16:10
这个number类型,并且还在,最小值是零。我们来点一点看能不能完成,哎,获取这个信息评价是不是拿到了小明11可以获取到这个输的值,哎,那这个我们先把person这个组件啊,简单的这么一个效果给写出来,在下一节我们再去完成,哎,把它这个数据给放到这个伟大的总管,然后这里还做一个展示啊,哎,包括上面去用这个P组件数据,以及上面的计算结果在普组件中去拿到,这个是我们接下来在做的事情啊,我们。这节课呢,诶就先到这里,哎,但之前我们先把这个间距给稍微来一点吧,离得有点近是不是好,那最后给它每个。空两个格。包括这个年龄这里。好,那下面这个就不用了啊。
17:02
啊,空点间距啊,那这节课到这里呀。
我来说两句