00:00
在理解了react杠的这个模型图之后,这节课我们开始写例子啊,诶,首先我从零四这里复制了一个零五,然后在控制台我进到这个零五这个目录啊,然后这个依赖还没有安装,先安装一下这个依赖。先看一下这个图啊。看看我们这个例子怎么写count UI组件,我们说了这个UI组件是负责呈现这个UI的,对吧?啊,那这个容器组件来包裹这个UI组件。同时这个容器组件还要去连接,还要还要去和这个re进行一个关联,对吧?好,现在UI组件我们有了,我们来看看啊,代码中。Src这个啊,Components count,这个是不是就是我们的UI组件,是不是这里是用来呈现这个UI显示的好,那现在我们缺少什么,是不是缺少这个容器组件对吧。
01:02
来,我们来创建一下容器组件啊,UI组件呢,我们一般放到这个目录里面啊,那容器组件我们放到哪呢?我们放在一个新的一个目录,那这个目录名字呢,哎,就叫容器。来创建一下这个目录container。然后加个S,因为容器组件的话,它也有多个对吧,好接下来诶一样的啊,我去创建一个count。创建一个目录啊,Count。那这个我们就把它给当做是,哎,这个count这个UI组件的这个容器组件,好接下来创建一个index。好,既然是组件的话,我们还可以使用GS叉,没有问题啊。
02:00
那这个组件怎么写呢?你还是写这个RC是吗?好,我们来想一想啊,看一看这个容器组件。它做什么作用?他要去和redux进行关联,并且还要为这个count我们的UI组件提供这个redu中的数据啊,状态和操作redu的方法。他要干这么多活,你想想我们如果自己去写一个RC这样一个组件的话,能干这些事吗?肯定不行的,对不对?哎,所以那不能这么写,那怎么写呢?这时候我们得借助于谁,借助于。我们讲的这个react。来,先安装一下。我们要借助这个工具啊,这个插件来去帮我们去创建这个容器组件。先安,所以在使用的时候先把这个工具给安装一下啊。
03:00
Ya a react,杠。这个容器组件不是我们自己去创建的,因为你看一下它的这个作用很强大的,对吧,他要去啊,一方面要去和redux进行一个关联,一方面要和我们的UI组件进行一个交互,对不对,所以我们得借助这个reactdu。来帮我们去创建这个组建好。接下来,那我们既然要借助这个react,是不是得先引用?引入啊,来引入谁引入谁呢?不知道,等会儿先空着,等会再说啊,From react。写问号吧,那现在不知道引入谁,我们先控制啊,注释也先空着,好,接着来看一看我们这个容器组件啊,我们这个容器组件他要做什么事情,他要去。哎,和这个谁和re建立一个连接,对吧,而且还要和这个UI组件产生一些关系,那是不是我们得把这个,哎,Redux和这个。
04:09
UI组件给引入对吧?来我们来引入一下啊,引入re,那怎么引入redu呢?你是直接引吗?哎,不是的,想一想我们之前讲这个,呃,Redu它的这个原理图的时候,它最主要的一个东西是不是这个死套,死套处于中间位置,哎负责来整体的去调控,所以我们只需要引入这个死套就可以啊引入哪个死套呢?就是我们自己去写的这个套啊。在这个。这里啊。当前目录的啊,就是说上级上级目录的这个好。那我们就简写啊,引入这个redux现在已经把这个re给引入了,是不是还要把这个我们的UI组件给引入。
05:00
引入count啊UI组件。Input。再加个UI吧,啊,标明它是UI组件,好,现在这两个东西已经就位了,对吧,然后我们这里还不知道引用什么东西,接着我们看看图,现在这两个已经结尾了,对吧,那想要让。这个容器组件和redux组件进行一个关联,来进行一个这这个连接,是不是进行建立一个连接,对吧?那。引入谁?哎,刚才已经说出来了,是引入一个连接啊,引入一个方法,那这个方法名呢,其实就是用于用作连接的啊,来写一下叫ne啊。引入这个写一下啊,引入connect。
06:04
写详细点,从什么呢?从这个react杠中啊,引入conduct用于连接。UI组件。和re,是这么回事吧?啊,看图就知道了,你看。UI组件red,那我们的容器组件是要和re进行一个连接,并且还要去诶把这个UI组件给包裹起来,那所以说我们得先把要准备的东西就准备好,接下来就是关键的一步啊,那怎么去连接这个这两个东西。来我们来写一写啊,使用,那既然把它给引入了,肯定要使用它啊,使用它来连接。
07:04
连接谁呢?连接这个啊UI组件啊,好,我们一个个来,我们先把这个UI组件给连接上,因为这个看一下是容器组件包裹这个UI组件,那这个肯定是比较好联系的是不是。然后我们把这个搞完之后再去,呃,把它去和redux进行一个关联啊,那怎么使用呢?哎,它是一个函数啊,你看这有个小写的对不对,好函数我们再执行对吧,那要和这个UI组件建立联系,是不是把这个UI传进去是不是啊告诉你不是这样的啊,我们想这样,但是人家这个函数设计的它不是这样,人家函数设计的是你得先调我这个函数,你调完我这个函数之后,我这个函数呢?啊,再给你返回一个函数。清楚吧,再给你返回函数,那我就再再执行你返回的这个函数,这时候把这个UI组件给掺进去,要这么去使用啊。这个这个没办法,这人家这么定义,咱就得这样用啊,注意啊,是前面这个函数的执行结果,它也是一个函数,那既然是函数,我就能加小括号,哎,再执行,这时候把这个参数穿进去。
08:09
啊,看到了吗?啊,那。这个执行完之后,注意我们这个是谁,我们写这个文件的目的干什么,是不是就为了创建一个容器组件,你执行完你没有用,那那不是呃白写了吗?对吧,所以我们来定义一个,哎,常量康。定义一个常量来接收它返回的一个值,它返回的什么?它返回的就是一个容器组件,对不对?哎,我们来写一个,就写容器吧,Container。诶,用来接收它,好,接收完之后我们得把这个容器组件给暴露出去才能使用,对吧?哎,啊容器组件。暴露出去,因为只有一个这个东西,所以我们直接使用默认暴露就可以了啊,Export default,好,Container a。
09:07
大家看一看啊,我这边。用它来接收这边直接暴露是不是可以,诶直接简写,那这个就不要了,我直接把这个他的他创建的这个容器直接暴露就可以了,是不是,那我放在一起吧啊。并把创建的容器组件暴露出去。这么去写哈,这时候。呃,这个括号多一个啊,这个括号多一个啊,这时候我们已经。把这个UI组件给连接起来了啊,还有谁还有这个。死套啊,也是我们的redux没有进行连接,那这个死套怎么连接呢?哎,这个我们先别慌啊,等会给大家说啊,啊,当然大家想到啊,我直接传过去就可以了,但是不是这样的啊,我们先放这,等会再说它,我们先去使用这个容器组件。
10:04
因为现在看一下我们的APP点点子里面,我们用的还是count,还是component count,对吧,还是用的这个里面没有去使用我们的容器组件,是不是啊,我们要使用一下它。因为看一下图来,我们的这个容器组件已经包含了这个UI组件,所以说我们直接去使用这个容器组件,那这个UI组件是不是也能呈现它们是一个父子的一个关系嘛,然后把这个改一改,那就不使用我们的这个UI组件了,是使用我们创建的这个,哎,容器组件containnu里面的count看到了吗?Connu里面的count啊,来这里啊,这个名字不改了,还这样好接下来。我去呃启动,然后运行一下看看可不可以啊。好了,报错了啊。看看报什么错,没有发现这个套,哎,看到了没有,没有发现这个套,我们再来看一看我们的这个图。
11:10
容器组件你要干两个事情,你要和这个re进行连接,也就是说你要和这个re进行一个哎联系,然后还要和这个UI组件进行一个啊关联,把这个UI组件包括起来,这步我们已经完成了,但是和re我们还没有进行任何联系呢,是吧?所以他就报错了吗?他说我们的这个容器啊,我们这个容器组件找不到这个死套对不对,所以我们需要在这个容器组件里面去把这个套给引入,但是也引入了,但是怎么用呢?啊,大家想的是直接传进去对吧,传个参数进去,但不是这样,不是这么用的啊,这个用起来就稍微有点复杂。啊,那怎么用呢?来这里我们就不要了,哎,不要了,不要了怎么办?但是我们还需要啊,对吧,你看他还在要这个死套,这时候怎么办,这个死套是怎么用的呢?是在这个里面用的,诶通过这个purpose把套给传过去。
12:08
等于套好,我们要把这个redux,我们的这个套,哎,通过这个purpose的方式传给这个容器组件,但是这个我们用到了,它还没有引入,对不对,在这上面来引入import。好,引入之后。我们再去浏览器中看一下啊。来,已经不报错了,已经出来结果了。再来看一下图。我们这个容器组件啊。它作为中间人的一个位置,它一边要和Rex去打交道,要建立一个连接,一边要和这个UI组件去建立一个连接,那我们这个容器组件和UI组件建立连接的方式比较简单,直接通过这个函数传参的方式传过传过来就可以了,但是这个容器组件想要和这个Rex进行一个连接,那就比较麻烦,那它就不能使用这种函数传递的性质,就要通过这个容器组件的这个purpose,把我们的这个redux,也就是我们的关键的这个套给传给这个容器组件才可以。
13:14
啊,这一点大家一定要注意啊,那现在已经看到,诶已经正常了啊,不报错了,但是我们来看一下这个效果呢,还是不好使的,因为现在我们的UI组件还都只是单纯的UI组件,并没有。写操作redux的相关的啊,这些逻辑对吧?啊,我们把这个代码呢,也改一下,就是我们的,呃,UI组件里面的这个代码,因为我们是从上一节课这里面去复制过来的嘛,所以里面可以看到啊,还在去使用这个套,那我们现在已经不使用这个UI组件去操作这套了,而是使用。哎,我们最新的这个react re,让这个容器组件和这个redu进行交互,对吧,不再让我们原来的组件和re进行直接交互了,所以说我们写在这个UI组件里面,所有和redu相关的代码我们都要删掉,来在这个最后我们把这个代码都删一下啊,凡是和redu相关的都删掉,这些引入也不要,然后这个什么监听也不要监听,我们已经写到了那个啊,index.gs对吧?好,这个选择的这个值留着,那这个呃,删掉。哎,我们的UI组件不再和redux进行打交道,因为我们已经使用了redux react redux,它会给我们提供容器组件,也就是我们创建的容器组件,让容器组件和redux进行来交互之后我们所有需要的数据,诶,在这个UI组件里面,所有需要的这个数据或者进行操作都由容器组件再和我们的UI组件进行通讯啊,所以这里面代码我们都删掉啊。
14:48
来获取这个的也不要啊,那这个这个也不要。这个也不要好,这个判断先放这儿,因为后面我们到时候还用得到,那这个异步的这个也不要都删了吧,那这个也删了吧,后面我们再写啊,来这个再检查一下啊,所有用到就是在UI组件里面,所有用到这个red的地方我们都删掉啊,那这里是不是也不能获取了,那我们先写个先写个零放这吧,好吧,好,应该是没有了,那这个我们就精简完了,哎,我们的容器组件也创简完了,对吧,而且在我们的app.ds里面,我们也把这个容器组件给用上了啊,而且容器组件呢,它要和redux打交道,就得通过这个purpose把这个redux啊给传过来,它要和这个。
15:40
UI组件建立关联,就要通过这个函数的形式去建立一个啊联系啊那。现在诶我们的页面正常呈现是没有效果的啊,是有效果的是没有问题的啊,但是我们现在是要去诶写这些是没有效果的,因为现在只有呃事件还没有真正的,我们让这个有UI组件去去通过这个容器组件去操作这个大对吧?那这个是我们下一节要写的一个内容,这小节先到这里。
我来说两句