00:00
写完redu的完整版本,大家已经可以去使用这个redux了啊,当然这是只是redux的一个基本的使用,Redu呢,它还有一些比较高级的操作,这块我们来看一下啊,还看一下这个图,之前我们传的这个action是一个什么?是一个简单的很简单的一般的一个对象,对吧?那这种action叫叫什么呢?叫同步action,那既然说到这种同步X,是不是还有异步action,来给大家写一下。现在我们传的这个X。它是什么?是一个对象啊,一般的一个对象对不对,好,这个我们称为同步action。那既然说到同步,是不是还有异步X?如果我们传的这个X是一个函数三性,那这个就是异步X。好,这里先把这个概念先先看一下,然后我会给大家写例子来说明什么是同步X,什么是异步X。
01:03
先看一看我们的这个例子啊,我们的这个例子中哪里用到了这个异步。是不是这里用到了这个异步,哎,当我们点这个加的时候,它要过500毫秒才去增加啊,这是异步的一个操作,但是这个异步是在哪里实现的呢?是在这个组件里面进行实现的啊,并不是redux来实现的,这个一步是我们组件里面自己写的这个逻辑对吧?500毫秒以后去,哎,通知re执行这个相加啊,我们想要实现的效果是什么呢?啊,不在这里面去写这个定时性,而是让这个redu。让他的这个action,哎,让他来实行实现这个异步的一个效果,这时候我们就要使用到这个异步action,那还举一个就是我们去啊点饭的啊,去餐厅吃饭的一个例子啊,我们来到餐厅,诶现在呢。我暂时不想吃,哎,我想等五分钟再吃,我就在那,我就坐那不动,哎,我就在那玩手机,玩了手机玩了五分钟之后,我就说服务员来,来一份这个,呃,盖饭啊。
02:09
这是我等五分钟,还有一种情况是我来到这个饭店啊,我还是不想吃,想等五分钟再吃,但是我先把服务员喊过来,我说来服务员来一份这个盖饭,但是我现在有事,你五分钟以后再给我做啊,这是这么一个情况来放到我们代码中,就是什么情况呢?我们现在写的这个代码就是我我们刚才的例子的第一个情况就说,哎,我们来吃饭了,但是我们不想立刻去吃,然后等了五分钟再去喊服务员啊,再去喊服务员要吃饭,对吧?啊,但其实我们想要第二种效果,就是我们直接就告诉服务员说,哎,五分钟以后我要吃饭。啊。清楚了吧,啊,然后这个呃,概念呢,刚才也给大家说了一下,我们这个action现在传的是什么,看一下啊,现在返回的,哎,是不是就是一个一般的一个对象,哎,这个我们称为同步的X,那么刚才给大家说了,如果我们要使用异步的X,那这里就。
03:09
不能去返回这个一般的一个对象要返回什么,返回这个函数。好,接下来我们来写一写啊,看看哪里用到了这个E不X,是不是这个组件里面的这个地方用到了这个E不X,对不对啊,接下来。这两个啊,我们这两个还保留啊,我们就再写一个啊,写一个异步的。复制一下。用于伽的这个是异步啊,那名字我们也换一换,首先这个可能就不能要了,对吧,我们把它写成这种形式,因为我们说了,如果我们的是异步action,我们要return的是什么?要return的是一个函数,哎,是这样的一个形式,我们先把结构写出来,等会再说这个逻辑,那名字也得换一换,也不能和这个一样,是吧,首先是诶增加的increment,接着呢,它是一个呃,异步的。
04:13
来放到这里啊,Incre increment异步的啊asyc啊think来这里写完之后啊,我们在这边去使用一下,就是组件里面啊,组件里面去使用一下,之前只是引入了这两个是吧,来再多引入一个,那这边引入之后呢。找到我们异步的这个地方,就不调用这个同步的了,调用这个异步的啊,那我们就不在这里执行这个定时器在哪呢?想一想刚才我们诶。点饭那个例子,哎,我们不自己去等这个五分钟,我们先把服务员喊过来,让让这个服务员去等这五分钟再给我们做,那要在哪去写这个定器呢,是不是。在我们的这个action啊,站在这里面函数,我们返回的这个函数里面去写这个定时器,好,Set time out。
05:10
这个是我们要做的一个事情,然后是一个时间啊,然后这个时间啊,这么时间我不想写在这里,因为我写在这里就写死了,但有时候有时候我们去使用这个一线的时候,哎,使用这个if的时候,我想自己去传入这个时间。啊,所以我可以在什么改造一下这个函数,再让它多接收一个参数,哎,多接收一个time啊,那我先改这个,改这里吧,啊,两个参数了,就不能省略这个括号了,一个date,一个time,我想要再接收一个time参数,对吧,那这里我就time,这时候你调我这个函数的时候,哎,你调我这个函数的时候,你就要多传一个time给我,多会我传一个500过来啊现在我们已经完成了一个,呃,大致的一个需求啊。从头再捋一下。
06:01
我们想要让这个异步的一个操作交给谁,交给这个action来处理,对吧,但是action呢,它有两种情况,它同步的时候同步action,它返回一个一般的一个对象,但你要想让这个action是异步的,就是说是异步action,那你就必须得返回一个函数,是不是返回了这么一个函数,你看我们return的是不是这个函数,对吧,你看return的return是这个函数嘛,对不对?好,Return的这个函数,然后那我们这里调用的这个地方,其实是它的这个执行结果就是一个函数,对吧?因为这个函数执行结果这里return的是一个函数嘛,对不对啊。然后接着干什么,接着。到了时间以后,到了时间以后,这只是X啊,看一下我们的图X,他等等待啊等待时间,到了时间以后他要干什么,他要去找这个死套,他要去告诉这个死套,哎,我要做这些事情对吧?那我们现在只是这里只是一个定时题,什么都没有做呀,那到时间以后干什么,你是不是还是得告诉斯特你要做什么事情,对不对。
07:12
来来试一下啊。通知,哎,这个就是说把这个action啊,到时间以后。时间以后啊,把这个a action啊给这个套好把X型给套,那套我们用了,那用这个方法给哪个X型呢?是不是给这个X型对不对。哎,给就是说告诉到,哎,我要增加,要增加的这个值是我这边传的这个值是吧?好接着看一看,我们没有必要去单独学这个对象,这是在同一个文件呀,是不是可以直接可以使用它,对不对,可以直接使用这个函数是不是这样的啊,然后传入这个data就可以了,对吧。
08:12
啊,好。接着我们来看看。你这里你用到这个,但是我们这个文件啊。它自己帮我们引入了这个套啊,这个是,呃,还是归功于这个编辑器的这个功能吧,刚才我粘贴的时候呢,它自动帮我引入了,你如果使用的是其他编辑器,你一定要去手动去引入这个套,因为你这里你用这个套了,你不引入你怎么用清楚了吗?我上一节写的是这个例子是吧,那这节开始这个例子之前呢,哎,忘了复制了,我们先稍微暂停一下,我去复制一个啊,然后把之前的还原,这个新的我们就留着啊,还是先把它删掉。稍微打断一下大家。啊,因为我们的我们的这个代码已经写完了,我们现在要做的事情就是说去浏览器中运行看效果嘛,那这里我们先停一下,先把代码给整理一下,我把这个依赖删了,然后复制一个复制一个零四。
09:12
来复制一下啊,零四这个是。Re,一步action是吧,1ACTION啊,零四。零四这个里面啊,其实就是我们写的最新的一个代码啊,我们把这个先暂停,然后切换一下目录,切换到零四上一级目录的零四,然后安装一下这个依赖。先让它安装着啊,然后我们把零三的这个撤回来。因为零三我要想保留一下给大家去看嘛,其实没改多少东西啊,我们就是在这个。在这个X里面增加了一个这个方法嘛,对不对,把这个删了啊,因为最新的代码已经在零四里面了,我们这个零三这个就先删掉啊。
10:10
而且呃,好像还发现了上节课写的一个问题啊,这还是上节课写的这个全部的一个例子,这个引入这个常量减法的这个我们是不是引错了。是不是这样的啊,减法的引错了啊。这个是rement啊,这个来调整一下,然后看看这个reducer,这里面有没有错啊,这里面没有错。好,那那先这样。把这个关掉,接着是组件里面,组件里面啊。这个好改,这个我们就没有这个没有直接就撤销啊,撤撤销也不引入这个了啊,这个是已经还原了零三十个代码,那我就把它给关掉啊,全部关掉,这些都关掉。
11:01
好,继续我们的课程啊,而且这个也装完了,那同样的先去把redu我们的action这里面。这里,诶这个还是有问题啊,我们把它给重新改一下,还有一个呃,DDEC。啊,因为上节课写例子写的太快了,就是复制的这个只是改了这里忘忘了改这里了。好,接着说刚才的例子对吧,那我们想要使用这个异步的action,我们就得让它返回这个函数,而且返回的这个函数里面呢,我们在这里面执行了这个异步啊,执行一个定时器,而且这个时间也是。在组件里面去使用的时候,传入的这个时间,对吧,你看传入的这个时间。找到一步加这里是不是传到这个时间好,呃,而且我们这里用到了这个四套,这里你要引入这个四套哎把。
12:03
我们定义好这个1ACTION之后,你要哎通知这个死套,你要把这个X传给这磁套才可以,对吧?啊,但是我们传给磁套呢,其实这边还是个一般的对象,哎,只不过就是我们要做什么事情嘛,啊这么一个对象,那么不没有必要取写了,直接用这个方法就可以,因为在同一个文件内,这我们代码我们来运行,看一看有没有报错start,诶中间刚才打断了一下,我们把代码就是说复制了一份。好。这个还是之前的啊,说找不着这个变量,再刷新一下应该就没了。接下来我们来选择一个二异步执行加对吧,来点击好这里直接报错了啊。然后这些我们就不看了,这里我们来翻译,翻译来看看什么错啊,他说这个actions。它必须是一个啊,这个单词什么意思啊,来在这一行呼译,哎,这个是平的,简单的,朴素的对吧,他说这个action它必须是一个朴素的对象,但没有这么翻译的,那我们翻译的话就说action必须是一个一般对象,一般对象就是我们这样,哎,这种。
13:12
啊,这种一般对象清楚了吧?啊,或者看我们的代码必须是这种一般对象,哎,但是我们这个异步的,我们给了什么,我们给了一个函数,它这个函数肯定不是一般对象,所以说这里就报错了嘛,好,那这就和我们刚才说的有冲突了,刚才我们还说啊,这个action同步的可以接受一个一般对象,然后异步的啊可以是一个函数,那怎么会报错了呢?啊,别急,你接着往后看啊,他说你要使用一个哎异步的一个action的一个中间键,就是说你要使用一个中间键。嗯,那通俗点翻译就是说,你如果想要使用异步的action,那么你就要去借助一个中间键。清楚了吧?啊,接着我们再来想想是谁在使用这个action。是不是这个死党?对吧,是死套在去使使用这个action啊,是套在和这个action进行沟通啊,这么说是他在和他进行一个联系。
14:09
嗯,而且呢,这个死涛呢,他在联系这个action的时候,也就是说action他在把他的这个需求哎给死涛的时候。啊,然后这个死套呢,他就说了啊,我只要一般对象你给我了这个函数,你看你给我一个函数我不要,哎,所以说就出现了这个问题,对吧,他要告诉我们啊,你想要给我这个异步的这个action啊,就得借助一个中间键。清楚了吧,啊好,这是从这个报错层面来讲,那我们从代码层面来讲看一看啊。这边我们调用这个函数,哎,得到了一个返回的一个函数,对吧,但是这里只是返回了一个函数,我们把这个函数给到了这个四套,是不是这个函数并没有执行,那如果我们想要得到这个结果,也就是说这个函数必须得执行,但是这个函数已经作为返回值给到了这个死套,所以说必须得由死套来执行这个函数,清楚了吧,但是死套。
15:09
他不想执行这个函数,他说我只要一般的对象对吧?好,这就出现了我们报错了这个问题,那么如果想让死套能去执行我们这边返回的这个函数的话。哎,也就是他也告诉我了,我们要我们要借助一个中间电,对不对,那所以说是谁在借用这个中间电,是死涛在用这个中间电。清楚了吧,啊,也就是说我们要找到这个死套定义的地方,我们给它加上一个中间键就可以了。明白了吧,啊再捋再捋一遍啊,首先啊X呢,我们确实说了,它如果是返回的啊,一个一般对象,哎,我们把这个一般对象啊给到这个stop没问题,很正常正常执行啊,但这是同步的,但是我们想要使用异步的action,我们就要就给它返回一个函数,但是返回这个函数就有问题了,那在这里死套,这里接收到这个函数啊,接收到这个函数之后。
16:02
他就说了啊。我要的是一般对象,你得告诉我要做什么,要做什么事情,你给我一个函数干什么,对不对,而且这个函数给到了谁是给到了这个死套函数,只是给他函数不执行是没有任何意义的,所以必须得让死套来执行这个意义,但是想让死套去干活,去执行这个函数,执行我们返回这个函数,就必须得借助一个中间念,哎,给死套去加个中间键,哎,这里报错也告诉我们了啊,你如果想使用一步X,你要借助一个中间键,所以说我们要去改造一下我们的四套,去给它加一个中间键,哎,点进来啊,或者说你从这个里面点进来也行,我刚才是按照CTRL左键点进来的啊,也就是说我们打给套,就是说暴露的,呃,暴露套这里去加一个中间键,那怎么加呢?加什么中间键呢?这里给大家直接安装啊中间键,这个中间键你得单独安装才可以,他们是没有带的。Ya ad,哎,有一个redux的中间键啊,叫re think。
17:00
好安装一下。不用这个不用记啊,到时候都会给大家形成笔记,我们先把这个中间键给安上,安上之后,然后让这个套去使用上这个中间键。诶,他就能去乖乖的去。调用这个函数,哎,帮我们执行这个函数去最终的去把这个这种一般对象的形式去给到这个死套,是不是这样的啊,哎,那怎么给这个死套配这个中间建档啊,这个先生你看到文档的话,你就知道怎么配,那这里我们就直接写下。首先啊。这个中间键我们安装了,安装了你是不是得用上。来,我们在这里用一下啊。引入S键中间键。啊,用于让套支持异步的action,哎,支持异步的这个action这么这么写注释啊,大家能看能看懂是吧,也就是这个中间的最主要的一个作用啊import啊,Th UN NK from啊,他就是直接就是一个默认暴露报道的就是他。
18:19
清楚吧,啊,那引入之后再用上怎么用呢。你你看一下怎么用,现在谁创建的这个四套,是他创建这个四套,所以说怎么用的话,还是得从那个函数上去入手。明白了吧?函数我们能想到的办法是什么?是不是给它传参数就可以了,哎,把它传到这个参数里面对不对?好,这么想没有问题啊,但是。嗯,Re relax说你不能这么做啊,你不能直接传,他不接受这个传说啊,啊这时候我们还得借助一个人啊,借助谁呢?我先把它删掉啊,我们要继续从这个redux里面去引入一个啊这个啊,它就是用来支持这个中间音的,我们调用一下这个函数就可以了啊,它注意它也是一个函数啊,我们把它在这里去调用一下,然后把我们的这个中间键放进来就可以啊,是它的一个啊这个函数这个整体作为它的这个第二个参数才可以,好,那这时候我们已经已经给这个套加上这个中间键,它就能哎支持去哎执行这个异步的一个action啊,去支持这个异步action,能帮我们执行这个异步的这么一个函数,哎,执行我们返回的一个函数,来看看效果,先啊来先运行一下压start。
19:42
这个先清掉啊,等它编译完成。来还是看我们异步的,我选个三啊来接着现在点异步加,诶可以了是不是,而且异步的效果还是对的,你看。啊,那这样就完成了。接着再来看一个东西啊,啊,就是这里啊,我们来想一想这个函数,这个函数,这个函数是谁调用的,你看我们这里返回的这个函数,这个函数最终返回到哪里,返回到这里对不对,也就是说实际上是死套会收到这个函数啊套帮我们来执行这个函数对吧,他自己执行这个函数。
20:20
他还不知道自己吗?这里我们就没必要写死套了吧,对吧?啊,这以就不写了啊,就删掉清楚了吧,因为这个函数你最终就是死套执行的呀,你自己执行这个函数,你还不知道你自己吗?所以我们不写了,不写但是它哪来的,哎,这整个上面都没有哪来的对不对?哎,那我们的这个它就可以接收到一个正面参数,也就是说我们最终返回这函数,它可以接收到一个dispa参数。啊,然后我们就可以调这个函数可以了啊,因为这个函数是由四套来自己执行了,所以他自己可以把自己呃的一些呃需要用到一些东西传过来,对吧,然后比如说这tpa方法,它传递之后就可以去使用啊,这个就是我们的啊异步的一个action。
21:04
啊,然后关于怎么用呢,会给大家去整理成笔记,诶放到这里啊先这节课先到这里。
我来说两句