00:00
好,我们先来看一下我们昨天讲的东西。来昨天呢,其实我们是先把我们昨天那个Rex部分的知识部分,现在点给他讲一下。就是能够去让他去实现。redux有一个概念叫异步。Re,义务靠什么呀?是不是有一个。插件叫redux吗S?嗯,它的异步体现在我们那个action create返回的是个什么。是函数啊,在函数里面是不是就可以执行那个异步代码。啊,成功或者失败以后呢,去访action啊。好,重点我们还是去讲我们项目里面。那首先呢,我们需要在项目里面去搭建我们整个的一个什么环境。
01:02
就真的把它引入进来,那一上来就需要去创建一些文件。好。再一个说一下我们现在这个,我们现在的这个写法呢,是一个简化的写法,其实如果在公司的项目里面,他会将因为我们现在不有很多action吗?有操作不同数据的action吗?他会把操作不同数据action单独写成不同的模块。我们不定义的是action吗?那它就会有title action,有什么user action?能听到吧,那这样的话,我这就不是一个一个文件了,而是一个文件夹了。这能听懂不啊,那同理,这个也是,我们是不是把所有的reducer都写在一个模块里面了,那如果我的这个reducer函数量很多了,有好几个,甚至上十个。
02:06
那一样也是一个道理,它会把它拆分成什么?好几个模块去写,但那个时候是不是要单独创建一个什么文件夹。这个能听懂吧啊。就是这样一个事情啊,我们数量并不多,所以就写在一个模块里面,这样大家容易接受一点。啊,这里面store这个我们说过,里面最核心的就是这个store是吧。是多啊下一个哎,这个也用,这个也是很关键的,这一个是个什么类型。这个函数对吧,那这个函数起什么作用呢。根据什么现有的state和指定的action,返回一个什么新的。
03:05
这能听懂吧,啊好,Action它是一个啊,我们action呢,其实最后我们发现它是分为同步action和什么异。而action有每一个action有对应的action,什么create?我们这个模块实际上是action create模块,咱们平常就叫X,哎,这个里面是S是吧。应该是多个。这能听懂吧,好,那这个模块名字X,那是我们这里面每一个都是一个一个X吗。不是,这里面每一个是在本质上是什么呢?是action c,但是我们交流的时候就说是action。啊,这个action和action是什么关系。Action create跟action什么关系?
04:04
说白了,这是一个函数,这个函数我们称它为action action create,那action是哪个呢?他返回的这个对象对不对,那现在问你用句话来说明一下action action什么关系呢?你要用一句话来描述他们之间的关系啊?我们是通过调用执行action返回的,就是什么action对象。这就关系啊。好,这一个东西定义出来是为了后面我们用上react杠的时候,它能够去简化编码。啊,当然有同步的,也有什么异步的,那E它是个什么。函数。对吧,它是一个函数,而且是一个正函数,对不对,因为它里面要执行什么异步的请求,对不对。
05:00
那执行义务请求,我们是不是要去调用我的接口请求来做?对吧,那这个时候我们是不是可以用wait外面是不是。那这些代码本来以前写在哪的?是不是写在组件里面呢,我们把代码是不是转移到了我们的这个。1X这个函数里面来了。那有了结果之后我再去,必须记住最后都要分发一个什么。同步action在线。这里一定要区别开来,异步action和同步action。异步action是个函数,同步action是个对象。而整个create。这个需要去知道啊好。这个比较简单,这纯粹是长了,这没什么太多好说的。那在这一个啊,这个里面。这个里面我们得去干什么呢?嗯,其实那个多也有一点,其实多的代码是固定的一个代码。
06:03
你写好以后,我还需要动吗?不需要动了。啊,这个要注意好了,我们在index里面,其实index代码也很固定,它主要是要引入一个组件,叫什么provide。而provide是是我们整个应用的一个跟读页码。他接受一个什么是多?他建设石头是为了干嘛呀?咱昨天讲会员嘛,应该就很简单了。他是为了去将接收到的失落暴露给谁呀,所有的容器组件对吧。容器组件是不是都需要制作?啊,容器组件都消失多啊,好包装上APP,那我这一个组件内部怎么样渲染这个APP呢。这个叫说标签体的所有子节点会成为我这个外部组件标签的什么?
07:05
求准属性。那我渲染他的children是不是可以?啊,这是这个啊。好,在这里再一个地方啊,写好它以后,后面就是在需要与大值进行状态数据通信的所有UI组件都包装生成什么。容器组件。需要与大数据进行通信,这什么意思呢?可能是要读状态数据,也可能是要什么写,主要的写是是什么更新对吧,更新。啊,这个需要去知道,那比如说我们最终我们这个应用中就管理两个状态数据吧,一个是他title头部标题,一个是我的什么。User用户信息对不对。那用户信息,那这个时候呢,我们其实他们是一整套都是类似的。
08:04
类似的,好,那写它的时候,我如果要去写一套,那涉及到的会是相关的一些资源代码,重点我说一下,这里面必然有一个对应的reduce函数,来根据老的状态返回什么新的状态。但这次比较简单,就一个case对吧,就一个case,就设置那个我们头部的标题。这是最简单的一个啊。那我们哪些组件需要去操作到这个数据了?我们这个应用中哪些组件需要操作到那个他开的数据,首先必然有它嘛。因为他有堵物嘛。它读取状态数据是不是显示客户了,那所以我的这个头部的组件是不是需要包装生成容器组件。但这个时候啊,我们并没有严格按照他的那个要求去设计文件夹。
09:04
因为严格按照要求设计文件应该是。所有的容器组件都要放在哪个文件夹下面呢?他建议你放在contain文件夹,但我为了方便起见,我就直接在我的这个组件里面。包装生成了对应什么?勇气组件。嗯,这样做呢,好处最大的好处就写起来方便。这能听到吧。啊,写起来方便很多。好。那这个时候我是不是,诶这是我的还一个。刚才我说的是汉的对吧,汉的里面是不是要去读啊。读的话是不是需要拍开。当然除了读的人,是不是还有设置的人,有人去读,那当然是不是有人更新了,那更新的话是谁在哪里设的值啊。是不是左侧导航啊。
10:00
那左侧导航要想去啊,更新设置我的标题,那必然啊,必然需要去分发我的这个设置头部标题的X吗。那边的。那这个时候我们的这个头部导航。啊,不是左侧导航啊,左侧导航必然会用上我的什么。Set title包装成容器主页码。这个要注意啊,我要问一问题,我们传入给UI组件的是这一个函数吗?是它本身吗?不是。啊,注意啊,不是,它是包装以后生成的一个新的函数,对不对,去分发是不是这而且。去分发它就行,必须得有啊。好,这是这个。
11:06
啊,主要相关的是两个组件,我们需要去包装生成容器组件是吧,下面一个啊是我们管理登录用户的什么呢?有者。那这个地方呢,也要去写我们整个一套代码。那这里面跟刚才比啊,刚才说过了,刚刚才比啊,比较大的一个特点就是这里面有异义步的感。对吧,100块钱也就说会花起球,当然本质上其实也差不多。啊,除了这一点以外,其他的位置要做的事情基本上是要要么就是读。对吧,要么就是更新数据对不对。这能听懂吧啊,而相关的组件这个时候就相对来说就会多一些。我们的这个登录组件需要干嘛去?是不是要去?
12:00
要分发我们那个登录的。是吧,最终啊,我要不要去读我的优者数据啊,因为我们最终是不是要判断用户是否登录的呀。啊,需要去读,当然我的命也是需要去读,这个也是需要去读,这个也是需要去读,这个是需要去,这个不一样,这个是退出登录。前面的login是不是要登录啊?而其他的都是什么呢?Do you。这能听懂吗?那这样的话啊,我们要写的代码就是相对来说,其实你写多了,你会发现我们包装生成容器组件是不是用来用去就就用一个语法。大把这一个语法念熟练了,是不是可以了?唯一可能有点难度的就是这一个,刚才我们说的啊,这一个的理解。
13:01
我传一个对象。啊,里面放的是一个X create函数。那它是怎么实现效果的?围栏的地方在这里,其实上面这个难度都小一些。啊好,这是这一个。那用完了之后呢,我们嗯,最后去实现了一下自己的duction以及react,当然并没有实现它的所有地方。这能听懂吧,我们并没有实现所有语法,我们主要是想去实现一个基本的使用的一个语法,看它里面怎么实现。要想自己去实现某一个东西,你先要对他。原本的结构以及语法相关的东西都要很清楚,对吧?你要不清楚,那就没办法,结构很重要。也就你都不知道那个函数接受一个什么类型的参数,你都不知道它返回值是什么类型,那你怎么去写。
14:08
那你不可能写出来嘛。啊。好来,我们先来看redu库呢,它其实向外暴露的语法呢,重点语法其实有三个,但是第三个这个呢,我们暂时就没有去实现,我们主要实现了前两个。一个是用来去创建什么多的,他接收一个什么东西。这个要这个不用太强就马上要蹦出来啊,Reducer是个类型。函数,它的返回值是谁?多多什么类型,一下很好,就这么来。啊。好,那我下一个啊,也是一个函数,这一个函数是用来干嘛的。整合多个什么reducer。生成一个什么新的R总的reducer是不是,那他要去整合多个reducer,这个地方要接受一个什么类型的参数对象,对象里面包含的是什么?
15:13
各个reduce函数吧。那你想一个对象里面得包含多个reduce函数,要不要名字啊?要吧,那名字用哪个名字呢。每一个是不是都有自己的函数名?用它的函数名义作为那个函数的标识,是不是就可以?而这个函数名最终是被决定了数据存储的属性名。对不对,一举两得嘛,标识名称。这能听懂吧?好,那结果是一个什么?新的reduce函数吧,Reduce函数应该有一个什么特点?所有任何的究参数有什么特点?接收几个参数?两个就一定要问才能说吗?哪两个啊,是得和什么?
16:08
我们每一个小的,它是不是接受了自己的state,我们总的它接是什么?总的state对不对?这里面就叫总的K,是不是由多个所有的子K组成的?是不是?好。第二个就X没什么好说的啊,那这个呢,我们暂时没做,就不用先管它,而是多对象应该是一个什么样的结构,它里面包含的是一些方法吧。有什么?Get,以及什么需要吗?不需要,那返回的是什么呢?返回的是他内部存储的状态吧。那说明我的这个。亏里面内部是存储了一个用于存储状态的一个变量,我能直接看到那个变量吗?
17:06
我能直接看到这个state这个变量。来还是不来?它那个不有提供了一个方法让我访问那个这个数据吗?我能不能看到存储数据的那个变量,一个数据肯定要变量存储吗。我能不能看到他?We don't know now。不能,要能的话还要改干嘛呢。是不是如何实现不能啊。如何实现在外部我看不到一个内部的一个数据啊。局部变量嘛,你说这是男的是吗?这不是难的事。这是个非常简单的技术,就是用局部变量来隐藏数据,对不对?能听懂吧,再通过一个方法是不是来去暴露这个数据。
18:01
这不是个基本的技巧吗?有的时候要实现效果,并不是说要用什么多么高深的技术,一个小小技术就能实现我们想要的效果。就看你想不想得到。啊。因为我们的这个多对象是不是通过credit store来去产生的。对吧,嗯。这不是我们的多的这个函数吗?它返回的对象就是我们的什么十多对象,十多对象里面是不是包含了三个方法,那这个方法是不是用来去返回我的是做里面存储的是吧?实内的数据的吧。那是这的数据,那这个地方我们是不是放在我的函数的什么局部变量,那外部能看见吗?那不可能吗。
19:00
能看到吧。大家如果彻底的明白,你当时理写东西的时候,就很自然的能用这种技巧,别看它是个小,别看它是个简单技术时候,你不一定能想出来。好,而我们这个对的初始是哪来的?是不是一上来就会去调用一次reduce函数?那你说函数什么时候掉的?创建是多的色调。对不对。能不能创建是多的时候,它是不是立马就会掉啊,立马就会掉,而这个用来干嘛呀。存储监听回调函数的对不对,那我们是不是有一个专门的方法来去订阅监听。是吧,这边传的监听,监听什么类型。回调函数啊,对吧,第一次开启传一个什么。
20:00
而干嘛去的?啊,首先第一步干嘛调用函数得到新的什么,而这个新的应该是个总的吧。懂不懂,我要想得到总的state,我是不是得把所有的那个R都调一遍。这能听懂吧,啊,那有了新的状态以后,接着他在干嘛,第二步。保存起来,保存到变量上面去,对不对,第三步呢。调用所有前面绑定好的监听的什么毁掉函数,就编辑它里面所有的元素是不是去调用。这一个实践其实并不难。能听到吧。大家需要聚会。好。就是这个啊,另外一个语法是不是我们要去实现combine reduce。
21:02
这一个是干嘛去的啊。首先他是返回一个什么总的。No,不能。一上来,也就是说我这个函数,我的这个函数一上来看了一个什么。函数,而这个函数就是个什么函数流函数,而这接受一个什么使这的总的是总的是的什么结构对这所以我的初始值是个什么,我就默认值,应该说对吧,默认值是个空对象嘛。这是我指定的action对不对?那我的总的reducer返回的应该是什么?总的状态吧。总的状态是个对象,是不是往对象里面塞各个子状态。是不是?那我怎么得到各个子端的数据呢?呃,调用每一个reduce函数去得到它每一个产生的性状的值,存储到我的这个对应的属性上就行了吧。
22:10
要刚才事情很明确。就是要去执行每一个得到每一个子状态,接着添加到总的状态里面去。是吧,那这个时候就有一个K的问题,属性名的问题,属性名是不是就是我在这个流程里面指定的名字。当然你可以用呃,Reduce来去实现,刚才我们用的是一起自己去。累加的,我们手工累加和它自动累加的这三个自动累加。这个代码量没有多少啊,但这个难度就会比上面要大一些。嗯,如果最后你能靠自己的理解,完完全全靠自己理解,不是靠背去写出来这些东西。它是能提高大对于JS语法的一个理解和使用。
23:01
啊,这是这样一个事情。啊,下面一个是自定义的react。啊,这个库是用来干嘛的?咱都实现了,你连他干嘛都不知道,那就白实现了。干嘛,有什么用吗?我们干各种各样的事情是为了什么呀?为什么要用这个货啊?三你是出于什么原因要用这个库吗?我不用它不行吗?我不用它不也行了吗?对不对,他为什么用呢。呃,我们想简化redux的使用,我们不用自己去订阅监听你,我用上它以后,我再也看不到尺多了,再也看不到什么第斯太极,嗯,迪斯太极基本上都抗验了。啊,包括我们的沙了,也就是说这里面十多相关的语法,这三个语法都看不见了。
24:01
这能听到不?嗯,而我们用的看似都是一些最最基本的一些语法。啊,我们后面就变成用它提供的这两个语法来去跟大进行通信。我本质上跟进行通信了,但是呢,表面上又看不见是不是。我们的师啊,只用一次就行,而且只是需要去将师多传给这个什么。后面我们再也不管他了。是吧,后面我们再也不去调用作的什么方法了,完完全全由这个provide和connect来去处理。那我们写起来就会简化很多。啊。这个一定要要去先知道他在干什么,他有什么作用啊,你这个事情你都不知道,你跟别人去说,我还实现过,我还还写的很痛苦,你这这不是。
25:06
有点空中楼阁的感觉嘛,对吧,你先要知道基本的,你再说一些高级的啊,才有意义。啊,那整个这个后来放了两个语法,一个是这个组件内,一个是connect函数,这个组件内的实现非常简单对吧,介绍一个是多属性。是吧?通过一个基础叫什么呢?Con将store暴露给所有的什么容器子主液。啊,接着我的provide里面原样原样去输出渲染所有的什么呢?标签啊,子节点这个地方是用到了一个属性叫children。这个也要注意啊,这个事情好。重点它的难点其实在哪个函数呢?看那函数首先要知道看那函数接受几个函数。两个,一个是Michael,这单词一定要都能读出来。
26:05
啊,还有一个PA tos这一个啊,这个什么类型。嗯。函数类型,这是什么类型函数或者什么对象类型?先一定要知道数据类型,我前面已经跟大家说过了,你干任何东西,你数据类型都搞不清楚,你不可能写对。好,我看的啊,执行返回一个什么。高阶组件是不是,而这个高阶组件接收一个什么组件,UI组件,返回来就是个什么容器组件。而我的容器组件有一个什么样的任务啊?需要向UI组件传递特定的属性,对不对?传递哪些属性由谁来决定?由这两个参数是不是来指定?
27:02
是吧,而这一个如何来去指令啊,它是通过什么方式来指定传递哪些属性的。通过它的什么返回值里面的对象。返回值对象里面的属性。就会传入到UI组件里面去。那这一个它是如何来指定的呢?那就分两种情况了。一种它是函数,一种它是对象是不是,那如果是函数就跟它是一样的。你的函数的返回值这个对象,对象里面是一些方法,方法就会传给所有的UI组件。那如果是对象,那就不能直接将对象里面东西拷过去了。那就要将对象里面,这个对象里面也是些方法,实现action的方法。那这个对象里面的方法不能直接传到UI组件里面去,你在外面什么呢?包一层函数。
28:05
啊,通过dispatch来去啊,分发这个action。把这一个包装的函数得传入到UI组件里面去。啊,这个地方我们刚才说了还有一个小事情,就是我们这个不是用来去提供一般属性传给UI组件的吗?而且它同时也会成为容器对象什么状态。这是为什么要这么做呢?因为后面涉及到组件要什么更新。一旦我们的。与大的状态发生了变化。Re的状态发生了。这是。它的状态发生了变化怎么样?它对应的就是读取了状态数据的组件也发生变化了。那你得啊,先去能够去让容器组件知道,容器组件知道以后才有可能。
29:07
让我的它的UI组件子组件更新。那这里面最好的办法就是把这些数据。成为我们容器组件的状态。啊,那我们在容器组件里面可以绑定监听这个state的变化的监听吧。一旦监听回调它掉了,是不是说明数据改变了,那既然数据改变了,那我是不是要更新我容器原的状态,从而去更新我们的UI组件?就这么来的。那其他的刚才我们都已经说过了。这个是整个里面最难的一部分。嗯。
30:01
那这个部分呢,大家尽自己最大努力去搞一搞,看看能不能搞定。那如果确实啊,你觉得啊,相差比较大,差距比较远,那你就暂时先放着,到时候需要的时候再去看一下,再学一下啊。
我来说两句