00:00
好了各位,那接下来我们就把刚刚咱们写的这个求和案例给它改成redux版本。我们打开Rex的原理图啊。同学,我先给大家写一个迷你版,迷你版什么意思呀?你不能一下子把re里面所有的文件对吧?所有的写法,所有的API都用到,先写一个迷你版,我只用两个文件三个API就能让Rex开始工作。哎,所以说迷你版的意思是我肯定会精简一些东西,那为啥要精简呀,想让大家第一次接触Rex的时候别压力那么大啊,我要把谁精简掉呢?就是这个人。A crater。咱非得用它吗?也不见得是吧,就目前这个案例来说,不见得,以后说可能得用,但是目前这个案例呢,咱不用action c是干嘛的呀,各位。是不是专门创建action对象的呀,那我问一下action对象又是什么呀?
01:04
非常高大上的东西,不是,它就是GS里一个object类型的对象,你说对吗?同学,我是完全可以不用action,我自己亲手写一个对象是不是也行啊,只要对象里边包含着type,还有did是不是就可以啊?哎,所以说接下来我写的迷你版没有他。但是这个人得有同学觉不觉得到没有,你玩不下去了呀啊,然后谁也得有啊,Reducer。但是这你要注意。咱之前就说好了,是不是叫reducer斯啥意思?就是每一个组件都得有一个自己的reducer。你比如说有一个组件叫做AA呀,想把自己的状态交给redux,那就得为A组件构建一个reducer,那如果你有一个B组件呢,也想把状态交给redux呢,那就得为B组件是不是构建一个reducer。
02:00
哎,所以说人叫什么呀,Reducer,那谁是只有一个的呀,Star,诶,好了。那所以说接下来我就写两个文件,一个文件叫做store.js,那一个文件呢。你叫reducer.gs那你这么说好像不太合适吧?你想你就叫reducer.gs谁的reducer啊?为谁服务的reducer啊?你是不是没说明白呀,所以说接下来呢,我叫这个名字,Count_reducer.js一看非常明白这文件是什么?Reducer负责干嘛的,初始化和加工状态,为谁服务的?Count你看这多明白呀。嗯,好了,回到我们的代码当中,我要做一件事。那在这进行更改了啊,新建一个文件夹叫什么。所有redux相关的文件都放在这个里面,你在公司干开发也要这么做啊,右键新建一个文件,叫做到点JS。
03:06
右键再新建一个文件count_reducer.js不是为别人服务的,为count服务的,好了,文件准备好了,接下来是不是得编码啊?哎,但是各位别急,你要用什么去编码啊,是不是Rex啊,那所以说你是不是还没安装redux呢?哎,第一步走着同学啊,把redux请过来一样ad redux走。哎,你用人家就得安装人家呀,嗯,好,他安装他的,咱们回头看看这个图啊,你觉得这俩人我先写谁呢。其实吧,同学先后顺序也没那么重要,但是对于初学者来说呢,希望大家先写这个store明白不?哎,先写这个store啊,然后再去写这个reducer,先把最核心的那个人,咱说在C位的这个人是吧,先给他请出来好了,那回到我们的代码当中啊,库已经下载完了,那接下来呢,给这块关掉。
04:12
来到道,那问题是这玩意咋写呀?这道是个什么东西呀?同学,你说我这么写行不行呢,Cost?道等于一个对象吧,好了,我定义完道了,然后把它暴露出去,说老师那怎么暴露啊,随你的便,你是分别暴露,你是统一暴露都行,但是我这个文件同学,你看它的名字是不是叫store.js啥意思?就是用于创建store的一个应用,还不可能出现多个道,所以说你用什么暴露最合适啊?是不是默认暴露?默认暴露一般我们暴露一次只暴露一个东西,是不是选择用默认暴露?啊,同学,你要这么写啊,我只能是说你符合了这个命名相关的这个规范,但是这道是个假的吧?哎,同学,死道这么简单呀,原来他就是个空对象啊,这不行,你说对吧?那问题是这死道到底是个啥?我从哪儿得到呢?
05:10
那你来到这个图里边,同学,你觉不觉得store啊?对于我们整个应用来说,这哥们太重要了呀,这能是程序员自己随便写几行代码就创建出来的store吗?绝对不是。哎,所以说你别尝试着自己去写,同学,你要分分钟就能把store这个东西自己写出来,那恭喜你,一个redus你写完一半了,对吧?Redu的底层实现你写完一半,所以说同学不要尝试着我们自己去写这个store,那这store从哪来呀?别急,同学,这些删掉,我先把一个人请来,都不用我解释,大家马上就能明白这个人是干嘛的,从哪请呢,Re。这里边有个方法,你看,注意听我说的话,我说一个方法叫做。同学,我觉得啊,咱开玩笑的说,你现在拿脚后跟猜都能猜出来对吧?你说create store啥意思,是不是创建store了?好了,那还客气什么呀啊,那我得给大家写好注释是不是?哎,走嗯,叫做引入什么呢?Crystal。
06:13
干嘛的呀?专门用于创建redux中最为核心的四道对象,哎,不能是你创建,得靠人家创建来吧?那不客气了,走Chris道,我说它是方法,是不是得加个小括号,那是不是得调用啊?那我问一下里边传啥呀?什么也不传吗?空空如也就调用一下不?说老师那传什么我不知道,看图说话吧,走同学,谁为道卖命服务啊,是不是reducer?所以说同学你在创建道的时候就已经指定好了谁呀,Reducer。说老师,那我怎么能把它记住呢?同学,你想一下,Store是不是相当于餐厅里的老板,那么reducer有没有一种感觉是真正做菜的后厨?那你说老板在开饭店之前是不是就已经找好了这个后厨的团队呀?你见过那样的饭店吗?开业了,客人去吃饭,老板说不行,今儿吃不了,为啥后厨团队我没找呢?这不行吧?哎,所以说同学,回到代码当中,这儿你要传一个人进去,Reducer。
07:30
那reducer在哪儿呢?这不就在这儿呢吗?Count reducer,哎,那所以说你还得做另外一件事,叫做引入为count组件服务的,谁呢?Reducer,别客气了,引入。但是目前有一个问题,这文件我写东西了吗?同学,就比如说里边,哎,你写为什么东西,这东西是不是都没暴露呢呀,那你咋引入啊。是吧,你在这,那你看你这你这咋写。
08:00
是吧,老师这写不下去了,你可以在这随意的去发挥,如果你这样写,那就意味着这个文件以后你要咋的,你要使用分别暴露或者是统一暴露的形式,你才敢这么引入,对吗?哎,那同学我问一下,如果我要这样写呢,Can'reducer from当前路径下的count reducer,我这么写什么意思啊各位。是不是以后这个文件会用一个默认暴露的形式暴露一个东西啊,哎,所以说这块也不是说非得就这么写,同学你这么写也行,对吧,你怎么引入,那你那边对应就怎么暴露不就得了吗?啊,但是reducer一般我们用默认暴露,为什么呢?因为同学他已经是为count服务的reducer了,他不管别人,所以说一会儿他就暴露出去一个东西,那为什么不用一下默认暴露呢,对吧,但是这也不是说说死了是吧?同学你随意发挥,你咋写都行,好引入了,那这是不是得传进去啊?OK,这不就搞定了吗?
09:02
那同学我问一下你为啥调用。是不是想创建一个store对象啊?那你是不是没接住啊?哎,接一下咋写star等于这不就可以了吗?但你这么写,那你就白玩了一圈,为啥呀?我就问你,到点GS有暴露任何的内容吗?这死道对象咋的,你接住了就把它放在这儿了,没看它都是灰色的吗?是不是没用上呀,所以说你说怎么办呀,这死道咱是不是得交出去,你先别管谁用,是不是得交出去,你不交出去放在这儿,那那有什么用啊,哎,所以说你得把它交出去,start.js start.js就是创建start的啊,那我在最上方给大家写一个注释,诶,该文件专门用于暴露一个死到对象,整个应用只有一个要对象完事儿,所以说补一句代码就搞定了,Port你暴露几个东西啊,一个那就DEF啊,谁呀star。
10:18
那觉不觉得这么写有点麻烦呢啊,我用一个道变量接住,我在aport多麻烦呀,Aport default直接和这接上对吗?这删掉这不就搞定了吗?啊写好处是暴露四道。哎,就三行代码道就写完了啊,关掉它,接下来写谁啊?哎,Reducer了同学,这是重头戏啊,你别觉得说老师store很重要,Store是重要,但是你没自己写,你直接create store是不是就出来了?好了,关掉,接下来写谁呢?R?同学,先别编码,我先写点注释,咱想明白这count reducer他都能干啥事儿,我不希望大家死记硬背,知道吧?哎呀,你这个函数接到什么参数,我不想让你背,同学,你把原理搞懂了,自然而然你就知道你要写什么了。回到图来说。
11:17
同学,Reducer是不是能初始化状态和加工状态,那你说reducer以后是不是会收到两个东西,一个叫做之前的状态,一个叫做action对象,你说对不对吧?Reducer得接到东西,你说对不对?对,那接到东西之后reducer怎么办?接到东西之后怎么办,是不是得根据之前的状态,根据你action里的type类型,你是加是减呀,对吧,然后你加几减几啊,是不是给你处理一些哎状态相关的东西,然后怎么办。说得把新状态交出去,同学我就问你啊,就在GS的世界里边,谁能接到点参数完了处理一些逻辑,还能再给你一个返回值,你说谁能办了这种事儿?数组能办这事儿吗?不能吧,一个number类型的能办这事儿吗?也不行吧,同学,那还用想吗?是不是函数类型?
12:15
那你看函数接收参数处理一些事情,交出一个返回值再正常不过了吧,哎,所以说来吧,走,回到代码当中啊,先写好一个函数对吧,函数叫什么名字呀。最好跟他同样的名字,是不是叫count reducer写呗,Con,但是你最好写小驼峰啊,小驼峰先定义在这儿,注释写好了,这文件是干嘛的呀?该文件是用于创建一个为count组件服务的reducer reducer的本质就是一个函数。
13:02
完事儿。写好函数了,那同学我们回到图里,看图说话,这函数能接到啥东西啊?之前的状态还有啥action回到代码,那还客气啥?在这儿是不是开始写,但是我不写那么长的单词了,Previous state,我简称pre state,行吧,Act action对吧?好啊,那在这儿呢,咱再补一句,哎,第二句叫做reducer函数,会接到两个参数,分别为之前的状态括号谁pre state,再来个逗号动作对象谁是吧,Action OK,搞定。啊,老师,那接下来呢,那你分析呗,你说接下来他怎么办呢。
14:04
同学,回到图里边,我是不是得根据你的类型type值?啊,比如说你说加,那加几,我再根据date是不是执行加呀,那所以说同学你说是不是得从动作对象里边必须取出俩人一个你要干嘛,一个要干这件事的数据,回到代码当中,不客气了,Cost结构赋值,Act ion,拿到东西谁你要干嘛,还有啥这件事的数据对吗?好了,走,接下来怎么写?那接下来呢,你再回到图中,你想想同学,一会儿如果我想加的话,你是不是得先约定好一个就执行加法的那个事件的类型吧。它本质是不是一个字符串,你看图是不是字符串啊,其实你用什么代表加都行,同学你用ad代表加是不是也行,你用sum求和代表加是不是也行,还有说你用这个单词是不是也行,那我们选择哪个呢?这个increment,哎,就以后如果它的type类型是一个字符串,里边写的是increment,明白了加。
15:12
那所以说这怎么办呀,是不是得写一个判断呀,那最传统的判断是不是可以写一个if判断,那咋写,如果type类型它是等于啥的increment的,我就怎么地,是不是下边再写else if else if对吧,啊是吧,那下边再来一个else是不是也行啊,但是在这儿啊,同学,我们一般不写if这种判断。说老师我就写,从语法上也不错是吧,也都是可以的,你只要能把判断实现了就行呗,对吧,你判断出加,你真给人加了那就行呗,但是一般在这我们不写if判断,我们写什么呢?同学有这么一个判断,我不知道你还记不记得了,叫做Switch case。这不也是判断吗?对吧?好了,写好注释啊,走,这叫做从action对象中获取什么呀?Tap还有谁呀?
16:14
OK,那这再写好注释,根据type决定如何加工数据对不对,是加是减,是乘是除,好判断的不是K是type类型对吗?K,那咱没value,咱是不是可以直接自己写个字符串,如果您是re。那你告诉我这怎么办吧,同学。他已经告诉你了是加,而且加的数据呢,已经藏在这里边了,对吧?啊对action里这个点date里,那你说接下来咋办。有之前的值了。比如说之前是九是八是七,然后也有现在要加的值了。是不是真正得执行这个加呀,那咋加呀,是不是p state之前的零啊一啊二啊加加几呀,是不是加date呀。
17:08
啊,OK,那同学我问你啊,已经决定是加了,还用再往下判断吗?还再往下看吗?不用了。说老师那不用了,那break来同学reducer是不是要有返回值啊,你已经明确的知道了,人家要加加的是这玩意儿,是不是就执行加把加的结果返回是不是就得了呀。那你说这break我还需要吗?大家想一下。你说我代码执行都遇到return了,那你这break其实就没得用了,那就把它删掉嘛,好,那光有加没有减呀,有减呀,所以说这一堆CTRL,哎复制一下,这不叫加,这是什么呢?写好注释,这叫做如果是啥加。
18:00
那这写好这叫啥,如果是啥是不是减呀,哎,那减就得把这个改成是吧,哎。说老师那还有呢。还有得基数在加啊,完了异步在加,哎,同学你等等,这块你要注意了,我们在reducer里边不管那么多的事,只管最基本的动作,你是加是减。对吧,你别跟我说废话,哎,说什么哎呀,那个我基数的时候,你看看你在家你得写个判断啊是吧?哎,如果说我这个家得等一等,在家你给我包个定时器同学reducer不管那事儿。你就想象这么一个场景,回到厨,咱说这玩意儿是不是相当于饭店的后厨同学生活中的例子,你想一下啊,你点了一份菜,但是你忘了告诉他不放香菜。这个时候你直接去闯入,人家的后厨说,谁给我做那个菜呢?啊,我那个红烧鱼确实得做,但是别放香菜,你能这么办事吗?不能。
19:01
所以说同学reducer不管那么多细节上的问题,哎,什么基数在加,然后偶数在加是吧,时间初二是几点了,然后在加人,不管那么多事儿,Reducer的意思就是兄弟,如果你想基数再加,那你在之前的这些环节你给我判断好了,或者说你压根就在您的组件里边,你判断好了。对吧,如果现在不是奇数,你别告诉我加呀,你只要告诉我了,那我肯定就会加的,我没法给你那判断,你就告诉我加还是减,加几减几,别跟我说废话啊,什么这个奇数在加,我不听,哎,所以说回到代码当中,这你就别写那么多了,什么基数在加,其实啊,这是一个概念。Reducer啊,它是一个纯函数。但是我们还没给大家讲这个概念,所以说呢,就简单说一下啊,它是一个纯函数,很纯粹,你不管那么多无聊的事,好,那同学你说进入default是什么意思呢?
20:00
如果说进入前两个啊,行,这叫加,这叫减,那我问一下啊,如果进入这儿呢。啥意思?回到图来看,你确实掉reducer了。但是你却不说加,也不说减。同学,你说对于我们来说,是不是只有加的时候再找reducer,对于我们的组件来说啊,这不是你写的count组件吗?你只有加的时候是不是找到reducer,嗯,大哥加一下,你减的时候找到人家,嗯,大哥减一下,那我问你同学,有这么一个场景,Reducer被调用了,但是不加也不减,你说这是啥情况?哎,同学,这就是初始化的时候,不知道大家还记不记得了。啊,如果是程序员编码,那你得说,哎,我想加完告诉人家加,我想减告诉人减,对吧,但是有一种情况,程序员没说不加也不减,程序员说我没什么动作,那就是什么呢?初始化的时候。
21:01
啊,这个初始化的动作,同学你听我说一下,不是说我们程序员自己亲自的去找人家了啊,我要加,我要减,是整个页面一进来,这到这个点GS1加载。死道就帮你做了一件事,道说,来吧,Reducer,行行开始工作了,我给你分发一个action,但是我不说加,我也不说减,我告诉你干嘛呀,你去初始化,而且我date还不给你。啊,我不给你,我就告诉你,你得去初始化东西了。啊,那同学你想初始化的时候,咱之前也说了,船的之前的状态是几啊,是不是UN DeFine。哎,所以说同学来到这,你说这怎么写呀,我不加我不减,加你就加,减你就减,那我不加我也不减,说老师那明白了,那就是初始化的时候,我得return一个零求和,那不是零吗?你这么写当然也没问题,也可以。
22:00
但是一般呢,我们这么写,同学你说pre state啊,如果已经初始化完了,说现在已经初始化完了,它是零,完了你点了加号,你点了一,那你说人家传进去的pre data是不是就是那个零啊。但是我想问你在最开始的时候,初始化的时候呢?咱说了这玩意是不是安de find呀?哎,所以说咱可以这么写,同学判断,如果pre state它是de。那就证明啊,现在是不是属于初始化的过程,那我就做一件事,把pre给它改成零。完了,我这返回啥呢P。同学,不是说你这直接返回零不行也可以啊,当然可以了,没说不行,但是一般来说呢,我们这么写一下。啊,如果你之前的是unde find的,那我就给你写成0ANDDE fun代表啥意思呀,那你是初始化的时候啊,那你给我传的安de find,那不行,那我自己的业务逻辑是它得是零,那我你改成零,那你把这个给我返回去。
23:08
啊,这么写可以。还有一种更为推荐的写法就是你这么写同学在整个reducer上方。你定义这么一个东西,Init啥意思?初始化的,初始化的状态等于几啊,完了,这个里边我不写任何的判断,删掉。咋写呢?这什么意思?看你功底够不够,就不说学啊,不说什么reducer,我就问你,这是一个函数。完了,我在这能这么写,啥意思?这是不是叫行参的默认值?如果以后别人没有给你传pre state,或者说传递的pre state是unde find,那这个时候在这是不是就直接把date的值就改掉了呀?
24:00
哎,改成几了呀?零,那为啥非得这么折腾一圈呢?说老师这就删掉,这就p re,我这就直接零它不香吗?也行,但是你这样的话,代码的可读性不高。同学们,你看,我想看一下这个count组件初始化的状态是多少,你是不是得划到最后去看这啊?这就不太好观察,那如果你像我刚才这么写撤回来,你觉不觉得当以后你打开任何一个组件的reducer的时候,可以明确的在第一行就观察出来,明白了为组件的初始化状态啥呀零这多清晰呀。哎,所以说推荐大家这么写你自己吧,下去试试,不代表说你就非得按照我这个这么写,你自己自由发挥,改一改也是可以的啊,或者来这样,同学,我这不这么写,我这不行,咱默认值我这就零行吧,按照大家节奏走,不加不减,那我就给你初始值呗,你加你就加的,减你就减的,是不是完事好了,同学,Reducer定义完了,就这么简单,但你这么写不行,咋的呢?嗨。
25:11
你这是不是引入reducer呢?而且是不是用默认暴露的方式引入reducer,那我问你这边暴露了吗?没有啊,哎,那还不简单,Export default暴没暴露?暴露了呀,好了,同学,就这俩文件够玩的了,关掉。好。Star准备好了是吧?哎,Count reducer准备好了是吧?哎,好了,关掉两个最为核心的文件,准备好了。哎,那同学考虑一个问题,回到你的组件里边啊,回到你的count组件里边。首先这些里边的东西你考虑考虑得怎么改。你求和那和我问你,你已经交给谁管理了?你是不是已经交给re管理了?
26:02
那你自己还需要存储这个count值吗?还需要放在自身的state里吗?是吧,不需要了,对吧?还不需要了。那不需要了,这是不是就可以不写了呀?那你这不写了,我问各位一下啊,你说现在我都没有count了,那你说有必要再写一个空的state吗?没有了,但如果说同学你比如说你有一台车,比如说想在这存一台车的数据,叫做car name,怎么写car name,比如说奔驰,那比如说这个这个这个车吧,C3是吧,哎,我的dream car是吧,好说老师那我这里边不想存核,但是我想存一个车行啊。说老师这车呢,我就只想自己用,完全可以啊,没有必要把这车交给redu吗?那你可以有自己的状态的呀,但是你自己状态里的谁就不要再有了,是不是count?哎,你不要再写零了,因为已经交给re了吗?是吧,我在这把这个奔驰什么C63我写在这儿,我写这啥意思啊,我只有想表达一件事儿,不是说。
27:05
你can't把状态交给了reducer,这里边就不能有自己的状态了,可以有自己的状态,需要跟别人共享的,你再拿出去是不是?哎,好,写在这,就奔驰463写在这,好,同学,那你说呀。你还能this.state什么count了吗?这些是不是都不能写了呀?但是咱先别急,先不改这些方法,方法咱一概不提,你先别考虑,老师,我要加,我要减,兄弟,你能不能把初始值先给它展示出来呀?你初始值还展示不了呢,你琢磨什么高级的操作呀,对不对?好了,周老师,那我就这样写呗,this.state.count兄弟没了。Count没了,所以说在这儿各位社保不能找自己家的状态要那个count值了。那你得找谁要啊?找谁呀?交给谁了,你就找谁去,同学,你把东西是不是已经交给Rex去管理了?
28:03
那就去找re去对不对?哎,Reducer,而且把东西交给谁了,Star,那你找谁要去是不是找star?好了。找死道。那你得调吧,那这里边有吗?没有那就得哎入from走当前路径是不行了,点点杠翻出去,点点杠翻出去,找到谁下的谁。同学,那你就想嘛,东西在人家那儿呢,你不把它引入一下,哎,好了,复制。写好处是引入道,为啥引入啊,用于获取状态,用于获取redux中保存的状态。好了,来吧,这写吧,Store已经就位了,这么写就行啊。兄弟,你这么写就完蛋了。那你看一下,这么写的后果就是。
29:01
回到咱们的这个页面当中。打开一下吧。同学,他说啥?Object是不能够作为一个react节点的,同学咱好像在讲第一天react react的时候是不是就遇到这个问题,啥意思呢?回到代码里,兄弟刀是个对象,你干嘛要把一个对象展示到这儿呢?是吧?那不行,同学,你要的东西存在人家里边呢?你是不是得进一步找啊?那怎么找呢?好了,给大家推出第一个API到点身上有这么一个方法叫做get state,同学,啥意思?我觉得这个方法太直观了,Get state是不是叫得到状态?恭喜你学完了到的第一个API get state就是得到状态。好了,回到页面我们看效果,同学零是不是就位了呀?同学,我问一下这零搁哪来的呀啊,他打哪来的呀?那你就想呗,这零是不是Rex保存的状态啊?对呀,那Rex里边同学是谁专门负责初始化和加工状态呀,是不是reducer,嘿。
30:10
回到代码。找到Rex,找到reducer。来注意各位,我要把它改成99呢,保存回到页面。啊,刷新一下是不是99,哎,OK。啊,来慢慢分析,同学,你说能拿到这99,是不是证明有人掉了count reducer对吧?没人调count reducer,你怎么拿到这99的呀?但是同学你回到这个里边看,Reducer想要被调用。是不是肯定要是从根儿上来说,你肯定得在组件里边,你说了加,你说了减,完了走了这一套流程,完了来到reducer,这对吗?但是我想问的是。就在我那个组件里边,就那count组件,我啥代码都没写呢吧,我有写任何的代码通知re,加还是减吗?各位你就回到这儿看,咱就找到components下的count在这。
31:09
我好像刚才就写了这么一个玩意儿吧,我有写任何的代码通知Rex加减没有,但是我问你咋还被调用了呢?那是因为死道帮你调的。为啥帮你调啊?不帮你调你咋拿到初始值啊?那我们接下来就验证一个问题,Consolo输出一个人谁呢?两个人吧,都输出输出之前的状态,OK,不还输出谁?Action同学们,根据刚才我给大家去形容那个图的时候,我所说的第一次初始化的时候pre state是多少?Unde,它没有之前的值。Action。里边得包含两个属性,一个是不是叫tap对吧?Tap的类型是啥?Type的类型,嘿,绝对不是你的家,绝对不是你的减,因为不是你说的对吧,本次调用reducer不是你触发的。
32:05
那咱说了,它里边这个date是不是也不应该有。因为我我都没说加几,那你说你怎么给我这date呢?那所以说同学咱刚才咋说的,第一次人家帮你初始化的时候pre date是几。是安德范的。I里的type是类似于一种这种形式的,什么艾艾符in ne是吧?初始化的那data属性有吗?压根就没有。好了,保存回到控制台,我们见效果刷新走咋样?同学看一眼p state是不是安de find?那初始化我哪有之前的值啊,给你个吧,Type类型,你看着at符啊,那当然了,它在这又加了点别的什么,Re,但是也有这词吧,Init。那后边这些是啥呀,后边这些啥呀,随机的一些字符,你再一刷新它还变呢。为啥非得混入这些东西啊,它是这样的,它防止他所写的那个type,万一和你这里边儿的哪个对上了,那是不是就完了呀。
33:08
啊,那所以说它后边加了几个A随机的字符,谁能写出这种type值啊,艾符艾符re,杠,In ne,还得写这么一堆东西,那几乎是没有这个概率跟他一样的是不是?好了同学,那你看咋样?是不是初始化完事了?同学,我是不是成功的读取到了redu里边所保存的count值,哎,OK,回到代码里边,那同学关掉这那在这改良一下呗,咱刚才咋说的来着,等于几是不?哎,那这咋写等于state?哎,那这咋写呀,是不是pre state?哎,其实你不这么写是不是也行,哎,但是尽量这么写啊,在这写个初式,这要干嘛呀,初始化是不是状态。哎,你就想想,哎想想好关掉,那接下来呢,就就就光展示到这儿就得了。
34:06
这加和减不写了呀。不行的。是吧,啊说老师,那这怎么变成零了呢?这怎么是零了呢?那你考虑吗。来,回到这儿。你这一上来是不是安顿饭的呀?然后发现型材默认值直接就改掉了吗?对吧,那你这在输出的时候已经是改完的值了嘛,对不对啊好了,那这行输出呢,咱也不要,就是刚才验证一下问题,OK,回到组件当中慢慢来。你读状态你是读出来了,咱不说别人同学你就把这家写明白了,这家如果您写明白了,一切都走通了。说,老师,我就这么写了,你这么写就犯错了。this.state啊,对象有count吗?有count值吗?没有,那你还在这什么this.set state这count都不在自身了,对吧?各位,哎,咱就理性的分析问题吗?也没那么难,那你说这怎么办呀?反正你不能这么写。
35:03
反正你不能这么写。用户的输入是不是该获取获取,但是这儿是不是也不要再读了呀。自己的状态里没count值了,所以说在这同学我写一句伪代码。通知。Redux加value,你说是不是就得了啊各位通知redux加value,用户说了加这个那就加嘛,那谁帮你加呀?通知re,那问题是咋通知啊?那就教大家第二个API对吧,点。点啥呢?看图说话,Dispach啥意思?是不分发,你得分发一个啥玩意儿是吧?Action对象action对象里包含俩属性,Type和data,对吗?好了,不客气了,回到代码当中,Pach。爱分发啊,说老师原来这派是在道身上啊。那可不。
36:03
start.dispatch调传入一个啥it对象?Action对象从哪来?从哪来自己写对吧?Tap你想干嘛你想干嘛说明白是不是想加啊老师我加你这能行吗?不行,兄弟,Reducer里边正在判断你的type对吗?必须跟这玩意儿对上,你敢写错单词,他就计算不了。回头来到这是不是问题是加几啊?加Y6。直接写就行了,不行的是字符串是不是变成数值。好。来咱试试啊,看看他能不能帮我加呢。回到页面刷新,我点加了啊。走哎呀走,哎哟哎哟哎呦呦呦同学是不是没加成啊。
37:00
没加成,那你说有几种可能性呢?是不是有可能你这单词拼错了,完了到人这判断的时候,人没匹配上不给你加呀,那这样我这单词都复制过来。其实我没写错是吧,我都复制过来。你发现他依然加不了。这啥情况呢?同学来我问一下,就你自己学习的时候啊。你遇到这问题了,你咋解决就没人给你讲了,你自己已经学到这儿了,都跑通了,读也读出来了,但是就是不加,你觉得你应该在哪里打印一些log去瞧一瞧呢。兄弟,你是不是得在这R里边啊。你就比如说我不知道你匹没匹配上这个家,你是不是在这给我来一个艾特福啊,如果输出艾特福就证明是不是成功匹配这家了呀,那不就得了吗?试试吧。哎呦喂,兄弟,是不是匹配上了呀?但是你说气人不,他就不给你加说老师,那是不是这块没运算呀,那这不可能吧,这第13行就仨单词一个运算符,还能写错了,不能,那又是为什么呢?
38:05
同学,你还有一种测试的办法咋的呢?来到这儿,同学你说刚开始啊是零,如果您点的加,您点的一,它奏效了,那你说以后再调的时候,那个pre state你就告诉我吧,同学是不是得增长,是不是得增长好。放到这儿。因为你想嘛,初始化是零,如果您点的加一起作用了,那我问一下是不是就把状态改为一了,等你再去点加一的时候,那我问一下传入的p state是不是就是之前那个新的一了呀。那咱试试吧,刷新。一上来是不是零,你注意了啊。同学,这是初始化上来的那个零,这是你第一次点的加,第一次点的加是不是还没进行加呢?那拿到之前的状态是不是就是零完了就加完了,是一等你再点的时候,同学你发现那个值是不是其实在增长啊,它在增长,那页面怎么就不变呢。
39:06
那跟大家说一下是这么回事儿,同学你说啊,我们放在自身date里的东西,只要你敢调这方法。只要你敢调set state。React就给你承诺了一个事儿,承诺啥事?React说,兄弟你放心,只要你敢给我调set state,我就能帮你更新react的状态,我不仅能为你更新的状态,我还能帮你重新调一次render。我能帮你重新调一次render。然后页面是不是就刷新了,这是谁给你的承诺?React给你承诺了几件事,两件事,一能帮你改状态,二能帮你调render,对吗?好。但是Rex,他只给你承诺了一件事,我能帮你维护状态。
40:06
但是至于说你改完状态,我能不能重新引起页面的更新。我不给你承诺这事儿,所以说同学redux只是帮你管理一下状态而已,就你刚才点的这加号,我不能说你没改状态,状态改了,但是redux里状态的更改默认是不会引起页面更新的,因为啥呀,Redux不是Facebook出品,人家只是帮你管理一下,你更不更新,你跟我不挨着,哎呀,那这咋办?现在这个状况很尴尬,初始化的读能不能读出来,能,那因为初始化一上来是不是掉了一次render啊,哎,那所以说有结果吗?说老师那以后我点加那改呗,Redu里的状态确实改了,但人就不给你更新页面呀,你这玩意你怎么办呀。是吧,那同学你说现在你想做什么呢?
41:03
是不是得通过某种办法?我监测一下。如果redux里边所保存的状态。发生了改变。那我就自己是不是去调一下组件的软点。好。来,那怎么能监测到redux里状态的改变呢?回到组件里。我们这么写。看着啊,我先来到reducer里把这个注掉,因为大家已经知道了。确实啊,我改了re里的状态,但是我怎么知道改了呢?同学,我是不是得在这个组件里边去监测呀。我在这个组件里边去监测发现,哎呦喂,你看read里东西改了,那咋办呀?哎,我自己去调一下,Re,对吗?好,那怎么办,怎么监测呢?
42:00
来。你得在这个钩子里,Component啥意思?组件只要一挂载,我就做点默认的事儿干嘛?监测redux中状态的变化,只要变化就咋的,是不是调用render?写好注释吧,咋监测呀,有API。这是第三个API到点,其中有一个方法啊,都在身上啥意思。订阅。啊。这个词呢,其实你自己也可以去查一下啊,有道啊复制。你如果说觉得你应记记不下来,那你就查一下嘛,Script是本身就有订阅的意思,哎,Script订阅的意思好了,关掉它是个方法,它里边传一回调。
43:08
这回调什么时候执行,跟大家说一下。只要redux里边所保存的任何一个状态发生改变。都会掉列回调。验证一下艾福。来试试刷新页面。点击加号啊。同学,我是不是确实引起了redux里边状态的改变?那你说你在这儿干一个什么事就得了。嗯,干一个什么事。是不是去调软点。那来吧,Render在哪呢?是不是在这,那怎么调render啊?这是不是箭头函数,没有自己的意思呀。这是不是生命周期钩子呀?生命周期钩子里的Z是不是都是组建的实例对象啊?这么写理论上是不是可以啊?this.re对吗?
44:01
好。回到页面看一下效果,点击加号走走走走走,哎哟哎哟同学是不是也不好使啊,那为啥呀。我说一下啊,我说一下回到代码当中,没人这么玩。同学,这render如果靠你这双手,你去调不好使。我们啥时候玩过这东西?This render,自己去调不行。你直接调它不起作用,老师,那咋办吧?那我告诉大家,这里面有个技巧,this.set state说老师你这看嘛,你写来写去,这不写回去了吗?老师,你这么写呢,你这不又动自身的,你等我写完呀。这啥意思?嗯,啊,我要更新count组件的状态,那你要更新啥状态呀,我啥也不更新。说老师那你啥也不更新,那人家还能帮你调render吗?能。
45:00
这个set state其实它有点问题,我跟大家讲,咱们后期会深入的讲一讲这个set state。这个state呢,它有点效率上的问题。同学,你觉不觉得这是什么意思啊?我要更新自己的state,那你更新啥呀?我啥也不更新。同学开玩笑的说,你觉不觉得你晃了人家一下?诶,就你晃这一下子不要紧。你晃完了他,他也调render,它里边写死的,你只要调了set state,哎,我就帮你去改状态,改完状态我就调render,人家帮你调啊,帮你去调render。说老师,但是我什么也没改呀,没事儿,什么也没改,他也是个傻子啊,他也觉得,哎,反正你调了3STATE,我就帮你紧随其后调render,那一调render,我问你是不是重新执行这句话。好看效果。走走走走走走,嗯,是不好用了。OK。啊,这不OK吗?这不可以了吗?哦,好,那回到哪儿呢,这儿。
46:02
那你这个东西为什么要写在data里啊?同学,那你说我啥时候去监测us中状态的变化,这组件还没挂载呢,我就监测去,没那必要吧,啊那所以说同学那加你写完了,那你告诉我姐你咋写呀。复制。减咋写?同学,你说是不是也不用读取原状态了?是不是也不用set state了?咋的走store.dispach这不能写ment,你告诉我写啥?如果要是奇数在加,反正都是加加,是不是就得执行这一堆,哎,完事,但这儿不行,自身没有count了,读不到那咋办?那咋办?注意。这儿不能这么写了,读取的是count值吧?是this点吗?说老师,那我怎么读出Du里的状态,咋读来着?哎,你读过呀,是不是在这儿呢?好。
47:00
复制。来到哪儿这儿?Count。这不就有值了吗?老师这咋不结构赋值呢?哥们儿,你解解什么够你赋什么值啊,到点get state拿的本身就是个数字零对吗?那你看你刚才是不是在这儿到点。说老师那怎么拿到的就是个零,他咋不是一个对象呢?那你找谁去,你找reducer,你问问他吧,Reducer说那我冤枉呀,那我这一上来就是零吗?然后我就把零交出去了吗?对呗,那你这要写一个对象呢,你比如说A冒号它是零。那你就得解构赋值了,你得拿A对吧,但是我们不用写这么麻烦,我就一个count组件,就想存个数字零得了呗,是吧?啊,那回到这儿慢慢来,同学啊,慢慢来,那你说这是不就不能结构赋值啊,哎,那这是不是可以正常判断呀?啊,那E不加呢?那也非常简单呀,我拿到之前的纸是不是也不用了呀,因为我就是等一会儿嘛。
48:01
然后就是这一句话走到点dispatch,就是你要跟到进行对话啊,由于你是加那就加,那等500毫秒,那就等500毫秒,对吧,这些都是一样的。好,回头看一下效果刷新啊,加一没问题。加二没问题。加三没问题,减三没问题,减二没问题,减一没问题。是不是得奇数才能加呀,现在是不是偶数,嗯,加不了,那奇数呢,11可以一步再加来选个三等一会儿走。是不是加完了?OK,这案例实现了,那么我再说一个小技巧,同学。我把这些加呀减呀乘啊不是乘是吧?啊,这基数加呀,一不加我都折叠起来,同学,那你说呀,你是不是得在每一个组件的data amount里边都得做这件事儿。你以后如果有17个组件,17个组件都得写data。
49:00
啊,完了,里边都得这么晃他一下。那你这写的是不是稍微有点不太合理啊?对吧,那怎么办呢?你每个人都这么写啊。你可以有一个更狠的办法。不写,老师,那你完了。你这不写你完了,你这家啥的都废了。Re,里的状态是改了,但是不引起页面的变化呀,哎,你看着我怎么写,我不在这组件里写。我在另外一个地方写,我只写一次。一劳永逸,你有3000个组件我都不怕。我用一次就写完,咋写呢?看着index是啥意思呀?是不是入口文件呀。你瞧着啊,我咋写?我先写着引入道,当前路径下的易达斯下的道。看着道点。
50:02
Sub c啊走。这一堆。拿过来。这么写啥意思?嘿,我是不是在index里边就开始监测了。只要redux里的状态发生任何的变化,同学不是说哪个组件,我重新render set state,我这么一写啥意思呀?我是不是把整个都重新调了一下render,那你说APP重新调render,那APP里边所有的子组件是不是都得重新调一下render。那你说这么一些来。走。啊,刷新一下啊走。是不是可以了。捡。奇数加等一等再加是不是都可以了呀?那你可能说哎,老师那不行啊,那你这么写效率低呀,你比如说你有3000个组件,你只是改了一个状态,那那两千999个就都得重新render一下,那效率低呀,同学没事儿。
51:09
Render就render呗,我们之前是不是说了一个DOM的低平算法,对吧?来想想DOM的那个低平算法是不是在这看看着呢,没事儿,你就算掉了一次软点,我还真把节点重新生成都往页面上放啊,没事儿,Do的diff算法在这看着呢,不会引起页面大面积的重绘重排,大面积的更新,哎,所以说在这写一劳永逸。啊,但如果说你不喜欢在这写同学,你再组建自身写是不是也行?好,这是一个最简单版的,Redu同学,我们整体过一遍啊,整体串一遍,我一上来是不是先写的re?完了,是不是写的道?那这非常简单,完了是不是写的reducer,完了说得,诶写在这儿,完了用形态默认值,完了用Switch判断对不对,好,然后就开始写到这儿了,其实这个精简版啊,这个迷你版,其实它真没多难,同学只不过是说什么呢?哎,遇到点坎咱就写不下去了,得来个API,遇到点坎学不下去了,咱就得来个API,第一个API到点该state干嘛呢?专门用于获取状态。
52:17
是吧,OK。啊,那我再问大家还有一个谁PA干嘛的。你得告诉redu嘛,你得说话嘛,告诉人家我要加加这些是吧,那还有一个到点script,专门用于订阅redu里边状态的更改啊。好了,希望在座的各位啊,不慌不忙的,一定要把这个版本练熟了,我们再往下听明白,不,不允许你这个都迷迷糊糊的,你练都没练,都写不熟,都写不全,你还往下写,同学,我可警告你啊,你如果这个敲不熟,再往下听,你就会越听越迷糊啊,老套路,CTRLCCTRLB,右键改个名二_src走叫做啥?
53:04
Rex迷你版。啊,精简版或者说精简版吧,不说迷你了,精简版好,这小节停。
我来说两句