00:00
好了,各位在对redux有了一个简单的理解之后呢,我们再往下看它这个图啊,叫工作流程图,你也可以说呢,叫做redux的原理图啊,Redux如果你想学好这个图是必须拿下的,但是大家现在先别着急看这图啊,我们看一下左侧的这个目录结构,我目前所处的位置在这儿,Redux工作流程图。啊,如果说看完这个图再往下,按照课件的顺序呢,应该给大家讲解的是7.2redux的三个核心概念,哎,也就是说是这哎三个核心概念先别看里边具体有哪些概念,一会儿讲的时候再说啊7.2呢,折叠先看图,再说概念,图你印在脑子里了,概念你懂了,然后进入7.3环节,我给大家讲redux相关的API,哎,我就告诉你同学有这个1234,我就一个一个给你讲好,API也讲完了,你就可以动手去写代码了。
01:06
就进入7.4环节,但是如果按照这个顺序讲啊,同学就容易造成一个问题,概念和有图你能记住,但是我说完那一堆API,我可能用了好长时间去给大家仔细的讲解,这API干嘛的,那API干嘛的,说了好久,大家听着也挺累,诶我讲的也挺累,然后呢,等到去编写应用的时候,我说同学就刚才有一个东西你还记不记得了,那API是什么来着,根本不记得。啊,所以说呢,同学我要调整一下顺序,怎么调呢,先看图,看图的同时三个概念直接讲完。啊,最好就是概念和图结合到一起,这样比较好,所以说我想把概念和图扭在一起,完大家真的,哎,说老师理解了,我懂了,咱们再打开课件这个7.2,看看课件里边那些概念是咋说的,是吧,好,然后呢,直接跳过7.3环节,直接就开始写应用,说老师那不行啊,那图和概念我都懂了,但是那玩意儿它只是说是概念呀,我不会API,我没有办法写,Re,大相关的代码啊,哎,我是这么想的,你不是不会吗?没关系,咱就按照流程图去写,流程图有啥咱就创建啥啊,然后你写的时候你就发现,哎,同学有些东西来换个颜色,比如说写到这一个点了。
02:26
你就比如说啊,同学后期呢,我们需要一个东西,这东西谁呢叫store啊,叫store,你现在先不用管store是啥啊,然后我就带着你写代码了,你就发现你得用一个东西叫store,这个store如果没有,你就觉得什么东西都写不下去了,然后你发现你自己啊,还没有那个能力去写一个store,那怎么办呢?诶我就给你推荐一个API,我说同学有一个东西叫create store,直接就能创建store,诶你看你就学会了一个API,然后我就再接着往下写,你发现又遇到写不下去的这个地方了,我就再告诉你一个API,哎,就这么的,一直直到把这个案例就都写完,同学我就一点一点的把所有的API呢,就都给大家渗透过去了啊,所以说同学你觉不觉得这样的话,大家能够真正把东西记住,而且你能理解,上来就给你甩了六七个全是核心API的概念啊,然后说来吧,同学们,咱开始编写应用,那刚才那堆API跟没念是一样的,明白不?每一个API都在他应该出现的时候来到。
03:27
你的面前能够让你痛快的解决一些问题,你绝对对这个人能记得住是不是?哎,所以说来吧,啊,我们先怎么呢?先看图,同学别急,我们先看图啊,这图呢,我们可以在课件里边就这么看也行啊,但是在这里边这图有点小,你到哪去看呢?同学把课件呢最小化最小化啊朱老师,你这图这是我提前打开好的,这图在哪啊,跟大家说在这呢,我是不是给大家一些文件react全家通,这是不是有一个原理图,这是不是有个Du原理图,双击这图在这呢?哎,这么看多畅快呀啊来关掉来吧,分析一下这个图,这个图呢,得就着一个案例去说,那我给大家说一个简单的案例啊,这个红色的呢,是一个组件,这组件叫什么名字呢?我就起了一个好听的名字啊,叫count count什么意思呀,求和哎,求和好,然后在这儿呢,一上来呀,就展。
04:27
展示一句话啊,或者是啊,我就直接说一下就得了,叫做当前求和为就展示一下现在的和是多少,比如说一上来啊,它那个和呢,你不可能一上来就有值嘛,是吧,一上来应该是零好,诶零好,然后在这个位置呢,有一个下拉的选择框就在这儿。我给你画的形象一点啊,下拉框,然后这框一下拉呢,里边有这么几个选项,我给你画一下啊,你能选择几个数字,可以选择一或者是二或者是三,然后在它后方呢,有几个按钮,我给你写一写啊,首先第一个按钮呢是加,就是数学里的加法来加,然后另外一个按钮呢,那就是减对应着减法啊,第三个呢是乘对应着乘法,第四个呢是除对应着除法。
05:26
好,你比如说现在求和是零,你这边选择二,你再点击加号什么意思,是不是加二,所以说这和就变成了几二,然后如果你继续点,你点了一,数字选择的是一,然后你选择减什么意思啊,各位是不是减一,那二减一是不是一,哎,如果你再继续点,你选择了三,你再点接了乘啥意思,是不是乘三,那一再乘三是不是三呢?啊,当然我写是把这个过程给你体现出来了,0213,那如果要是正常的情况下,应该是这样的,刚开始不是零吗?啊,然后呢,这零你就看不见了,看不见了它就直接变为哎,刚才我说的那个二了啊,然后你要再操作的话,二就直接变,明白不,我刚才写是把那个痕迹给大家留下来了,就这么一个像计算器一样的案例,OK,好同学,那我问一下我有几种操作呢?可能有加减乘除是吧。
06:26
一会我们就写那个案例啊,这案例跟这个长得特别像啊,好,有加有减啊,乘除呢,这也可以有是吧?同学你要再往下写,什么开根号什么的就不说了是吧?好,Count是组件,那看看图吧,这个图我们要从这开始看啊。同学,读什么意思?我希望这图里的每一个单词你都不要放过它好吗?这个图是我们重新给大家画的啊,来,React components叫做组件,React组件为什么加了一个S呢?同学们你想一下呗,你说你的react组件如果不是多个,只有一个组件,你还用什么Rex呀?Rex最大的特点不就是多个组件共享状态吗?所以说A肯定是得带S的是吧?一堆组件好了,同学,那我问你,比如说刚才就是我给你画那个案例里边啊,如果在选择数字的时候,我选择的数字是二,点击加。
07:26
减乘除那按钮的时候呢,我点的是加,那同学你的含义是不是想加二啊,好,不能说你加二呢,你就加二,正常来说,如果那个状态在你组建自身,那我们完全可以这样做,同学们这都是固定的套路,现在你应该能记得,你比如说获取原来的那个count值,结构赋值从哪获取啊,从this.state身上是不是获取原来的值,然后是不是加二呢?非常简单,this.set state,然后走,然后把这个count的值调为count值,再加上二,写不下了,我就得把这二写在这行吧,哎,加个二,同学是不是咱之前这么做呀,你这么做都是状态本身啊,就在组件里边,你可以这样做,对吗?these.s data,但是现在我们用reduce了,状态在哪呢?在那呢?所以说同学你觉不觉得你选了二,你点了加号,你得想办法在你的组件里边通知redu。
08:24
去把这个值给它加上这个二,你觉得呢,在你自己家那还说啥了,直接set state,但是毕毕竟怎么办,是在人家那儿呢?哎,那所以说你得想办法把加二这个东西告诉Rex,让Rex当你把它所保存的那个数字加二,你说对吧?好,那怎么告诉呢?就得走这条线。哎,这条线来同学do what什么意思?Do what就是你要做什么,你在你的组件里边已经明确了,你要做什么,你要做什么呀,你要加加几啊加二好了,那这个时候你就把你要加二这件事啊告诉谁呢?Action。
09:03
好同学,新的单词出现了,叫做action c s,其实它有个S的对不对啊,同学首先明确一个单词action什么意思?嗯,Action啥意思?同学拍电影的时候是不是有321ACTION对吧?其实这个action的本身就有动作的意思啊。那再看另外一个单词crater什么意思?Create这个单词的意思是创建对吗?那C呢,就是什么什么的创建者对吧?那所以说action cator s啥意思,Action的创建者,而且还不是一个是一堆,因为带S对吗?其实就听到这儿,同学你也是云里雾里的,如果这块不叫做action cur,同学他如果叫这个,我觉得你比谁都明白car CS car啥意思,有汽车的意思吧,那你告诉我car CS啥意思,就是一堆创建汽车的人,对吧?你可以理解为创建汽车的工厂,你说对吗?哎,那工厂不就是造汽车的吗?汽车的工厂,那所以说同学action curators,那就是创建什么呢?创建action。
10:15
啊,那问题又来了,Car CS是创建汽车的,汽车是啥?我明白,那action是个什么鬼呢?是吧,你又不明白这个东西了,什么叫action?那那同学我说一下啊,先别看这单词啊,一会儿咱再说,先别看这单词,Action在哪呢?在这呢?同学,汽车呢,大家都知道是吧?哎,长那个样子的四个轮子,行了,不说了,说老师action是不是可厉害了这action同学,这action呢,在我们的reduce里面叫动作对象,你加你减,你乘你除,这都叫动作,OK,动作对象啥意思呢?包含着你本次动作的类型,嗯,类型type以及你本次操作的数据。
11:00
说我说这什么意思,怎么理解呢?你比如说你在组件里边,刚才是不是想加二,所以说类型就是加加几加二。如果你想乘三呢,那么这个动作对象啊,类型就是乘乘几乘三,就这意思,所以说同学action我都说了是action对象,所以说啊,同学这action根本不是什么高大上的东西,它就是一个JS里面普普通通的object的类型的一般对象,仅此而已,它连函数它都不是。OK,好,那同学说,老师,那明白了,Action其实说白了不就是个对象吗?完了,对象里边包含两个固定的属性,对,一个叫type,是我要加要减,要乘要除,然后是date,是我要做这件事的数据,加几减几,乘几除几,对,就这意思,哎,就这意思。同学,那你觉不觉得生活中很多的事儿都能用action对象来表达呢?你比如说举个例子啊,我说同学们明天带大家出去玩。
12:04
那所以说同学我问你啊。这个要做事的类型就不是吃不是喝,而是玩,对吗?类型就是来写上叫啥叫玩啊,玩什么,去哪玩,跟谁玩,是不是都是玩这件事的数据那就放在这儿呗,数据哎你在想你比如说吃对吧,那不是喝,不是玩,是吃好,那吃什么,跟谁吃,吃多少钱的对吧?哎还有就是说老师,哎我谈一个女朋友,所以说这个类型是什么呀,这类型不是结婚,不是分手,是谈女朋友对吧?哎说老师那数据呢,你比如说你谈了几个,你谈的是男朋友还是女朋友对吧,说老师你这过分了啊,谈几个这事过分了啊,是就说这意思,同学,那你谈朋友是不是就有具体的说,哎,他是男的还是女的,都多大了呀,对不对,你这个对象的信息啊,所以说同学们action对象呢,这不是什么高大上的东西,是不,生活中很多的事都能用它去表示。
13:00
哎,记住这两个属性啊同学,Type叫类型啊,要加要减要乘要除是吧,Date呢,选一选二还是选三好来同学,那这datepa是什么意思呀。哎,这词呢,本身它就有分发的意思,大家想一下玩扑克的时候对吧?哎,Dispach,嗯,分发给你发牌对吧?说老师,那我感觉好像this patch好像是一个函数呢,你看加了个小括号,然后还把action对象传进去了,那正如你所见呀,This patch就是一个函数啊,老师,那我为什么要调用这个dispach呢?那我说一下同学,如果没有dispach这个人的存在,就是没有dispach,那我就这样跟大家讲吧,后边就这些流程就都没有了,来,我用最粗的画笔呢,我都给你涂抹掉,没有了dispach,所有的事到了action cur,那同学一切就都结束了。你就比如说你在组件里边选择了小点啊,选择了一,然后你点了加号,你的本意是不是加一啊,然后呢,Action cator,哎,就知道了,哎,这哥们要加一,我就给你创建一个动作对象类型是什么呀?哎,是这个啊加啊那加几呢啊加一好了,完事。
14:16
我也不加,我也不通知更新里边的状态,也没有人帮你维护状态,也没有人帮你加工状态,同学,你不觉得这事就折掉了吗?那要是生活中的例子就是属于我放你鸽子了,我说同学明天吃去哪吃,我请你去吃那个全聚德是吧?好了,这事说完了啊,就一个action对象,动作对象形成了,你那也知道有这个动作对象,然后呢,这事就结束了,明天我也不按点去是不是?那不放你鸽子了吗?所以说同学base pat的意思就是说要把action这个动作对象呢,继续往下教,教下去。哎,让能操作状态的人,你比如说你刚才是不是想加一,那你原来是几,是不是零,就得有一个人,他真正的能帮你加这个一,那这个人必须得得到动作对象,这个人才知道怎么工作,你不说加还是减,还是乘还是除,你不说加几减几乘几除几,人家怎么工作呀?所以说同学们,我们这块写了一个action动作对象的原因是想让别人用,而不是说他自己创建出来玩儿,你说对吧,那怎么能教给别人用呢?怎么能继续的教下去呢?就得用dispach叫分发,反正我个人觉得同学啊,反正看过很多集中式状态管理的库,Redux里边这些API其实设计的还不错,建明之意,Dispach分发,分发一个谁呢?Action对吧?哎,好嘞,有了action人家就知道你要加,要减,要乘,要出加几、减几、乘几、除几,那么有了dispa,就能保证把这个action对象继续的往下送。
15:54
送下去,接下来给谁了呀?嗯,谁死到,哎哟喂,同学这个人可厉害了,这个死到你就看图来说,你觉不觉得同学这个死道其实他就是在C位的一个人,对吧,咱说C位出道是吧?C位的人同学你说如果有一天我把死道干掉,那你说这条线是不是断了。
16:16
诶,这条线,这条线不是也断了,这条线是不是也断了,这条线是不是也断了?同学废了,这图整个跑不起来了,所以说同学道是一个特别特别核心的人,这单词啥意思呀?嗯,道来搜一下同学啊,有道带着大家看一下啊,咱也不急来。稍等等,有道启动store store什么意思呀?叫商店存储啊,它有这个意思,那么在我们re里边,同学,这个store呢,你可以把它理解为一个调度者。他负责全局的掌控,他就相当于十字路口的交警,告诉你停你拐是吧?好,你就通过dispatch方法的调用,你就办到了一件事情,把action这个动作对象交给了star。
17:07
这个star啊,同学,他是一个指挥者,啥意思呢?他自己本身不干活儿。施老师,这怎么理解?同学,你就这样想,他就是一个调度的人,你比如说交警能指挥车辆的前进啊,还是这个后退,还是停下来,对吧,但是他不去开车,死道就有点儿这种感觉,你把action对象交给死道之后,死道不做片刻的停留,死道直接找了一个手下人把这事儿做了,所以说同学,我问你死道加工状态吗?你说啊,我要加,我加的是一咋的,死道给你加的一啊,不是死道,就是一个指挥者说老师,要不就干脆就别用它了,我也不用它指挥,谁能加工我找谁去呗,你找那个人,人家不理你,其实谁是真正加工状态的,叫reducer。说老师,那我就不借助道,我就亲自找reducer去呗,同学,这就有意思了,这就相当于啊,你去餐厅吃饭,你直接越过老板死道,就相当于老板,你越过老板,你直接去后厨,你来了一句,来,给我来份蛋炒饭,厨师可能提着刀来见你,对吧?所以说同学你直接找流水不行的,不符合这个整个流程,所以说先是把action神对象交给star star呢,特别懒啊,但是他很重要啊,因为他有手下啊,手下人谁呀?
18:27
Reducer斯同学,但凡带着S的都是啥呢?可以有多个的,我问一下死道为啥?只有一个原因,就是饭店只能有一个老板,一山不能中得二虎,你说对吗?哎,好了,同学,那么到就把这action对象你注意看这啊,我这画笔呢在这儿,你看store呢,哎,你看这个箭头啊,这箭头,这箭头好,Store就把action对象交给谁了,Reduce s。然后就告诉reducer reducer起来干活了,Action对象给你了啊,自己把这活给我干漂亮了,然后reducer呢,迷迷糊糊的起来了,哎呀,行啊,干活吧,我看看你的类型,你是干嘛?哎,你要加呀,来,哥们,你加几啊,你加三行,我帮你加。
19:13
问题出现了,加三啥意思?是不是在原来的基础上加三呀?你是不是得知道原来是多少?同学,举个例子,咱俩见面了,我当当着你的面直接来一句,同学,你说加七等于多少?这问题没法回答,你原来是三,加七就是十,你原来是一加七就是八,你说对吗?我得知道你原来是多少呀?所以说同学们,你发现就在这条线里边啊,我重新画,就在这条线里边,Store不仅仅交给reducer action,而且store交给reducer另外一个东西,啥,Previous state,前边那个previous什么意思?State叫状态,大家都知道previous什么意思,叫之前的状态。
20:03
哎,那你想想吧,你比如说同学,就是我刚才说那案例刚一上来是几零,OKOK,零,好,那同学你想吧,刚开始一上来是零,完了,你这边刚才选的是比如说加二,然后reducer就能干活了,说明白了,哥们儿,这活我能帮你干了,你之前不是零吗?你现在不要加吗?你加的不是二吗?完活我给你算完了,哎,这他能干活,但是你要直接说reducer加二,Reducer活干不了,不行,我不知道之前的值是多少,对吧?哎,所以说同学你说整个图里边谁才是真正卖命工作的那个人呢?是不是reducer,谁最辛苦啊,是不是reducer I。是吧,像极了工作的我们是吗?哎,好嘞,哎,同学呢,我再问你reducer。把这个状态加工完了之后怎么办呀。Reduce说加完了,我算完了零啊,加上你那二啊,那其实等于二行了,我就放在自己心里吧,不行对吧,你计算完了,你不告诉别人,那怎么行呢?哎,那所以说他要返回一个新的状态,你把老的状态或者咱说旧的状态交给reducer,你再告诉reducer,你要加要减,要乘,要除,加几减几,乘几除几,然后reducer就帮你算,算完了就形成新的状态。
21:25
我问一下同学,谁当年给reducer安排的任务,谁给reducer安排的任务,说起来干活了之前是零,现在要加二,谁呀,是不是到,所以说reducer干完活之后,同学们注意看他把这个新的状态交给谁了啊,是不是交给了死star OK,好,那也就是说说老师折腾一大圈,其实算完的状态在哪呢?在到这呢,对。说老师那那不行啊,我在你看我在我的组件上,我点了加二对吧?啊,我在我组件上,哎,我的组件里边点了加二,那就得加二呢,那我怎么能拿到最新的二呢,你在组件里边。
22:04
你利用这个东西叫做get state同学,我觉得封装的特别好,Get啥意思?得到state啥意思?状态完事得到状态,嘿,就这么简单,对,得到状态,那新状态不在你这儿了吗?哎,所以说同学你看整个流程就跑通了,我们整体捋顺一下啊来走着说呢,页面上有加有减,有乘有除,还有一些数字,但是你最终选择的是加二,然后这个事儿呢,就被action cur呢就知道了。那就知道了,然后呢,Actions说行,这样吧,既然你是加二,那我就给你制造一个动作对象啊,动作的类型呢,是加,同学,你注意这个type里边我是不是用了一个单引号,什么意思呢。就是action对象里的type属性的值都是字符串,你比如说同学啊,我给你写一个真实的代码,你比如说我现在是不是想加二加,那个词怎么表达呢?你可以用ad,其实还有一个好的词increment加,这是标准的英文里的加法,加加几加二好,Action c没干啥高级的事,就是把你要做的事包装成了一个action对象,然后呢,有dispatch了,那dispatch好。
23:13
分发,然后就交给了死道啊,你就想象下那种场景,死道呢是吧,这葛优躺在葛优躺啊,葛优躺躺在一个沙发上啊,说又来活了啊,Reducer你过来,来之前的状态我给你说零,现在这个人的动作对象我给你去吧,把活干了,Reducer说行好嘞啊,活干完了,然后说诶,老板你看这活我干完了,最终的是二老板说行了,放我这儿吧,回头呢,人家要就来我这取,诶就这么一个流程,所以说它不是很难。但是这里边儿有一些细节上的问题,首先说这么一个问题,同学我问一下啊,刚才我一直体现出来一个东西叫做加工状态,我一直说reducer,哎,能加工状态,同学,那我想问一下啊,你是不是得有之前的状态你才能加工状态呀?我问大家没有之前的状态,你怎么加工状态?
24:07
是reducer能加工,那我想问问那状态谁初始化的呀?嗯,初始化不也得有一个人吗?对吧,同学,所以说你觉没觉得,就图里边的这条线从第几次才能算呢?是不是第二次。同学,那我问你啊,是不是你之前得有了一次状态,然后你才能说我有之前的状态吧,对不对?同学,就生活中的例子,你是不是得谈过一个女朋友,你才能跟我聊,老师你说我那前任啊,她怎么怎么怎么,对不对,你女朋友没有谈过,那你怎么聊前任这个问题吗?所以说你连最开始的状态都没有,你何谈之前的状态呀,你都没有之前,现在你都没有状态,对吧?哎,有同学说,老师我觉得好像有被冒犯到是吧,就是举这个例子是吧?所以说,哎,同学你说是不是我得首先有之前的状态,完了我才能说,哎,再加工资怎么地啊。
25:04
那同学说一下啊,Reducer啊,他能干两件事儿,第一件事儿就是。初始化状态,哎,第二件事呢,就是加工状态,Reducer做的最多的事呢,其实是加工状态,Reducer呢,只做一件事啊,就只做一次,其实是谁呢?就是初始化状态,OK,所以说呀,同学们别总说reducer能加工状态,能不能初始化状态必须能,但是同学话又说回来了,你说他要是加工状态就是这个逻辑,我点了加,我选了一,包装成一个动作对象,这是加,这是一,然后这个动作对象呢,就送给reducer了,那我想问一下同学,那你说之前的状态。那如果说按照我刚才写的,之前状态是不是零啊,那也就是意味着我点击加的时候,其实它传了一个之前的状态是吧,那这已经处于加工状态了,对不对?那我想问一下同学,你说初始化状态的时候是不是也得靠reducer,那也就意味着初始化的时候,其实reducer也得接到一个action,也得接到一个之前的状态,那么矛盾就出现了。
26:14
刚才我画那个流程图,Reducer是不是在加工状态,但是现在我所说的是不是在探讨这个reducer如何初始化状态呀?那初始化状态同学可以有action动作对象是吧?你比如说这个类型,就比如说举个例子叫初始化是吧?啊类型叫初啊叫初始化,然后data呢,你比如说是零是不是也行,有动作对象,那问题是同学我已经在初始化了,我没有之前的。你处第一个女朋友的时候,你是没有前任的,那这块我说一下,其实他也传了叫做安饭的没有,哎,第一次是unde find,哎,就有点像生活中的例子,你谈第一个女朋友,然后女朋友问你,哎,你前任怎么样啊,你说我前任呢,是undein,就证明,哎,他是你的初恋,就这么个意思,然后等第一次过了之后,同学以后你就可以说了,哎,你比如说第一次你不是初始化嘛,不说零吗?好了,初始化零成功了,等以后这边再点加一的时候,OK,你就有之前的了,谁呢,就是零。
27:15
哎,好了。啊,然后再说另外一个问题,同学,我问一下action c这个人核心的任务是干嘛?核心的任务就是说把你要做的事儿包装成一个爱神对象,对吗?其实我跟大家讲,这个图里边稍微有点没有存在感的人是谁呢?就是他。同学我问你啊,这个人就是把你要做的事你加一这件事拿到,然后类型就是加值就是一,那同学我想问一下这个action对象。它是什么太高大上的东西吗?也不是,就是GS里的,咱说了是不是object的一般对象啊,哎,同学咋的,我自己没长手啊,我不会自己写一个对象啊,所以说同学们,对于初学者来说,这个action cator你可以暂时性的。
28:06
把它去除掉,不用非得借助action cur去创建action对象,对吧,Action cur你给我走一遍,而且我自己就能写一个action对象,对吧,不就是写一个这玩意儿吗?对吧,里边包含一个type对吧?哎,走完了是什么什么什么,里边还包含一个呃,Date数据是吧?哎,是什么什么什么,完事了呗,我非得用你啊,是吧?所以说同学接下来我在写代码的时候。我会先不写这个人,我当然了可以写一个最标准的,明白不,哎,但是呢,同学你听我说,我不能一下子写出最标准的,大家会觉得压力过大,能省的人省掉,我会给你写一个最最精简版的redux,就精简到啥程度呢?俩文件就写完,哎,然后让大家先感受一下啊,老师,Redu也没多难,我再一点一点一点给你加东西,OK,还有就是这希望大家理解好。
29:02
Reducer不仅能加工状态,而且能初始化状态,加工状态的时候,你传的一定是之前的值啊,第一个参数,然后再是动作对象,但是如果要是初始化的时候,那你传的就根本就不是之前的值,因为初始化还没有之前的值是安dean的,OK,好,那这图呢,我们就看了一下,同学,我想用生活中的例子带着大家去理解一下这图好吗?咱把整个图呢想象成一个餐厅,这就是去餐厅吃饭的客人。客人事儿很多啊,客人的事儿很多啊,客人的说了很多的废话啊,你比如说客人去点餐啊,说呀,你说今天啊,这外边阴天,你说我心情不好,心情不好我吃的就少是吧?啊就是说了一堆废话,那可能最终落到一句话上行吧,那综上所述是吧,你就给我来一盘蛋炒饭吧,好了,同学,你说了那么多那么多那么多,其实捞干的来讲就是蛋炒饭一份对吧?好了,你说它相当于谁?哎,这相当于去餐厅吃饭的客人对吧?各位同学,你说他相当于谁呢?就这玩意儿。
30:09
你觉不觉得他相当于服务员?对吧?哎呀,你说了那么多的废话,服务员默默的拿出手里的点餐宝,写上蛋炒饭,呸,一份是不是就完事了?同学,哎,OK,然后怎么办?服务员呢,就按下了哎,点餐宝上的发送,然后就把你说的一堆废话包装成了一个点菜对象啊,类型,蛋炒饭。是吧,哎,或者说类型是点餐完了date呢,一份蛋炒饭。然后这个时候同学,哎,这什么意思呢,就是属于老板啊,整体监工的时时刻刻盯着这个电脑屏幕啊,说三号桌点了一份蛋炒饭,哎,老板盯着呢是吧,哎老板审核完之后怎么办呀,你这个菜啊,点菜对象就被发配到后厨了。啊,然后第一次交给后厨的时候,由于你还没有之前的状态,那所以说你传给后厨的previous state是undein,然后后厨就明白,诶,这人应该是第一次点餐呀,七号桌是吧?行,我做一份蛋炒饭,然后就做完了啊蛋炒饭哎就放在老板面前的台子上了,然后呢,你你取回来吃对吧?等你再次点菜的时候,同学你注意了,唯独有点区别的就是之前的状态不再是安饭的了,而是一份蛋炒饭,哎,就这意思啊,然后呢,你每一次啊告诉后厨去做菜,你觉不觉得他有点像后厨对吧?哎,这人是谁?这人是不是老板,你看吃饭的客人,服务员,老板,后厨是吧,爱做饭的,那你看你每一次去通知后厨做饭的时候,是不是都带着这个人点的所有点过的菜过去啊,啊,那说老师这怎么理解呢,你比如说万一你点了什么,这两个东西是吧,食物是相克的,说不能一起吃对不对,哎,OK。
31:56
所以说呢,这是第一次呢,带着大家呢去看这个图,好吧,同学们,哎,那我们回到课件当中,看看课件里边对这三个核心概念是怎么讲解的,说老师哪三个核心概念呢?我的妈呀,图白看了呀,第一个action CRA,然后是star,然后是reducer,不就这么三个人吗?他不算,那不是你的组件吗?啊,我们打开7.2走吧,读一读啊,Action叫做动作对象,包含两个属性,一个叫做type type是标识属性啊,值为字符串,它是唯一的。
32:27
唯一的啥意思呢?你就比如说同学你说是加好了,那只能有一个加,你不能说你这说是加,还有另外一个也叫加,那那怎么加嘛,对吧?哎,所以是唯一的是一个必要的属性,然后date呢是什么呢?是数据属性啊,值呢,是任意类型的数组啊,对象啊都可以啊,是一个可选属性,说老师为什么这是可选属性呢?因为你想一个问题啊。对于reducer来说,他刚开始给你初始化状态的时候,那我问大家,咱们已经知道了,初始化状态的时候,这个previous state是不是unde find呀,同学,这你别急,不是说老师说,哎这信口开河,随便说一会我们去验证这问题啊同学,初始化状态的时候,由于你没有之前的状态,所以说这传的是什么呢?我就写一个U就代替了是安犯对吗?好,那同学我问你啊,初始化状态的时候,你说你也不是加,你也不是减,你也不是乘,你也不是除,对吗?对吧?哎,那所以说你说这个type类型这是什么呢?
33:25
它是有一个值的,就是如果你要是加这个typeb类型肯定是加,比如说ad,如果你是减,那就对应减那个单词,但是如果你不是加,不是减,也不是乘,也不是除,那你肯定是初始化的时候,其实他也传了,它传的是什么呢?两个艾符完了是init in ne初始化啊,一会我们去验证这个问题啊,然后这个date呢,同学呢,你想一下。你加能说加几,减能说减几,乘能说乘几,除能说除几,但是你不加不减,也不乘不除,那你这date就可以不传,哎,就可以不传,所以说刚开始初始化的时候,这个date的值是压根就没有的,不是说有了一个date,完了date是安de find的,不是的,哎,所以说来咱总结一下同学,对于reducer,它帮你初始化状态的时候一句话,Type类型不是你所写的加减乘除,是人家里边内置给你写好的,类似于这种形式,艾福艾福initt啥意思是初始化?
34:19
啊,我的动作不加不减,不乘不除,我的动作是初始化啊,然后这个date呢,这个date呢,你注意啊,同学,人家有可能也不传,就是压根儿连这个东西都没有啊,没有,然后呢,Previous state呢是undeend也没有,这都是初始化的时候,然后action呢,就递给reducer了,然后reducer发现,哎呦喂,哥们,你是隐匿呀,啊,那来吧,你既然是初始化,那我这已经准备好了,我给你写了一个零,哎,然后把零给你交出去,对吧?哎,是这么一个流程,也就是说同学你初始化的到底是多少,你是不是得跟reducer对话,如果你想要初始值求和,那个阿里初始值,你想让它是99,那你就得告诉reducer reducer就我一会初始化的时候,我那值是99,你告诉reducer,哎,然后这个时候type来了啊,Type类型就是这种东西,艾符艾符完了引ne艾福艾福完,这呢date呢人压根没传,这会儿呢,直接就是安find来到了reducer reducer一看,哎呦喂,这种形式那是啥情况呀,你这是要初始化呀。
35:20
啊,那你初始化,我就把初始值给你完,直接返回状态,就这么回事,那好了,我们再往下看,然后reducer用于初始化状态和加工状态,加工时根据旧的状态和动作对象产生新状态的纯函数,纯函数这概念呢,大家别急,最后会给大家讲解的,现在你就理解为同学reducer,它能够接收到旧的状态,能够接收到action,然后还能给你产生一个新的状态,哎,就可以了。好了,Star将state状态、action还有reducer连在联系在一起的一个对象,就是整个那个图里边C位的那个人如何得到此对象,这都是API了啊,对象的功能这也都是API了,回头咱再说,写案例的时候咱再见,OK,同学们,那我就把这个图呢带着大家就看完了。
36:08
嗯,那这一小节呢,我们停一下。
我来说两句