00:00
来下面呢,我们要将这个应用呢用上来帮我们去管理,也就是说我这个状态数据还放在这个组件里面吗。不放了吧。这能听懂吧,肯定不放了,至于怎么样去得到状态,那是后面想的事情,肯定这个是不要了,对吧。那要用首先第一步还是要先把这个库给他什么。是不是下载下来是吧,下后面使用来写的时候,它有一套自己的一个套路,我们按照套路啊写一写,我来直接说啊。首先啊,我来去创建一个专门的文件夹。诶,这个地方啊。我先做一件事情啊,做一些什么事呢?我先把这个做一个备份,这样的话看起来舒服一点,到时候能够看到。各个版本的代码啊,我写了SC01,这个是react的版本。
01:01
你是count吗?Act啊?到时候我们会有好几个版本的。这样大家到时候看起来要好一些啊来。看到这个我们在这上面改造啊,来这里面我一般会去创建一个专门用来去存放re相关代码的一个文件夹。有名字可以用,两个名字可以用,一个是redu,再一个是十度,因为最核心的十度,那我们先先用redu吧。这个表明确就是相关代码都放在这里面,这个听懂吗。好,我们说过,最最核心的是一个什么对象?十多的一下吧。来,我们要有一个专门的模块来定义制度。那名字自然就叫什么。十多。啊好,来写一下,这是大概是。
02:00
最核心的,我叫他管理对象谁的启动。那我是不是最终要向外默认暴露是多呀?只是那个湿度怎么产生的问题是不是,那这个时候就要回去看它的语法API了是不是。那这个时候,那它有一个函数叫什么。Create store,那我得给这函数给他引入吧。它是re提供的,那我自然就是import。他Rex难道只提供这一个函数吗?应该不是,所以应该用什么呢?结构from。是不是有啊有,那我就是不是要去调用亏斯托来去。产生一个作对象,我直接给他返回,是暴露是不是就可以?这个能不能懂,能只是说create在执行的时候需要传的是一个什么呢?给他说一下,这个写的不太明显,是一个reduce。
03:12
来OK,稍微把这个嗯改一改啊。那什么意思?那也就是说我要想产生一个失落,还要定一个模块。还要定一个解锁文件,那名字就自然叫什么reducer。能不听到好这一个是一个什么模块,来说一下。这个是,呃。Reduce函数模块。函数模块好,这个模函数模块有什么特点呢?它是个什么功能呢?根据啊。
04:00
什么呢,旧的。或者叫老对吧,根据老的state,或者叫当前state。当前是对和。哎,指定的H。返回一个新的什么四内。这能听懂不?那这个时候我应该是不是向外暴露一个函数就可以了。Export default。好,我的这个函数用来去管理哪一个状态数据呢?我们当前这个应用有一个什么样状态数据需要管理?是不是有一个count需要管理?我们当前要管理这个说一下是管理啊count状态数据叫reduce,这个能不懂,那这个名字一般我就会取名叫。
05:07
你管理哪个数据,它那个数据名叫什么,它也叫什么,这样比较方便,后面你就能体现出来啊,就按照这个套路写。好,接着里面写什么呢?里面的参数是固定的。这能听到吧。而且我应该是不是返回一个新的。一个数据值对不对。能听懂不?还有个事情,我们的这一个界面是不是要初始显示一个界面。要显示一个初始值对不对,这个初始靠什么?靠这一个是对的,记住啊,当前这个是对的,不一定是对象。这个是就是我的数据本身,我要管理数据是不是看的。所以它的数值。
06:01
能看到吧。各位懂可以好。我为了能说明跟前面不一样,我故意的改成一,那你说一上来打开应该显示几一。我有意的写成一啊,这怎么懂?能懂好里面要进行各种各样的处理是吧,那各种各样的处理最终是根据我现有的值,根据这个X来返回一个新的值吧。我们说action是个什么结构来着?Action可不是个孩子。来,这个时候我们得去看着写。熟悉一下action是一个什么对象,对象里面是不是有一个type?来标识它是用来干嘛的是不是?这个名字不是绝对的,你随便可以取啊,你随便可以取。这个是不是存了我的蓝脖子?这能听懂不?我的蓝宝石好了,那我该怎么办呢?
07:01
我这个地方一般都会去来一个Switch Switch谁。Switch的态。那个type实际上是不是有两种值,要么增加,要么什么。减少。那就来一个看好case case多少呢?我们刚才是不是看到有一个increment。对不,那也就是说现在是不是应该返回一个增加以后的值。是不是在原有值的计算加上一个数据?假多少?那如果我们按照这一个设计来设计的话,应该是点对吧。那女的吧。那也就是说我们这个I型点什么对。当然,你也可以设计为,因为我保存的是number数据。
08:00
点number行行,但是啊,前后要一致,将来要用的时候要一致,听懂吗?啊,我们先用这个试试。没问题吧,没问题,好,那除了还有什么。是不是还有一种可能性?再来一个。就叫什么对应的写呗。是不是低亏了,那这个B是什么。减。听了吧,那如果两个都不是了。我来个depot,我直接把数据做原样返回。听到不?这能理解吧,说白了,如果你是其中的某一个,那数据是不是返回的数据是不是有更新。而如果两个都不明白呢?直接放原来数据吗?这能听到不好,我在这一个方法里面写一个打印输出可以吧,并且把当前的state以及action给输出一下。
09:13
这个美女吧。等会我们来看嘛。好,那这样的话,我的这个reducer是不是就写好了。写好以后我这边是不是要用啊。得先干嘛,是不是先引入,引入了是不是就是个reducer from什么点斜杠。Reduce,那我就把这个reduce是传进去。这个能不能看到,能看到啊,这样我是不是定义好了一个啊,是多的一个模块是吧,定两个模块,一个是多一个什么。那而这两个是不是我们整个re结构里面的非常重要的两个结构?是不单是从这个图里看,是不是还有这个结构啊,这个结构等会再写。
10:03
啊,等会就再写啊,不着急。好。来下面要说啊,我们的这个组件,我们的这个组件。他是不是现在来说,是不是应该把这个状态给他干掉。但是他需不需要状态数据啊。他需要那个抗数据吧,但招样的数据在哪个里面,是不是在这个store里面有多管理在是不是,那现在我要想能够去读,要想能够更新,是不是要能够去得到那个多对象才行,说白了就是这个地方我要接受一个不是在这里弄啊,而是我要去这么做,看看我这么写的。Static prope。对。等于是吧,等于一个对象,那这个时候我们是不是需要引入一个模块。叫大起来是吧。
11:03
有没有题吗?我们最好能给我传一个什么呢?是多给我。那我是不是就为所欲为了?这能听懂吧,因为我要想读可以,要想更新是不是也可以。只要我能看到对象来proper什么型对象is required。这懂不懂?啊,记住啊,我当前的APP现在就揭示一个什么十多,那我在渲染这个APP的时候,就得给他传一个什么十多吧。是不是?这能听到吧。呃,这个石垛,我这个地方是不是要产生一个石舵才行,石度我有吗?我没有引入,实际上是有那个模块。我要干嘛,引入一下就可以啊,非常简单的事情,点斜杠下面的什么是多。
12:00
这能听到吧。那而且我引入多以后是不是传统的APP。而NP拿到这个石头以后,后面是不是就可以去读数据,去更新数据了?这能听得懂吧?可以听懂,比如说我要读数据。来,就说这个吧,我要读书去写是吧?看一下我这里面不是原本取state吗?这对吗?不对,因为我没有这个状态数据了,是不是,那我应该怎么做呢?我接收到了一个什么属性点十度,怎么样得到状态数据,我们的湿度来这个时候看语法写也不用背。是吧,啊来看一下这个地方是多对象,它有一个方法叫get什么是对的,而我们现在这个是不是就是count值。就是个看值,不是个对象啊,记住我们现在不是个对象,就是个看值,非常简单,Get什么get对。
13:07
能听到不?那此时就应该要能显示一了。听懂吧,好,来。显示了没有显示啊,为什么不显示零显示一,因为我们初始值指定,为什么?诶这里有个问题啊。这个初始值,这个初始值时得调用一次这个reducer,是不是才能产生这个初始值,它什么时候掉的呢?是不是医生看好了,我要直接告诉他,结果大家可能不知道我把这个,故把这个做掉。那现在是不是只是引入了多,并没有去用它吧?来。界面肯定没了。但是现在有什么,有没有打印。
14:01
有没有打印,有吧,再刷新一下,大家注意观察一下。这一个啊,Count值就是那个reduce吧。而且初始值为几?这个内的值是不是一呀?这个是我传的吗?所以X选这第三个参数是这个安全对象是我传的吗?不是,是他自己传的对不对,他传的泰值为多少,看一下什么艾艾什么诶大诶看到这个单词很重要。那我要问大家,你说什么时候去第一次?其实他就在创建十多对象的时候。能听懂不这一个方法啊,就是说在创建使度对象内部。会第一次调用谁?
15:01
是不是调用reduce函数?是为了干嘛呀?得到初始状态值,这能听懂不?你就要想一个事情,我们说十多对象,它是用来管理状态数据的。初始状态数据。他家有吧?是不是怎么样才能得到数装的数据啊?调用这个函数吧,是不是能听懂,不调用这个函数是不是就得到了初始端的数据,并且它内部是存起来吧。你说老师你怎么知道他存起来了,你就想嘛,我们最终去整的时候,是不是在APP组件里面去get。去读了状态数据。读,是不是因为它本身就有。是不是它本身什么时候有的呢。是不是要说我们在创建时多的内部,他就会去。
16:03
想办法搞一个数据出来嘛,是不是。这个能理解吧,就需要去能理解啊好。那现在我是不是可以去读数据显示了?下步该干嘛?下一步能读最重要的是什么根性?难的是庚心读很简单,是不是好庚心的话来看看。我们看一下API啊,看一篇我们说过要想更新啊,看一下这个结构啊。必须要调用吃多的什么方法呢?是不是第派系X方法?这个能不能听懂。需要去调用是多的,第一次排X情啊,多对象是有这个方法的,大家看到第一排什么。Action。那我应该怎么写?看好了啊,回到我们这里来,前面我是不是set state更新的数据。
17:02
这还行吗?肯定不行啊,我装的数据都没了。怎么做?先得到那个哪个对象,说对象它有一个什么方法去触发更新去呢。第page需要传一个什么?需要传的是一个什么对象?爱情对象我现在有吗?没有,没有,是不是得有的创建一个对象,而这个对象不能随便下去了。有个固定的属性名,叫什么太好,值是多少,不能随便瞎写,因为我们这边已经给他设计好了。对不?这能不能听懂?能,那你说是这个名字吧。现增加好还一个,我要不要去学了这个number数据啊。要把,不然的话,他怎么知道要增加几呢,是不是,呃,这个number是放在哪个属性上呢。
18:04
它是不是有一个统一的名字叫data,那得了,那我就是写什么。冒号。你说这个这个,那下面的事情那不so easy了吗。你说下面怎么做?把这个改成什么?抵回来的后面的是不是类似的。但是我先不说后面了,因为现在的写法不太规范。他不希望你这么写。看着这个结构图。这个图里面在说我是不是要去调用,最终调用它来触发更新。但是action不能我去手动的去写,去创建。不要我是在这个代码里面直接写个大括号创建,而应该有专门的函数来创建那个函数,我们有一个统一的名称叫action create。
19:01
Create什么意思?Create本来叫创建,那加个or了叫创建器创建的工厂。创建什么的工厂?XB线的工厂。听懂了吧,啊,我们不能自已这样在这个代码里面自己去写大话。我应该怎么做呢?正常情况下应该这么写的。定义一个专门的模块。这个模块里面包含了很多个创建X型的工厂函数。但是一般正常命名,正常命名应该叫action create会比较好一点。叫这个比较好,Action crater。一翻译过来就X的创建工厂啊,很多个。但是一般命名都不这么命,一般都这么命名。叫action。啊,我要用常用的命名方式去写啊,这个的本质是什么?说一下包含N个。
20:08
用来创建什么呢?X型的。什么东西呢?工厂函数。当然,他们也有一个统一的名称。叫ABC。嗯,那他的这个图里面为什么是,为什么是S啊。因为我是包含什么N个呀。能听懂不?我现在有两种类型的,有两种类型的action对象,一种是类型的,一种是什么?第一,那也就是说我现在有几个X2个需要。那下面就D。分别暴露。
21:01
Export啊,Function对吧,名字最好啊,就取这个名字来往前写啊。接着return对象,其实就是把刚才我写的这个给的什么。是拿过来。当然这里面是不是需要一个number。说明干嘛穿过来?这种写法占用三行,应该用键的函数的写法比较好。芯片。Export这个名字。等于一个什么。Number得了。线头返回这个对象不能直接写。诶,这是我们常用的写法。能不能这一个本来啊应该称为啊,什么呢?是增加的action create吧,听到不,因为这不是X返回action生成action的一个工程函数吗?但是平常我们都这么称为叫增加的action。
22:15
一定要知道我们交流是怎么交流,还要知道本质是怎么回事,听懂了吧?好,那有增加的必然就有什么。减少的这个就太简单了,改改就行。减少的action,那这个名字就不能叫,叫什么de equipment可以吧,那这个也应该是这样写的,对不对,这个能随便瞎写不?不能需要跟我的这个reducer要什么要一致,是不是?那如何保证他们不犯错误,不写错了?诶,这个地方就要说一般也会专门再建一个模块。叫X杠。
23:04
这里面放什么呢?就放一些植物碳产量。包含N个。啊,Action type常量名称action,每个action是不是都有type值的常量名称的模块,那其实这个时候export我们是不是有一个increment的标识,这里面一般会写成大写,名字会写成大写。但值呢,我有意的写成小写。可以吧,啊这一个叫什么呢?那这个也应该叫什么好了,那我这两个组件里面是不是要有一致的处理这两个模块是吧,那应该怎么做呢?先给他什么引入port的大话from点斜杠X是不有两个。
24:01
一个叫incre,一个叫什么第那接着得把这个代号给了什么。去掉才是引用了刚才我的这个含量吧。那我要问他,我的type值是大写的还是小写的?大写小写的,我的type是小写的。能听到不,这里面我是有意的把它区别开来啊,不然的话不好说,好,那整好以后我的这一边,我reduce这边呢,刚才是不是改了action。同理吧。同理。怎么做?引入,接着简单来说就是把这个给他什么。去掉直接写这个名字,这个时候就不用写错了吧。你别把名字,你别把那变量名写错了就行,能听懂不好。来啊,那这样我整好了两个。Action啊crater,那接着我这一边我的主见这一边看好了。
25:04
是不是需要啊。不能自已写,是不是不能自已写?那怎么做呢?引入我是不是有两个函数。接着点嗯,点斜杠啊,我们的re里面的actions对吧,实际上是action create是吧?来有两个,一个叫re,一个叫什么。那你说我干嘛去?这一个是不是要增加呀,产生增加的X是吧。什么?它是不是接是一个参数的,大家注意观察,是不是接是一个蓝保来着,大家注意观察。哎,这里面这个工具有点傻。工具已经混乱了,什么意思呢?你看我一点,他跑到这来了,是这个吗?我怎么叫他?
26:00
我怎么调动它,怎么样才能调动它,对Z是点才能调动它,听懂了不?这不是你的问题,千万不要去点,那就是死循环呢。能听懂吧,好,这个实际上找的是我上面的这个变量吧,注意啊,而他是不是接受的是number,这边接的都是number,好,那我这边后面的是类似的。这个要减少就慢。第一呢,穿什么一样穿单?啊,上面没传没写忘了写了是吧,这能懂吗?能懂那这一个是不定似的,诶这个地方说我去取这个状态还这么写吗。我怎么得到我的这个框的值?This时间pro时间store.get这还是有点烦的是不是?我们现在写法还不最终写法,因为我们要不断的演,演变这个过程,那最终呢才能看懂,才有可能看懂,只能说。
27:05
啊,我要直接写这段方法,那是不可能看懂的,所以说咱要有一个演变的过程,其实现在的写法都不是最重要的。好,那最终我们去更新也不能调用三的设计,是不是其实很简单,就是把上面的这一个给他什么。说搬过来就可以。能看到吧,这不就分发X去吗?这个也是。They'see。做个就可以了。能听到不?有人说,老师就这么简单的应用,你给我写出了这么多代码。这还简化了这个地方,就说本来我刚刚已经说过了,我这个应用太简单。因为一个库它写它有点模板代码,听到不是必须要写的结构化代码。你就是再多复杂应用,它也还是知道结构代码。一旦你本身的代码多了以后,你就会觉得这个代码并不多。
28:00
听懂了吧,主要是我们现在确实太简单。好,那现在啊,我们就去实现了我们的这样一个通信的过程,不仅可以读,还可以去分发,对不对。好,现在我们来看一下效果有没有了,还有点小问题,先先看问题,再来说问题啊,再来说。好,是不是初始显示调用了这个reduce,意思是不是好接着来。状态分析没有?状态数据是在更新了,那当里面管理状态是不是不断的在累加呀,但是我的组件建立更新的没有,这里面就要说。Redu啊,它去更新自身的状态之后,它不会自动的去更新组件的状态,不会去更新组件的界面。那怎么办呢?这个地方其实还有一个语法,咱们用啊,这一个多对象,它还有一个语法叫subscript,什么意思,这个单词咱见过。
29:08
订阅订阅传的是一个监听的回调监听什么呀,你说我的这个是多少去绑定一个订阅一个监听回调监视谁。先是它内部的状态数据吧,那也就是说如果状态数据变了呢。那这个回调函数是不是就会调用,那我们可以在回调函数里干嘛去。对不来看着。给斯诺。啊绑定啊状态更新的监听对不对,能听懂不好,这个是多在这里吧。这不点它一个方法叫script。是不是要传一个监听来着,监听是个回调函数,监听不就是回调函数吗?我们说这个函数什么时候调啊?
30:01
使舵内部的状态数据发生什么改变?是自动什么毁掉?这能听到不就毁掉吧,毁掉不就自动毁掉了吗?好,那我在这里干嘛去?你说干嘛?这是在干嘛,重新渲染谁?是不是APP组件标签?翅膀。能听懂吧,我一旦重新选AP,那AP是不是会去取这个。得到了,这个是多,那个是多里面,多里面大家看呢,多里面的状态值是否发生了改变。那你说我能不能显示最新的数据了?我这不是获取十多里面的get吗?是不是来看一下。
31:01
看一下啊,走,你因为。有没有变,这是变不了吧,因为它是一个偶数嘛,是吧,能不能变,能变,但是要过一秒以后才变。能看到吧。嗯,那这样的话,我们就。去实现了我们react的组件与大进行通信。但现在这个代码说实话比以前复杂了不止一倍。啊,很多语法大家都不熟嘛,那当然觉得很费劲。其实这种写法稍微代码量大一点,但其实好理解,等到我们把代码量变小以后,你反倒不好理解。有时候代码越少,你觉得理解起来越费劲。好。先给它停下来。
我来说两句