00:01
啊来,我们接着上午来讲啊。上午呢,我们已经能够去管理了这个。头部的标题,那另外一个需要管理的是什么呢?来,回到我们做的代码里面,来看一下我们的reduce。还有一个管理数据,就是当前我登录的是吗。用户。那这个里面涉及到组件呢,就比较多了,首先我们来看第一个关于这个登录界面。登录界面,我们现在呢,是在组件里面去发的请求。我调用了接口函数去发的请求,根据结果是不是来去做相应的提示。以及做数据的一个存储。这个事情。完全可以把它这个发请求的异步操作放在我们的reduction里面来,也就是说我们说过我们前面action有两种action是吧。
01:06
啊,一种同步的一种什么。Eve的。那我们就现在可以去写一个什么呢。写一个用来去发登录请求的,我们看怎么写,这个在开发中其实是用的比较多的,记住我这是一个用来实现什么呢登录的。Eve action。来,先把这个写一写,那我的名字就叫login啊,要传统参数来,等会再说。好。这实际上是一个我们说100减什么类型。这个函数吧,实际上就是指我的这个返回值应该什么类型应该函数,而且这个函数接收什么参数。接受一个什么dispatch。而在这一个函数里面,你才可以去执行异步什么,呃,请求。
02:08
好,执行请求,最后是不是有一个结果呀。当然结果有可能,成功也可能。什么。失败,那也就是说上面要说啊,如果成功了。那我要干嘛呢?分发一个分发成功的action。分发成功的同步IP。那当然,那如果你失败了。那你要去分发一个失败的。这是比较常规的一个基本流程。嗯。那现在我们就给它来去写一写啊,那我们要想执行一加请求,是不是得调用接口请求函数吧。
03:00
去干嘛,引入一下。来。我们去找一下我们的那个。API。里面有一个请求登录的。那很简单,那我就调用它呗,有什么好说的?调用它需要接收什么user name和password吧?但我这个函数本身有吗?没有吧,没有是不得外部的传给我。所以我这外面要接什么user name和password,那接着我再把user name和password传入的数据。再唱个他呗。它本来这个函数返回的是一个什么值。接口进行函数的防范知识吗?Promise,但我想要吗?不想要,我想要的是不是他义务给我的结果?
04:00
是吧?那我这里面就得加什么,那我的。这一层吧。注意观察啊,在这里不是这里对不对,这里写什么I think。这个result的结构我们说过再强调调结构,什么结构是一个对象结构吧,有一个属性叫status,如果是零是不是代表成功,成功的话,它是一个date,而date就是U者。这能听懂吧,那如果我这一个是是一。代表失败吧,登录失败,因为有可能用户密码错误,是不是这个时候他有一个什么呢,内容我就不再去写了,这是咱前面写过的啊。那我的判断吧。来一波。Result。
05:01
点status。等等,一级零说明是不成功对吗?二说明什么失败?这个没问题吧,没问题啊好了,那下面呢,我成功了,是不是取出成功的里面携带的这个优的数据。这个优者是不是要存到我的状态里面去的,这没问题。你说我现在有U着了,我要是不是要将U存到我的这个状态里面去。状态里,但是要想存到状态里去,是不是得触发我的这个reducer调用啊。要想触发调用,必须最后要执行一个什么函数?Dispatch。那这个时候是不是需要一个用来接收优者的?
06:00
一个同步action对吧。能听懂吧,啊,现在我不是需要一个对象吗?对象里面要有一个标识来标识,我要去接受这个user啊。那还有一个我们可以传递一个数据啊,只是悠着给他传过去嘛。当我们说过我。是在这里写吗?不是在这里写,而是要专门去写一个对应的。同步action action是吧。那这个时候就需要去设计一个对应的什么呢。好。啊,这个探索是要说明我是用来接收user者的,你成功了,就有一个user者来接收,看好了,这个时候我就什么呢?Receive user。翻译过来叫接收用户信息,用信息不就有对象吗?那好了,那我有了它我这边。
07:07
就可以引入了吧。那我就应该去写一个。啊,接收用户信息的同接收用户的同步,Action是action回,但是我们交流的时候叫action。好,那我来写一个export,名字呢,我一般会以这个名字变成小写来去写对应的每一个type,其实一般都会有对应的一个。同。我就写receive user,这样比较对应。Type是什么?就是我刚才引入的这个名称。好,下一个是不是要携带的数据啊。携带的数据,前面我们携带数据是用date。用对的好了,我换一种方式,我就用这一个写也是可以的,那我是不是需要一个优,那就什么给他,那你说我的名字叫优吧,我的值输传过来这个值。
08:15
看好了啊,那有了它以后我这边该怎么办呢。是简单干嘛?调它传入什么东西。能不能看到,而我这一旦执行这个代码,就会触发我的reduce任务,最终是不是应该进入我这个user里面去处理?能听懂不,那处理的话,那这个时候同理是不是要把这个receive user的。他拿过来,接着在这边我得增加一个什么。K处理对吧,你判断一下是不是这个K,它如果我的探索值是这个值,说明我是不是要去来去接收新的用户的。
09:11
那其实非常简单了,因为我现在X里面是不是有一个属性叫什么。有着它的值,是不是就用着对象。是不,而我当前这一个管理的状态,是不是就是个优质对象啊?跟以前是什么值没关系,我直接将新的值给他什么。别。那不就得到了我的状态就变成了一个新的当前登录成功的一个U。好,这是一个线路,当然我一定成功了。不一定吧,也有可能失败,登录失败我最重要干嘛呀。是不是显示一个登录失败的错误提示信息,而且这个信息是不是还是由后台指定的。
10:03
我这里面这个result里面有一个有一个属性叫什么。Message,这是不是就要显示的错误信息?这里问道。这里面我有两种处理方式,一种我就不分,直接用message l去提示。能听懂不?这个做法呢,相对来说简单一点,但是我没有这么做,我们最后的效果,我说一下,以前我们就这做的,我们最新的效果就是有一个错误提示是吧。看看我们现有的效果,大家注意观察。我退出的任务。好啦啊,我输入我的密。但是呢,我密码输错了。立马输出了,多出了一个字符。诶,有问题啊,这里面那个。图片有问题是吧?
11:01
哎,这个应该服务器已经被我是不是停下来了呀。看一下啊。这个是几千来着。3000。我这个。怎么两个人抢一个抢一个位置,我看一下啊。重新把它启动一下。嗯,我有一个最终的一个效果啊,其实跟以前的效果呢,稍微有点不太一样。那这嗯,他在考啊,我们就就再再再说一下啊说一下。来回到我们这边,如果简单处理,那这个处理就很简单,那你就没有必要再分发什么400X嘛,因为你都已经处理干净了,对不对,已经有提示了。我是希望将这个消息。
12:00
嗯,存储到我的这个我的这一个user对象里面去。让我的组件,让我的组件来去读取user里面的信息,看他有没有错误的message,有就显示。啊,把这个错麦给它显示出来。可能大家不懂,主要是大家没没见到,见到我这个现在的效果。好,来,我们把这个最终的也给他。启动起来,我稍微的做了一些修改。啊,实际上是一个这样的一个事情啊,我做了一个这样的事,什么事呢。现在咱不相当于是有两个版本,一个是版本一个是。版面。能听懂这意思吧,就咱最终应该是有两个版本的项目啊,像效果都是基本上一样的啊,稍微我这里面改了一下。
13:24
拍了一会啊,嗯,再拍。在这里面啊,如果说我们不这么做的话,如果说我们不直接提醒,那你就要去将这个错误信息给他先存起来,存到我们当前的,让我们的存到我的状态里面去。就要存到我们的状态里面去啊,好,来看一下我随便说的。能看到吗?这个可以吧。一样可以的,对不对?好,那也就是说我有错误信息就显示,没有错误信息是不是就不显示。
14:02
是不,那这个地方就要做我的user里面注意观察。为什么有有显示啊,看一下工具。打开我们的工具,来看一下我们现在的user的一个结构。看这个吧。大概现在U这里有个什么。IO message。能听懂不?那如果一旦它有值,是不是应该把它显示出来?这怎么找?如果一旦他有值。就应该给它显示出来,那这个东西我应该怎么做呢?看好了。来我们来去实现一下,那这边我的action这边那同理是不是也应该去分发一个失败的一个显示错误信息的action。那就先设计一个什么。Tap。
15:01
你要设计一个type,这个type是用来干嘛的,用来去最终显示这个什么错误信息的。那我把它称为I。Message。这个能不能看到。好,显示错误信息诶。来,那现在我们说有一个T就会有一个同步的。Action。我把这个复制粘贴一个。啊,改一改来,这个是个什么呢。显示。错误信息的同步action,好名字就按照这个刚才这个名字来取。
16:05
Show error。那这个地方要传的就不是user的了,而是我要去显示的什么error message吧。嗯。这个type是什么呢?是air message,我的名称是不是叫air message值是这个值对不对?好,那我这一边,我这个下面。这个该怎么处理呢?PA。秀传什么呢?Message。你们看到。那完了吗?没有,因为我的这边有针对他处理吗。没有,所以我要去干嘛,针对他处理呗,来个什么。
17:01
Sure error message。来加一个什么case。K的是数l message,好,此时我这个X里面有一个什么属性?我叫message I message。能不能听懂,我先给他临时取出来啊,最终我得返回什么呢?那我现在问大家,我返回这个行不行。行吗?不行,因为我们需要返回的是一个对象,懂不懂是对象里面有一个error message属性,听懂吗?那么呢,那这个地方啊,你说包括对象。啊,这个也没错,但最好是怎么样呢?看比较好的写法应该是在原有的状态的基础上。
18:04
这什么意思?大家看好了吗?这里面千万不要这么做,怎么做呢?最不好的做法是这个。接着把这个state给他返回。这个做法是他是完全完全不进推荐你这么做的,这个做法实际上是不是就是在改修改我的状态本身的数据。这里有一个。啊,Reduce函数,不要去修改我的这个状态数据,而是要返回一个什么呢?新的状态数据,那如果新的状态数据跟以前的状态数据有一定的关联,很有可能需要用三点运算符做一些处理。或者用别的话,反正不能改以前的数据,也就是说我现在希望的效果是在原有数据的基础上。加一个Mac。
19:01
怎么做到呢?你不能直接这么修改,对吧,就是我们刚才那个写法。我要问大家,我现在这种写法有没有改变以前的原本的状态?没有吧,我是产生了新的对象是不是?这个能不能看到。那这个要注意啊。好。这里面强调一个声音啊,不要啊,直接修改。嗯,原本的状态数据。而是要产生一个新的。啊好,这是这个,那这样的话,我们这一边就写的差不多了,这整个结构就写好了。来。在我们的登录的组件里面。我们这一片是不是都是去发请求去的?
20:05
对吧,发完请求是不是根据结果来提示哎,并且保存,我们是不是自己还要去守,我们在代码里面,在这个组件里面去保存U者呀。哎,没有必要再这么做,诶,这里面就说一个事情,看好了。嗯,此时此刻到了这里来,是不是说明登录已经成功了?得到了一个新的优吧。我这一个操作是不是会让user存到我的状态内存里面?还有一个地方需要求大家知道需要保证哪些保证它logo中能听到不?那下一次再访问的时候是不是就能读到啊。因为我们这个初始值。是不是读了里面的数据?而我们这个地方需要做什么事情?存怎么存呢?很简单。
21:05
有种点。Save什么user,传一个什么user。能不能这是分班啊,分班啊接收用户的同步X。好,这是这个来下面。我们这边组件里面就变得很轻松了,这通通所有的。都去掉。所有的去掉,只需要想办法。去分发这个action就可以。它就会自动的发请求,根据结果是不是呢?如果成功了,是不是存储,如果失败了,是不是要整一个错误信息也存起来,对不对。啊,这些啊都搞好了,我们的组件里面就很轻松,那这个时候我的组件是不是要跟大进行通信。
22:08
需要吧。需要啊,我有两个方面,一方面我要去读什么数据了,优者数据大家看一下。看到我们最下面,哎。发展有点过,我们来找一找啊,登录界面应该是有毒的,就这个。现在本来我们是不是在这通过这个工具来读啊。这个工具要干掉了,没用,我们不再用它了,因为现在我用Du的状态,是不是来重组又做了。就完全不要需要他,那但是我们是不是要去读优者,来知道到底有没有优者是不是。那此时啊,这是一个方面要读,再一个方面,我这边。需要去分发action,去更新,去发请求。啊,所以同样的套路,很简单的事情。
23:00
看好了,先把我们的看给他引入是不是,看给他引入看是谁的,是react杠是吗?这是一个,还有我们的这个1ACTION是不是也得引用。这能不能听懂,因为要发请求去了吗?来在这里面给他引入一下,这一个和这个都不要了,这个也不要了。来看好了,Port,它from啊,我们点点斜杠,点点斜杠下面的什么呢?Action里面有一个叫什么名字呢,就叫什么log。好,来。看好了,那接着我们要根据这个组件来包装生成一个什么容器组件来向它传递属性吧。
24:08
来这个时候原本它是不是就包了一层的,我们是不是要这一层的基础上再包啊。怎么来着,写多了,是这么回事了。是不是结构固定的吧,小括大括逗号,再来一个什么大括号。我们要去读取什么属性?我读起哪个状态。我们有两个状态,一个是hand title,一个是我要读句。我要去读user,对,很好,我要去读的是user,那就很简单,那就写一个user名字,接着是state点什么。有的。没问题吧,好,接着我还要去分发action对不对,那这个时候就要把我们刚才那个。
25:02
落地给了什么,取过来就是这个。好,那现在我会向我们的这个登录的组件传入几个属性。两个一个U的一般属性对不对,还有一个是什么login函数属性嘛。只要调用这个函数,是不是就能发请求?好,来看一下,先说读。读是在我的最前面。以前是不是通它来搞的,不用了,怎么写this pro user搞定。能不能看到好,还一个我们现在需要去发请求,去需要做一系列处理,以前都是这在这做的,现在不必要了。直接来个this.pro是点什么传什么传什么,其实就是要看这一个action需要接受什么。
26:08
对,Password,我有病。就是这么刚刚好是不是。这个能不能懂。这一个R是调用。分发啊,异步X的函数。调用他的结果是什么啊,去发发登录的请求啊。义务请求对不对,接着是不是有了结果以后更新我的状态,有了结果后。更新什么呢,状态。啊,更新状态,它是更新优者的状态吧。而我是不读了user,说白了你想看,如果我错分发了他,那最终不是会去第一次receive user或者是修message吗?
27:07
那最终就会导致于我的这个reducer是不是进入其中的这个某一个case。我是不是都产生了一个新的状态。那产生了新的状态,我的这个组件就必然会重新更新,那更新的时候有可能成功,是不是有可能失败?这能听到吧。好,来看一下。那一旦我的状态更新了,大家注意观察我的这里。我在这里,我这里面是不是有个判断。说什么?说如果我的user有了值,我就跳哪去。可以跳到这个里面去吧,可以。可以了吧,可以好了,还一个事情,他是有可能是。
28:00
我怎么知道他失败了?我怎么失败了?到了下面是不是说明。是有用的,对不对啊。那没有优者,应该说没有优者,因为有user者的话,是会自动跳到那个后台界面去,是吧,那没有优者,没有user者有可能是不是需要去显示那个错误信息。是吧,这个错误信息在哪个里面呢。我把它透星能取出来不?有一个叫error message的属性是吧,this.pro点。User点还是这有这样一个词吧。那有可能有可能没有吗?没有是吗?能听到。这个优者至少应该是个空对象啊。如果他没有,那就是案方案的好了,那下面我们刚才是不是在这个地方有个显示,大家注意观察。
29:04
是不是这上面有个显示啊,那得写一点标签结构来做显示吧,说白了就这样一个事情,比如说我现在啊,我现在简单的搞一下在这一个HR上面吧,来一个div行不行。喂。可以吧,那我就在这里面显示这个谁error message可以。那有就有,没有就不显示呗。我们来看看能不能出来啊,看一下就知道了,现在也没什么太多的界面效果,就看一下,先看看它会不会出来。有这个界面吧,好来试一下啊,试一下现在我去输入一个错误的。点击他。出来没有?出来了吧。
30:00
能不能看到是可以的吧,只是说没有一个好的一个什么样式效果对不对。
我来说两句