00:00
好各位,那刚刚呢,我们说了这个reus的精简版,不知道听视频的各位呢,你听到这一小节的时候,有没有把刚才上一小节咱讲的这个精简版,你好好的敲几遍呢?一定得敲啊,好了,打开read密文档给大家呀,整理好笔记了啊,非常详细,首先第一步要去除count子件组件自身的状态。那你想嘛,你要想用redux去管理人家的状态,那就要去除它自身的状态,但也不是说把自身的所有东西都删掉,对不对?那这个车的名字可以放在自身嘛,别人也不用,但是你要把谁去掉呢?这个count对吧?哎,这会儿要记得去掉好,再回到read me,然后在src下建立什么呢?这个redu对吧?然后start.js count reducer,其实这呢,也就不用说了啊,建立redu文件夹,start.js count reducer.js这个命名一定要这样命。
01:02
那能区分好是谁的reducer,然后呢,你得建立store.gs那你想想是不是要引入redu中的create store函数啊,是不是得创建一个store啊?哎,然后再读第二句create store调用时是不是要传入一个为其服务的reducer啊,真正用于加工状态那个人对不对?然后第三个记得暴露到对象,然后编写countt reducer.js reducer的本质是一个函数对吗?哎,接收之前的状态action返回加工后的状态。reducer呢,有两个作用,初始化状态和加工状态。reducer第一次被调用的时候是store自动触发的,不是说我们程序员说了加还是减,对吗?传递的之前状态是安范的啊,那可以在这呢再补一下对吧?那传递的action是什么呀?对吧?那比如说是这个艾福艾福啊,然后呢,大写的什么re,然后下边的什么initt啊,然后随便写一些这个英。
02:03
门什么的是吧,在这敲个回车来啊,回车传递的踏实。回车,诶,中文传递的action是啊,是什么样子呢?是这个样子的,是一个对象有type类型啊,但是type类型里边写的是这种东西,什么init,然后就开始了,好像下划线吧,然后是A点三啊,B点四哎等等这些东西,好哎,就类似于这种形式的好然后第五个再读在index.gs中检测啊,Store中状态的改变应该叫做监测对吧?哎,监测到中状态的改变,一旦发生改变,重新渲染APP。备注,Redux只负责管理状态,至于状态的改变驱动着页面的显示,那要靠我们自己了,对吧?哎,一定要注意index里边千万要把这个记得写哦。
03:03
好了,关掉啊,那刚才我们写的什么版本呀,是精简版,那接下来呢,给大家再写一个完整版也不会很难,就是比刚才这个精简版多了两个文件而已。好回到redux原理图,我们要把一个人呢,给他补回来,谁呢,就叫做action cur。哎,别你自己去写这个action对象,要借助action c去创建,这是人家的设计理念。回到代码当中。走。折叠起来在redu里边,你觉不觉得你得再添加一个文件进去啊,那么看图说话,你觉得接下来再添加的那个文件应该叫什么名字呢?反正是创建action的对不对?你注意action c是不是也有词啊,那这啥意思呢?每一个组件都有自己的action cur,那所以说回到代码当中,你知道我要写什么了,右键新建文件count_act ion.js你当然也可以写的更完整一点,叫做count action_CAATOR4这么写也行,哎,是吧,也行,但是呢,咱可以精简一点,就叫做count action,那你说count action是干嘛的?为count组件服务的action呗,走。
04:35
那这文件能干嘛呀?好,该文件专门为count组件生成action对象。对吧。哎,所以说同学你有几种哀身对象啊?你有几种操作吧。不是加就是减对吧,那所以说非常简单了,你就定义成一个一个的函数,你调我,我就给你返回一个加的action,你掉那个,那就给你返回一个减的action,那所以说写呗function啊,名字起一个吧C对吧,创建加。
05:21
Increment action行吧,哎,Create increment action,其实同学我得先说啊,在开发里边一般我们不会说把这东西就写的这么长。开发当中是有很长的方法,但是这个方法不至于写成这么长,那我现在先这么写着,目的只有一个,让大家看起来方便。啊,同学你放心,随着我这个课的讲解,我会大概写八到九个redux版本,那最终那个第九个版本才是最终完善的那个版本,明白不?哎,所以说你练习的时候不要给自己太大压力,咱就一步一步来啊,我这这么写,你你也这么写着是吧?来走是个函数吧,嗯,来。
06:08
是不是有返回值啊,返回个啥呀?Action对象是不是得有type值啊?那同学我问一下,你创建的都是加的action,所以说这个action type值一定是对吗?那问题是加几呀?对吧。传过来。那这就写date。那重名了吧,对象简写方式是不是可以这么写?OK,那同理,再来一个,这叫做re,是不是减法的action呢?啊de,我知道有些呀,同学可能说老师这俩方法有点重复,我写一个就行,对吧?哎,我不光传这个data,我传一个type,再传一个data啊,倒也可以啊,那么写也没问题。
07:01
但是后期我们要讲一个东西啊,各位就是异步action,异步action,哎,所以说我建议大家现在先一个action,一个action怎么写着是吧,因为你现在的写法同学,如果咱过于随意了,你就发现啊,等我再往下讲东西的时候,硬写也能写,但是对于你来说,那就可能就觉得有点绕了,是吧?哎,为以后做铺垫,好,那你都掉了action,那你说这是不是得叫做。哎,好了,这俩函数写完了,同学一个函数就是一个action crater,这就又是一个是吧。那怎么办呀?他俩是不是得暴露出去啊?你放在自己家,这有什么意思吗?但是这么写有点麻烦,我想写成箭头函数。那你说我是不是可以这么写他?等于。箭头函数。箭头左侧是不是只有一个参数省略小括号?箭头右侧只有一句函数T是不是可以省略花括号,而且最主要的是它是不是还有返回值。
08:05
那就更简单了,把这对象直接拿走。放在这儿。是吧,我问一下这么写对吗?这么写不对。同学,我这么写什么意思呢?Create increment action是一个函数,他接到了一个参数叫做date,但是根本没用,他返回了一个一对吗?好,那我问你这么写啥意思?Date根本没用,返回一个空数组对吗?那我现在想返回一个对象,你告诉我怎么写,就这么写吗?不对。不对,你这么写,人家就认为这箭头,诶,这花括号,人家不认为是对象。兄弟,人家不认为是对象,人家认为是什么呀,函数体内画括号。哎,所以说我们可以测试一下来同学新建一个代点TML。怕大家不理解啊,写着脚本cos a等于。
09:02
一什么意思?我这么写什么意思?A是个函数,只要你调用是不是返回一个值,那值是不是一呀,来咱试试啊log a调用右键打开。控制台上键刷新是不是一好了回来。如果接到一个参数B呢,那就写B,那我这么返回啥意思?返回一加B的结果对吗?你这传一个九保存回到页面是不是十。回到代码来。我想返回一个对象的同学,那怎么办呀?就这么写吗?啊,你比如说贝是读出来它那个变量B,这能行吗。你试试吧。回到这同学and find,这不对,你这么写的意思,他把这个东西,它把这个东西当成函数体那个关键的那个符号,那个画括号了,明白不说,老师,那我想默认返回一个对象怎么办呀。
10:02
那最笨的办法,你这么写呗。这花括号代表函数体,哎,Return,这不return一个对象吗?回头是不是一个对象?但是我就不想再写这RETURN1句吗?可以这么玩,剪切走外边包一小括号,把它丢里面去,它就能自动返回一个对象了,来到这儿刷新瞧着对吧?哎,这会儿你要知道这个点好了,右键删掉,因为它不是很难的东西啊,说一下大家自己下去练就可以了,那这怎么办呀?哎,小括号划括号太怕,你都创建的是加的action,那当然这。对吧,好的date值得,那就是这date呗,那在这就就不写了呗,是吧,那同理,再复制一份,下边是不要了,改名这叫做。
11:00
这叫这叫date对吧,好了,这俩东西是不是暴露出去,那我就用分别暴露了,这个这个嗯,对吧,Sport,诶暴露了。好,那以后只要用到action对象的时候,如果您想用加的action是不是用它。你想用简的action,那是不是用它,那怎么用啊,是不是得调这俩函数啊,所以说关掉这一块,折叠起来回到你的组件里边。那慢点来,慢点来,回到咱的组件里边。王校长,王校长干嘛呢?这干嘛呢?是不是自己亲自动手写action对象呢?那咱能这么做吗?那不能,那不能咋办呀?那你就得引入东西呗,写好注释,引入action啊,或者是说的仔细点,引入action。啊,逗号专门用于干嘛呀,创建action对象,好的,引入当前路径下不行了,点点杠点点杠。
12:16
Redux下载。Counter action。由于你是分别暴露的,所以说我是不是得这么引入啊,那引入谁呀。Increment action create action。其实同学正常写,这不应该这么长,应该就叫一个词crement就得了,但是我怕大家把这increment都搞混了,那在你面前同时出现三个increment,你就可能就会晕了,那所以说来,咱长点写着不怕的,这怎么办?您别自己写,那这咋写increment action走,加几,告诉人家加几加VALUE6乘以一,准备好了再给人传过去。那同理,所有需要加的地方。
13:01
来吧。这也给他改一下是吧,但是不能是创建这个家的action了,得是create action。那剩下那两个加。这是不是加呀走。这是不是加呀走。好嘞。啊,哎,那你看这回写的就完整一点了,说老师那也没啥呀,不就是多了一个action吗。如果在公司真实开发。还会再多一个文件,什么文件呢?引导大家一波,同学,你觉不觉得啊,我的reducer里边要判断你到底是加还是减。自己亲自拼串写的单词对吗?好,Action CRA里面是不是也得说明白,你到底是加还是减呢?是不是也是自己拼写单词啊,那你就极其容易把它写错了。你别觉得说老师,哎,我写不错,就这个ENT,你写成net,其实都不太好察觉。
14:03
那你要这么写,那你后果就是。回到这儿。这刷新一下你点加啊,根本没效果,为啥?因为到了reducer里边,人家匹配不上,你也不是加,哼,你也不是减,那我就把之前的值给你不加也不减。那你这要改对了呢,ENT,那你看效果吗?刷新一下。这家是没问题的。对吧,所以说同学你这单词很容易写错呀。如果我是个计算器,加减乘除开平方,开开三次方,那你咋写啊?那是不是就容易乱呀,所以说一般我们会定定一个什么呀,常量模块。那常量模块叫什么名字呢?其实我们去定义常量的时候,用了一个关键字叫做constant,其实就是这个单词的缩写。constant这里面定义什么呢?定义常量,写好注释,该模块是用于定义action对象中type类型的常量值。
15:15
防止你写错走。首先定义第一个。其实cost定义的变量啊,一般来说你定义的如果是常量是怕程序员写错单词,我们一般都用纯大写的形式,你比如说加就是equipment,对不对,它的值呢?那是真正的一个小写的字符串,对吧,Increment。说老师我这儿不想定义这个,我想用这个纯大写的字母加加,那倒也行,但是这就比较low对吧?哎,撤回来叫大写的increment,那你再复制一份呗,这是不是叫做rement。那你这再改一下呗,是不是叫。那这俩东西,那我问大家是不是都得暴露出去啊。
16:05
完事儿。但凡用到加这个词和减这个词的时候,那我问大家是不是都可以读这个变量,就读出来了,就避免了由于程序员的哎,不小心把单词写错,导致功能不能用,对不对。啊,检查一下咱的单词有没有错啊in啊这呢,好了没问题啊刘见关掉哪用到这单词了呀,啊,哪用到了。同学,我问你R用不用,你这不得判断吗?哎,但凡用到单词的地方来吧,别客气,Import划括号,当前路径下的谁。Constant。引入谁俩常量,一个叫做increment,一个叫做decrement,那你这呢。这么写对吗?这么写你就错了。你判断的不是这个大写的字符串,而是说这个大写的increment这个变量里边的值对吗?在这呢,删掉好。
17:02
哎,写完了,那还哪用到了呀。是不是也得用啊,哎,好了,走。画括号from当前路径下的constant。引入第一个常量increment,第二个rement,所以说你在说加还是减的时候,别自己拼了写这个,这呢也别自己拼了是不写这个呀。OK。啊,同学,我只是多创建了两个文件而已,一个是action,别自己写对象,让人家哎给你返回一个对象。还有就是我用到了常量模块。啊,用于定义常量值,同学逗号再给你补一个,目的只有一个,目的只有一个啊怎么的呢?便于管理的同时防止程序员编码啊,或者说程序员那个单词写错对吧。
18:12
同学,你要是自己一点一点的,比如说老师,我在reducer里边,我自己写increment,我在这个action里面呢,我也自己写cment,那如果有一天这单词改怎么办呀?你34个文件都用到这个单词了,一个一个去找,一个一个去改啊,不用,如果你34个文件都是引入常量的形式读出来的,你只需要把第四行常量模块里的第四行一改,所有用到这个变量的东西是不是就都改掉了呀?哎,便于管理的同时防止程序员单词写错,这个就是redux的完整版啊,那我们同样的套路,CTRLCCTRLV右键。重命名,这叫三下划线src下划线叫什么呢?Re?
19:03
完整版只是说文件完整了啊各位不代表说我这些东西,哎,这些名字命名的都合理知道吧啊不让改为啥呀,因为我正在运行着呢,给它停掉啊,然后呢,我的Vs code给它关一下回到我的桌面上啊,然后右键打开重新改一下它就能行。嗯。折叠起来,这重新再改三下划线src_redux完整版。好,大家这个自己下去一定要多加练习,这个完整版啊,必须得练一下,你不允许一直听,然后也不练啊,OK,那给大家来一个总结吧,我们回到这个笔记里边,给大家再补一个一,咱说完了咱再说说这个二。回车走,一折叠起来,提前我写好了,二、笔记在这儿求和案例redux完整版新增了两个文件,一个是这个专门用于创建action对象,一个是constant.js放置,由于啊,放置这个容易是吧?哎,写错不用说那么复杂,放置容易写错的啊,这个type值tap值,完事就多这俩文件,这小节我们停一下。
我来说两句