44_尚硅谷_redux_comment应用_redux版本_同步功能.avi原创

来，我们把前面做的先给他把备份一下啊。把它改一改也行，直接改了也行啊SC。这个做的是COUNT4，他用的是re是义务是吧。叫YZ。嗯，就是re。好，下面我们要去做什么呢？前面我们做过一个小DEMO，叫评论管理。还记得吧，但是那时候是用的。对不对，那这一次呢，我们要把它改造成re，看它们之间有什么区别啊，怎么改？就是这个，就是我们前面写的，看下C。直接给它copy过来，改成SC。你还差这塔的运行吗？好，但是呢，这个项目里面需要引入那个boot样式。所以我把这个CSS和这个HTR。

给它覆盖掉当前的。这样我的boot的样式是不是就用上了。啊，因为我们那个评论列表需要用。好了，我将我当前这个应用呢，给它运行起来看一下效果，这效果大家见过，在那做。我要对这个效果呢，进行一定的小的功能上的改造。啊，等下出来以后呢，我跟大家说一下需求。啊，功能课肯定现在都有啊，没有问题，大家看一下对吧。删除也可以啊，没有问题。啊，我现在说一个事情，就是我们现在这个初始化数一上来是不是就有啊。我现在想模拟一下，数据是从后台获取的。那你说上来肯定显示不了。它是不是应该异步显示啊，哎，我们来先在RA里面把这个功能给改造一下。

啊，难题在哪里呢？在这里大家看一下。把这个都不用了，都干了，我们初始化数据的时候，是不是就已经是个数组了，而且有数据，关键是。这个我们开始的时候应该什么啊，没有数据来，我把这个先注意一下，因为等会我需要这个速度啊。来看到这里，我是这样开始是一个什么呢？空的速度。那接着我应该想办法立即去后台发请求，获取一个带数据的数据吧，这个我在哪发请求？哪个方法里发请求，其实就在哪个生命周期方法里发请求，这是固定的啊，OK component。能不懂，基本上都固定，我们在这里要模拟的，模拟啊啊发送啊，叫异步请求，干嘛去获取数据。

那如何模拟衣服啊？晒得太慢了。固定的接着指定这一个1000是吧，这一秒钟以后才得到数据，数据呢，就这一个。Comment给他下面数据得到了吧，数据得到以后，下面是不是更新状态来更新this.set stage查一个对象。那也就是说这个列表应该是一秒之后才显示出来。对不对。好，我们来看一下。刷新呀。有没有看到？

这就是一个异步的效果。那现在呢，我们的那个用rap已经实现了，我把这个呢，稍微备份一个啊，把这个备份一个，看一下C看下V。啊，这一个是那个应用COMMON1，他用的是什么呢？React。后面的在这是吧，没问题，好，下面我们来改造。我们现在要去使用啊。包括它所有东西都要使用真正写的时候，我要现在演示真正写的时候该怎么写，首先上来创建几个文件夹。首先放来创建一个最重要的redux。对吧，还有一个我们有两个概念，一个叫UI组件，一个叫容器组件。所以这个用来放UI组件对吧，这个里面用来放什么呢？容器组件看看呢，先把结构摆好。

看不到，而且这个里面的文件固定都给他一口气创建出来。最简单的一个解释叫action杠。对吧，OK，这个里面放什么。啊，包含所有action的type名称，产量，对吧，能懂不？啊，至于哪些等会再写，你先知道他放什么东西，其实这个模块很简单。都是些产量字符串。好，除了这一个，还有什么absence呗。好，说一下这个里面是包含了啊所有的其实包含的是不是action，而是action什么呢？Create一个X create是不是一个action的工厂函数啊，啊这个东西是一个action的工厂函数，那我们说的时候就说X。

是action的工厂函数。就帮很多个啊，需要几个得看实际情况，有同步的，也有什么异步的。先摆好啊，大家一定要先把结构先摆好，好，下面继续。必然会有一个啊，叫reduce。啊，不是reduce，是因为可能有多个，所以我这个模块有S。听不懂，好来。包含N个啊用来干嘛呢啊，Reduce函数，这个reduce函数是干嘛的。根据脑的state和什么呢？Action返回一个什么新的state？

先现在都是摆结构的，是这这些步骤非常关键。啊，你先把东西给创建好，还有一个东西。就是我们最核心的。re，最核心的管理对象不。对吧，来这是什么意思，就是最核心的管理对象。也就是这个什么十多。没。好。前面这些都是通用的，说白了就是你在项目开始的时候就可以把它搞好。先下线里面可以先配些东西的，没关系，先让那个摆好啊好。那下面啊，我这一部分代码。啊，基本上啊会差不多是吧，会很相像的，那我们先分析一下，再写这一部分，分析什么呢？分析这个里面这么多组件，哪些是UI组件，哪些是容器组件。

等懂不啊，OK，这个APP最外围的。接着是那个左边的A。是吧，右边的list以及里面的什么item。还记得，其实我们现在已经做了集中的管理。我们所有的都放在哪管理的APP里面。接着把数据和一些行为操作是不是传递给各个组件，看到不，他们这些其实就是UI组件。而我就把AP单独提出来，放哪个里面去了。容器组件就他提出来，别的都放在那里，说白了，这些代码一动不动不改。

能懂吧，这些代码都不用动了。唯一要动的，他肯定要动对吧，他肯定是要动的。这个能不能懂啊，先不用啊，先不管了，先把这些写好再说，这个可以写了，其实这个是完全完全可以写了。来看一下。我们这里面最终是不是要引入一些东西，譬如说啊，我要引入provider吧，因为跟标签嘛啊provider from。React杠。因为最终需要有这个标签，他这个标签接收一个属性。是什么属性？多呀，对吧，那我自己有吧，有啊reduction下面的什么多，其实我还没写，那没关系啊，你只要知道有它就行。好，下面这个APP肯定要引入吧，来引入一下import APP from。

点斜杠哪个里面的contain下面的什么APP改变的p.GS。下面要变化的是不是它呀，来写一个小括号，因为要多层结构嘛，写一个。给他传一个尺度进去，接着里面。APP。非常固定。这个能看到吧，能好行。那下面呢，我们要对它进行改造啊。首先看一下引路啊，看一下引入，这个引入好像现在不对了吧，因为咱俩关系已经不对了，对吧，先要再回推一下他们是。Components。下面的。因为我在看下面嘛。那这个结果。啊，这个大家自己可以调一调啊，好来说一下。

我的这个AP还能定义这个吗？是不是不能的呀，所以他没了吧，啊，他没了啊，给他干掉吧，没有好这一个是在我这儿住吗。也不是对吧，真正这个异步的操作，我们是不是要放到X里面去做呀。好，都给干掉吧。看了啊，OK，但是到时候我是不是要去。说白了，发一个命令让他去，让他去查呀，啊，这里先放着啊，先放着这个方法这些啊，这些我们来说一下。这些以前我们是不是在这里面APP里面统一的定义了一些更新的函数。现在也不需要了。啊，这个地方也不需要了。但是你看下面我们需要一些什么啊，大家看到我们这个render需要哪些东西，首先我是不是要components。

这个应该是不是大管理啊，所以啊，我现在没有状态了，只能是通过什么方式传入。是prop吗？对吧？啊，那我就先声明一下，Static proper其实就是一个套路啊，啊，Static写错了，写成state了。对吧，这个时候需要一个人。需要一个proper proper。好，看看我们接收需要接受哪些东西啊，首先要接收一个comments。对吧，它是点什么类型数组吧，懂不懂is required。就是要接受一个一般属性对不对，那应该啊，这个地方大家看我是不是还要向这些组件传入两个。

是吗？是不是函数属性，这两个函数是不是用来更新状态了，那你想啊，我这里不用认写，不是认里面，而是应该在属性里面是传入。这个能不能。啊，所有以前我自身拥有的，都应该交给。外部传入所说外部其实就是re里面拿出来对吧？啊，写法很固定啊，来写一下proper.function点。Is repaired，是不是还有一个，哎，这个名字叫他。Delete。不用变，有没有看懂，好，那也就是说我在这个，呃，不是data是什么pro里面取出三个数据，对。Comments。还有什么I和什么delete，而这三个数据我是不是都用到了？

看到了吧，这些是不是都交给了子组件呢？他们都是啊UI组件。那也就是说我这两个组件要变化吗？不用跟以前一模一样。对吧，只是说它的数据来源最终是不是从里面拿过来的。好，来，下面我要说一下，我们这个组件是不是得用connect给包一下。是不，你不玩的话，怎么能接受这三个属性呢？我们要想办法，是不是向APP传递三个属性数据，那必须需要一个人。哎，这个connect啊，先写个大括号吧，没提示总是不算react杠。有啊有，而且写法非常的固定。

告诉你写法非常的固定，怎么写的？Export default接着了，Connect括号再括号，传什么APP？这个里面是不是要传两种属性的。啊，第一个呢，用来决定一般数据，一般数据属性的。第二个呢，用来决定什么函数属性。对不对，但第一个参数什么类型，一定要记住数据类型啊。是不是一个函数啊啊，传个匿名函数就可以，而且这个函数呢，固定有一个参数。State这个啊，返回的是一个什么对象？对象里面必然要有一个属性，名叫comments。还没到。呃，这个comments是不是应该。就是这个state或者state里面的一个属性了。那到底是state还是state里面的属性，得看你内部的结构是什么。其实两种写法都可以，比如说是一个state，假设我就写个state啊，说白了，我的state就是一个数组啊。

那不懂就说明我在这一个reducer里面，我的state是不是就是个数组。啊，当然你也可以，你也可以设计成其实可以可以设计成这样也是没有太大问题的啊OK。但是你要这么写的话，肯定就不能这个地方应该是个什么冒号。是吧，这两种方法都可以，我们先搞这第一种，到时再说第二种啊。这里面就说明了我的state就是一个数据。能不能看出来必然是，要不是的话就有问题了。好，除了第一个参数，还有第二个，第二个参数比较好写。那我就把这两个函数给了什么？

是不是传录？两分钟，而这两个函数从哪来？还记得不？这两个函数action，对啊，只要你要记住这些关键点，只要你记住这些关键点就没什么太大问题。OK。其实我们还没写啊。先写上这。你谁去啊？点点斜杠啊，给大家抬一不能写吧，再来一个点点。行了，接着可以写写什么。Action，但是我这两种方法是不是还没定义啊。看着吧。好。其实我这个外部代码就写好了。就是这个代码已经写好了，现在就该去写什么了，写我们re的这一系列的代码。看到了吧，这个写的时候给设计一步一步写，先写他。

也就是说，你对于属性的操作，对于数据的操作，到底有哪些操作，得定义一些常量名称。Export固定的case。我们是不是有两个操作，一个加。这还有个什么是不是啊，对不对。啊，其实还有另外一个那个先别想，先想简单的能懂吧，啊加和三它其实都重复操作吧，说白了为一点加和一点减，立马就起效果。说明他是同步的操作。这个能不能懂，好来我们来去做一做啊，来做一做。在这里面export啊，Constant起一个名字，比如说叫ADD啊，下划线comment等于一个串，对吧，这个串呢，其实你可以写成大写，也可以写成小写，但这个名字最好写大写，因为都是大家都是这种风格，其实这个值你可以写小写也没关系。听到吗？

具体大小写啊，是没有太大影响啊，但这个尽量写大写，因为都是常量。人一看就知道啊，那其他的是不是还有一些。还有什么，是不是还有个定力的。能不看到知道怎么变小写吗？Ctrl shift加X。啊，就是大闸线shift加X。啊，如果有是小写变成大写，如果大写就变成小写，它可以自由切，但你首先你得选中啊。好这个啊啊，一个是代表添加评论吧，呃，下面这个代表是什么，删除评论。认了不好，没有问题啊，这个就小写吧，你也统一风格是吧。

好，没问题，这个设计好以后，下面我要写它。写action嘛，其实我们就两个对吧，一个是增加的action，一个什么啊删除的啊，就是添加，再一个是什么删除。记住了啊，要强调概念是同步对不对啊，同步的操作。好，这些名字吧，其实都已经被确定好吧？这个名字为什么说确定好了。因为我刚才在去写这个APP的时候啊，我引入的时候就写这两个名字。我之所以写这两边名字，也是因为它接收的这个属性的名字吧，就用的这两个名字，这样比较好，能懂吧，啊，这样比较好用啊，最好是名字一致是最好的。好，那下面呢，我们来去啊，继续的往这里面写，那就是写一个叫，哎，别自己写了，我们还是来去把，诶我刚把这个删掉了是吧。

把这个拿过来。最好是写一字了啊，等于。看到一个函数最终返回一个对象，还记得吧？啊，OK，好，有几个事情啊，首先这一个函数有可能接受参数。啊，接收什么参数，你就看我添加它。我最终执行这个行为，要不要接受参数？就是一个什么common，甚至应该最最直接的应该去看谁了，看这A里面去调用这个函数的时候，有没有传什么参数，其实本质上是看它。Don't know？啊，本质上是要看他的。那所以我们现在要接受一个什么。对不对，好，我这个里面是不是写两个属性。一个type一个对的对不对，关键type值现在还没引入吧，得干嘛。

引入一下import大括号from，点斜杠action。Pipes。我这里面现在是不是有两个呀，爱。Delete。那我用哪个。是不是用它呀来写名字，太婆的子是他。对吧，还有一个date的值。是什么？能没看懂啊，另外一个就类似的吧。是吧，啊，那我们要来改名字先，这个名字尽量的说明一下来是这个字，其实我也可以自己写啊，但是我想强调一下，跟他要一致。因为我引入的时候就是这个嘛，不然的话就有问题了。来想想我三个时指定什么？删除某一个评论是不是下标啊，其实这个啊，应该你要去看一下谁看一下item在调用的时候。

他们在调用的时候传的是什么？就是。对不，本质上应该看他能不懂。因为最终全给他掉的嘛。好没问题，那下面我这个呢。啊，Delete后面的对吧，这个地index。没问题吧？好。那这个actions我们就这么写完了。真是。啊，相对来说啊，就是一个一些说实话很多人，很多工作人，他其实开始也不懂。可能公司里面批的有三个人，有一个人先学会了。写了一些代码出来了，另外两个人怎么办？就照着写，就仿着写，可能他都不太明白。那个那那个学会的人可能就说你先写写几天对吧，你照着我写几天，你要写错了，你要运行不起来，你再找我看啊，你写几天，你慢慢就明白了。

啊。因为一个人说实话，你要去想学redux，你花个一周两周，其实没人跟你说，你自己去看是挺难学会的，因为我就经历过这样一个特别痛苦的过程，我开始觉得这个大太难了。啊，真的是太懒了，就是你你等你真正的很多东西，就是你学明白了啊，你把他的那个关键点把握住了。其实问题就会很清楚，就觉得诶其实就这么回事啊，说白了就摸清套路，那个套路搞清楚了，你就收益这的事了，对吧。好，那下面我们需要去写一个东西叫什么？Reduce是吧？Reduce不要写函数吗？来写一下啊，Export a function。

给我的这个函数要取个名字，我当前这个函数是要去操作一个评论数组吧，那我一般情况下就这么写，看到啊，我要操作一个评论数，我就写。com。啊，一般最好是啊，以你那个数据啊，要操作的数据来命名。是比较好的。后面就能看得到这种这种命名方式的优势啊，好，这个里面写什么固定的。两个35STATE和什么X？而且这一个state必须要指定一个默认的初始值。等于零那不行啊，应该是等于一个数组对吧？啊得一个处的数组，我这个因为它数组结构比较复杂，所以我先定义在外面，我叫它1COMMENTS。就初始化的comment嘛，那当然你可以给个空数组，后面是不是再去往里面填呢？啊后面从服务器获取，不过呢，我们先还是填一下。

先填一个。这个天的代码是还在这吗？删了吗？啊，我们来看一下，我们刚才好像保留没有，嗯，这个里面最好最好是要有的话，最好能有啊这样的话。因为我自己写，因为这个名字不能随便瞎写了。听到不，因为赌的代码是不是已经确定了啊，我先暂时的先不搞那个异步啊，我先把同步的搞好了，我才有心情搞异步啊，我同步的没搞好，哪有心情搞义务。认识吧，好，那就等于什么。这个下面的写法非常的固定，告诉你就一上来来一个Switch，而且Switch的对象也是一样的，是X点派。对吧，这个里面有很多case和一个default。

T能好有哪些case，其实非常简单。啊，你只需要去把那个点action type层面，所以导进来就行。能懂不啊，这个里面我一共有两个爱。营业。那也就是说我有几个case，两个对，很好，就两个，这里面每一个都是一个。对吧，把这个结构进行好。好，还有这个default直接啊，State。其实这个default经常是在第一次的时候调。那么呢，这个分支第一次的时候不得到一个初始的状态吗？能看到吧。好没问题，那下面啊，大家看到下面我要是不是做这两个case啊。

好，如果是添加，大家看到我最终返回，大家知道我要返回一个新的状态吧，新的状态肯定是个数组吧。必然的，因为我就是一个状态，就是宿主嘛。那我这个数组跟以前的数组是一个什么关系呢？也就是说我要将我这是添加一块，添加哪个位置数组呢？第一个位置。但是你能修改它吗？不能，你能直接修改这个视频了吗？也不能，你不能直接修改它，你得产生一个新的，怎么样去不修改以前的，又把以前的给捞上来了啊，这个地方大家看到我，我先写一下action date，这是一个什么？Action data，这是一个什么东西？这是一个什么对象？是不是common的对象？啊，这个怎么看的，大家看呢啊，看谁去看他呀。你看这里。

Date是什么？我要添加comment吗？能不能看到我的X里面就包含一个date塔，里面值是common嘛？看懂吗？啊OK，你们公司可能会就命名一个comment，这里面命名一个index也有可能，但是我我就采取一种风格啊，都命名成对的。但你要知道这个date的值到底是什么，其实就根据你这个意义你就能看的出来，你想想看，你再添加comment。那这个date是不是就应该是后面了。我相当于是不是这个空添加空是放在第一位后面的是不是原来的状态。怎么办？哎，点点点是对的，千万不要点点点他啊。我是在老状态里面先添加一个框的，对不对，而不是初始状态，听懂不？啊，你不能用它记住了，你应该是state去点点点。

看到吧。因为这个就是当前脑的这个速度。听懂吗？啊，OK。这个挺有意思。也就是说，如果一旦你用上redux以后，点点点操作用的特别多。啊用的挺多的，因为一旦操作数组，那很有可能就用点点点操作。好，下面看删除。删除，那想想看啊。也就是说，我。要将state数组里面的某一个。对象数组的某一个common的对象是不是去掉啊，但我又不能改变这个state本身，记住了啊，我不能改变state本身，我们说过是原来状态不能改，得产生一个新状态对不对？这怎么办呢？要用数组的一些方法才能做到，哪个方法呢？我要去掉一个对吧，你用行吗？行不行。

你拼说它是个数组嘛，它本来是个数组，我用什么意思啊，来看到action.date就是一个下标。这样好吗？这行吗？不行，这个是去删除数组中的某一个元素啊。你这个状态变了。那么懂，而且返回的也不是这个数组啊，返回的是被删除了一个对象。我要返回一个数组吧。啊，这个时候啊，我写吧，因为大家不太懂啊，有一个方法叫应该用过，但是你现在想不到干嘛。啊，OK，是不是这个地方是什么意思，过滤记住啊，现在是个数组，它是个数组能不懂。数组过滤的方法会改变以前的数组吗？不会，它是想产生一个什么新的数组，新数组跟以前的数组比较。是不是可能会少一些元素啊？

能不能啊，OK，那哪些元素会被干掉了，或者说留下哪些元素呢？来看这里我写出来先啊，每一个都是一个啊，我先写上啊，看大家懂懂。不懂你就说话啊，来一个箭头啊，我留下的是什么呢？In是不等于。Action点了。Action date的值是不是我要删掉的那个index？能懂不？那你想啊，也就是说我这个F留下的是什么？留下的是不是它返回处的。是不是这意思，留下的是这个结果返回数，这个结果什么时候才返回去啊？是不是这两个不相等了是吧，那也说谁被干掉了，说白了就是这个date所对应的那个下标。

的那个被干掉了。但是你要我要再问一句，我这个方法有没有改变state本身？没有，它是不是产生了一个新的速度，而这个新的速度是不是就是我需要的新的状态？啊，所以方法也是用的特别多的。因为fair有特点啊，它不会改变以前的数据，对吧，它还能去掉一些对不对，你经常只要你做删除必要用到。删除列表中的某一个元素，这不经常用的功能吗？不是。啊。这个首先你要你你首先理解语法，再理解它的功能是什么。啊，如果你语法不懂，那你不要去看功能，你先看想方设法看懂语法。

其实这个语法非常简单，就是这是个回调函数，回调函数它的返回值是一个布尔值。能懂不？而布尔值有什么样意义呢？它能决定我当前被变异的这个矿，问它会不会加到那个新数组里面去？什么时候才加进去啊。啊，我的这一个return的结果是什么初的时候。那反过来说是force就怎么着？就不加，不加是不是被干掉了呀。真的吧？大家先把这一个语法先搞懂。那这个我们就写完了啊，这一部分就写完了下一个。写谁了？这一个的写法基本上是固定的啊，基本上固定来我们来写一写。

这个里面最终是不是要去向外暴露一个什么多对象嘛，Exportt defport，但是这个多对象嘛，它是通过谁产生的，有一个方法叫create store，对吧，它在create store是哪一个包里面的，哪一个模块里面呢？Re里面的。对吧，而这一个store它要接收两个参数。还记得吧，第一个是reducer。能懂吧，有绿色有吗？有啊来。From点斜杠。Reduce，其实我们这个向外暴露是不是能接受它呀，但是你外围是不是必须加大括号。能看到吧，这个外围现在必须加大括号，因为我没有加default。我不能加积分赛，因为我要，我有可能暴力多个。

能不懂啊，那也就是说现在我传的是什么。他第一个。是这意思，好，下面呢。啊，下面又是那一套了是吧，就那一套那个好几个包啊，首先啊，要引入的是一个叫什么啊，先写下from啊，写写它啊，先随便写一个啊，来一个什么res think，这是要一个吧，还有啊，但是这个名字啊，这个名字就叫什么think。还这个里面还有一个函数，用上这个重力键的函数，你看它出来了是吧，挺聪明的是吧，还要引入一个工具来帮我们去调试。啊啊，先搞个叉叉再说啊，后面再写名字叫什么呢？叫一个compose什么呢？诶。

没了吗？突然间啊，完了，记不住名字了。就这个。啊，刚才名字写错了是吧。因为我们的插件是不是都下载好了，都下载好了，好里面的写法是固定的，我告诉你这东西不用背啊，你看我都没完全备注，因为我就没背过。嗯，写写他如果能记住就记住，记不住我就自己看一下文档。能不能看到啊，所以说它是很固定的。说白了啊，你把这个写好，写好了以后，后面复制粘贴都行，这没问题啊。但是开始之后最好尽量自己写一写啊。你可参照的写一写好那。也就是说这整个体系我都写完了呀，是吧，那这个地方这个里面我是不是也写完了，那组件里面呢，那个容器组件我是不是也包好了呀。

Okay。来吧。啊，关键的时刻，神圣的时刻到了。啊，也不知道行不行是吧。说。啊，就看添加就删除行不行啊。周立，哎，停下，第一步搞定啊，删除。哎，可以啊是吧，嗯，可以。