00:00
实现一下。先我们还是来把那个啊用上,其实我们已经下载了,看一下下载没有react下来吧,啊,我们先用上看看怎么改造啊。啊,首先我们最外围的不能选AP了。这围得渲染一个特别的组件,叫什么provide,诶,它自己好了,先先把外围写好了,React引入好。来看这里啊,这里面我们去要改造一下是吧,那我们渲染的应该是括号的对吧,里面传谁APP对吧,给这一个provider传了一个东西是吧?哎,这样子吧,啊传入一个特别的参数十多。
01:30
那也就是说我还需要这一个吗?不需要了,对吧,这个它内部有订阅啊,内部可以订阅,那我就不需要这个render了。再不更直接一点吗?好,那有了它以后呢,下面啊,我们说一下,我们就需要有一个概念叫容器组件了。对吧,需要容器组件什么意思来看到我们这里面要创建一个叫容器组件,叫containers。
02:07
对吧,好,先把它改造成一个比较纯洁的一个UI组件。啊,不知道纯洁什么意思,来啊,这个不要啊,我们要接受一些属性吧?啊,来一个static proper type等于一个对象。然后接收,首先要接收一些东西,我们接收啊,我们要这里面接收一个什么是方法来写一下啊,从上往下看,Ment pro type function.is require。算了吧,好还有什么,呃,这个呢,有了它以后,那我就直接这里面顺便就改了吧,this.pros.increment传入number是吧,下面呢,是类似的啊,下面我就我们就复制粘贴了啊,来个它改成这一个。
03:24
他是吧,就来改一下,改成。好,写完它以后呢,给它收起来。下面这个,诶,这里面有问题了,这。我是不是要接受一个count呀,是吧,所以呢,在这里面我们前面来一个count。是proper点对吧,点is逗号。
04:00
来,我要取到一个了,它把这一个改一改,This点点。Count是不是就可以了,这样得到看了吧,下面这一个。这个咱写过点传入增加是吧,好下面这一个啊,这个刚才咱写过,咱就把它拿过来吧。一秒钟之后啊,才去增加。不懂好,那我们这一部分三部分差不多了,下面还有一个,还有一个什么I message。那我还要去接收一个ADD message啊,这个就不用动了,好,这边this.prop点传添加。
05:01
好,这个都收起来啊。下面这里。这里面呢,我需要count,需要messages对吧,那在哪个里面有啊,就这里面吧,Pro里面是不是有count和message messages。对吧,这个跟上面的写法是什么?诶不一样,好像应该它是个什么使君不是messages看到这个S了是吧,是不是数组啊啊数组。OK好啊,那我们后面的就是读取写是吧,后面都不用动了,对吧?啊都不用了,诶还有一个这这个这个应该也可以,我们有啊都有。好,那也就是说现在我的这一个组件应该啊,叫这个名字好像不太好了,我叫一个,因为最外一层我们应该还有一个容器组件是吧?啊,它再叫AP就不太好了,我还是叫他count吧。
06:11
个字可以了吧,好,那这是一个纯粹的一个UI啊,它并没有用到redu的语法,下面我们来建它,给它建一个什么。选一个那外层的就写APP吧,比较合适是吧,点GXX。好看着啊,这是啊,当前是一个容器组件,容器组件怎么产生对吧,是不是需要用connect产生了啊是吧?来我们不管怎么说当前是要组建的,所以我要把这个要给它引入,RA是必须引的,还有我们要去引入connect。
07:05
能写from react引connect对吧,那我们这个connect报谁去的,报哪个组件。是把这个count组件,所以我要把count组件引入进来吧,啊,来count from。点点斜杠components下面的。知道吧,嗯,还有我们前面写应该有经验,除了引入这个,还要引入什么,是不是引入很多?嗯,OK,写个大框,写个from。来找到我的那个actions对不对,我们action里面定义了,是不是很多action啊,有有还有I。
08:18
那我最终啊,Export default向外暴露了是什么?这个写法应该是咱写了很多遍了啊,不写先把这两个括号搞好。对吧,接着传什么传组件呗,它是一个被包装的组件吧,那里面呢,是不是两个参数来着,来是对箭头觉得小括号大括号,那要里面写哪些属性看什么,就看我这边接收哪些一般的属性。
09:03
是不是需要count和messages?那也就是说,我返回的这个对象里面就应该包含什么呢,Count?对吧,Count在哪了,State count。对吧,再来一个message 4.messages。那其实我们这里面啊,本质上其实直接可以发挥对。嗯了吧,但是我是觉得这么写更加明确。别人看也好看一些就知道哦,你传了两个属性是吧,一个看一个什么message。下面的这个写法是固定的什么类型对象,对象里面是些什么?是不是这些函数啊,再来一个啊I啊,写错了叫。
10:13
是吧?就咱这个结构应该写的比较多了吧,对吧,只是说我们以前是不是相当于把这一个内容跟当前这个文件写在一起啊,就写在下面是吧,只是我们现在给他什么分开写的。那也就是说,现在我一共会向这个count传几个属性?几个五个嘛,两个一般属性对吧,三个什么函数属性,而我这边声明的也是一致的吧。杠五个是吧,啊对的没问题。嗯,那也就是说我们的这一边。
11:02
需要动吗?都没动吧,我没有改他们对不对啊,我没有改,我现在只是去改了一下我的这加了一个证。对吧,接着在我的这一个主入口里面用上了什么provider。那现在我们来看一下,看看我们的功能啊,好不好使啊,好不好使啊。呃,这个引入,这个引入已经不对了,这个例子。对吧,啊,它现在在哪呢?在容器组件里面是吧。对吧,没问题,好,这里面呢,有pro啊,所以我需要什么引啊,引入一下,就是在这一个里面需要引入import proper from proper。
12:03
可以吧,嗯,好。呃,这个不要了啊。哪个是我们的看一下啊,我们应该还写在3000上面,我们来看一下啊。为了说明是这个,嗯,我这样,我给他一个,给他一个reduce,给他一个数字一,我看一下它变不变。别到时候不是啊,整了半天。是吧,啊是没问题,下面我们就是要去加去减是吧,去啊判断可以吧,啊异步增加接着呢来去做,当然你在这里面也会看到一些打印输出,我们前面做过的一些打印输出。是不是都可以啊,没有问题。
我来说两句