41_尚硅谷_redux_counter应用_react-redux版本.avi原创

我们先来说一下现有我们这种写法的问题。我们现有学好的问题，有一个非常重要的问题，就是的组件跟redu代码耦合度特别高，什么叫耦合？就依赖性特别强，我们来看一下什么意思。也就是说我们的这个组件。在我们当前组件的很多位置是不是用到了这个是多的一项。是吧，啊，这就是跟re代码合在一起了吗？啊，就是能不能把这个耦合度降低一点啊，别到处都用，看到我的语法。其实是可以有办法做的。但是要想能够简单一点，需要用到一个插件，诶这个时候看到另外一个插件了。哎，这个时候很有意思啊，是吧，刚才那个是不是叫re啊，现在又出来一个react re。那你觉得这个库是个什么样的库？是react的插件。不是为大插件，对不对，属于X插件，你说这个插件用来干嘛的呢？

对吧，它名字既然叫这个，大家想啊，我是react的插件是吧，又是出来这个名字，我们说后面这个名字，它能够暗示它的一个作用是吧，其实它是用来去简化我们在react项目里面去编写Du代。就说白了，他觉得你直接就用它啊，就用就刚才说了嘛，耦合度太高了嘛。编码不够简洁。用它就能帮你耦合度降低很多。嗯，OK。好，首先你要知道它是一个react的插件库是吧？是react插件啊，不是大插件，它的名字你都知道，专门用来简化什么呢？在react应用中去使用什么，就简化它的编写。好，这个分类呢，等会再说啊，等会再说，我先带家用一下啊，那个API我就先不带家读了，我就直接带大家用一下。

让大家感受一下，看是不是真的简单一点。好，那但是这个还是需要备份一下吧。你一改就没了。很C。看见一个。叫count are。下划线这次用的是。Rex就用了re啊。记住啊。好，下面我们来改造它。这个地方我们说过了，我们要用它来进行改造，那就必然，是不是要先干嘛呀，是不是下载这个插件呗，是吧，下吧。向下呗，这有什么难度？N PM install杠杠c react杠。好。它的改造呢，是从这个index开始。

啊，它怎么改造的啊，看一下我说一下啊，它的这一个组件里面提供了很多东西，其中有一个就是一个组件啊，一个标签组件，我来跟大家引用一下啊，先写个大框，写个from，写个react杠，诶还没有。还没有，说明他high没有识别。嗯，OK。再试一下，看看它是不是在动啊，React杠识别了吧，好，识别以后我想从中啊得到一个什么呢？得到一个主键，我怎么看出来是主键呢？其实就看它大大写就能看出来。因为在RA里面所有的组件内都是什么大写的首字母。懂不懂它如果是个函数，那肯定一般是小写是吧，一般情况下就是二好。怎么用来看的话，它用法这样用的。呃，这个有了它以后，我不需要去订阅监听了，他帮我去做这个干掉，那既然没他了，以后就没必要这么做了。

把它什么捞出来。懂不懂好，但是我们渲染的不再是AP了，而是这样一个结构，看到我写一下，写出来大家就懂了，既然它是一个主件嘛，那肯定要用它。啊，你应该想出来了，要把它什么，把它包起来。这里有点像那个路由啊是吧，而且。不要传APP，应该传给他，因为他去管理的，你传个APP干嘛呢。就整个。他来帮你管理，那想想看他是不是word，这个是做的使用权的。那不能，你这个store的使用权应该交给他，整个他来全局管理。

大家看懂吧，好主重点变化在这个组件里面，重点的变化在这主件里面。我说过了，我们的目标是不希望这样，这是他这样，每个里面都有，遍布在各个位置。这样太不好了。怎么做呢？看着我，我们现在要写一个组件出来，不依赖于的组件，看着我写啊，我先声明一下我的这个proper types说明我去声明什么去了，我还接收了一些属性。对不对，我这里面要接收三个属性。看看。啊，我先我先随便写一下啊，我先随便写一下，还有两个东西，大家觉得是什么，他们。函数啊，对吧，OK，我先暂时写，写了一个零啊，再来一个绝对是什么。我这个组件是不是就需要这个数据，以及这两个行为啊。

一旦我如果传入了这三个，我还需要什么思路吗？不需要了。但是我这里面是不是要引入谁。Properties。Properties from。啊pro什么意思，什么没提示啊，没有没有去下载是吧，其实有一个问题啊，其实它这里面有，但是呢，你如果不声明在这个里面是不行的，所以我们还下载一下吧。NPM伊斯特杠杠C。是这个意思吧，好下载啊，等它下载。来我们就还继续往下写啊，来有了它以后，下面我这个怎么写呢。点什么类型number嘛，还没出来啊，来is对吧，好下面是不是类似的啊，这个不行，可是一个应该是个什么C下面的这个是跟这个什么。

一样的。Not know。好，有了他们以后，后面的事情就很简单了。后面的事情无比简单。是不就是大概它，我如果这个地方我看它啊，我这样掉，那我就那我就掉呗，我就是去this.pro点什么。Transport。指定吗？你想想现在我还依赖谁吗？我，我还依赖于那个什么？没有吧？没有，哎，下面什么。类似的。是不是清爽很多了，来个力。看到这个。

搞定是吧。能看到吧，啊OK，这个。搞定。Let me know。好，但是啊，但是啊，这个地方还有一个，还有一点这个这个这。这个里面，这个里面我是不是pro里面就有谁。Count，所以我又改回以前的那种结构赋值的写法了，对不对？是吧，那也就是说你满眼看上去我的这个主页。他有代码。没有很干净纯的代码对不对。但是我现在行吗？你觉得不行，为什么？因为我根本就没有给这个给这个标签指定这三个属性吧。听到不没有，而你看你在外面又穿吗？有没有没有，你说在外面传呢，不是在外面传。

这面产就麻烦了，他这么做的，他还提供了一个工具啊来我来写一下from，刚才我们不下了react看吗？他还提过了一个叫connect connect什么意思，连接好，怎么理解这个连接，跟大家说一下。这个连接你想想连接是不是有两方啊，连接谁跟谁嘛，对不对，它是连接啊，React组件与redu。把它们俩之间关联起来。因为最终这些方法，这些数据是不是要从reduction里面取，从reduction里面调。这个能理解吧。能不懂，因为最终状态没在我这里面嘛，是在reduction里面嘛，所以需要这个，这实际上是个函数。来做这个事情，把他们俩关联起来，也就是说说白了就给他们传三个属性进去。

他需要三个属性吗？对吧，我这三个性数据从哪来，东西从哪来。Reduction。对吧，好，看着我写啊，下面的写法比较有意思，比较特别。这一个啊，不能直接暴露这个APP暴露的是什么，这个写法比较怪啊，我先写一下再说，看是个函数，我再来一个。再来一个好，我们先从语法上理解它。首先这个connect是一个函数对吧，这个函数执行以后呢，返回的是一个函数，而这函数执行的时候要接收一个组件内。对吧，而且他返回的是什么。新的组件。那必然呢，这是个组件模块啊。他不反馈一个组件，我其实也就是说什么意思，我在这个index里面渲染的这个APP。

是上面的这一个吗？它必然不是。对吗？而是什么这一个返回的结果。的一个新的组件。是吧，说白了我是不是对这个组件进行一个包装，包了一下它，那下一步就是要指定我给他传哪些属性。啊，在这里面指定。我的我的属性两个方面，一个是一般数据，一个是函数数据吧。就分别出来懂不懂好看着啊，这个写法呢，比较有特点啊，我先写，写了再跟大家说啊，这东西得必须得写啊，是一个函数。啊，这个函数呢，要需要去返回一个对象。啊，这个地方呢啊，接收一个我先写啊，你说你也不懂啊，好，我先写出来，写完再说啊。

好这个下面啊，我不这么引了，我不这么引了啊，我怎么引呢，我一般一般情况下会这么引，引入它里面的rement以及什么呢。接着把它拿过来。咔嚓一下。好，我们来去分析啊，什么意思啊，什么意思啊，这我问大家这个函数的返回值是什么类型。应该是个对象对吧，对象里面是个什么结构。是一个count等于几，对不对，而那个几的结果是不从state里面取出来的，这个state是不是reduction里面管理的那个state？其实就是这个count值，因为我们的现在很简单，就是个数值。是吗？能不懂，可能是一，也可能二，也可能是三，对吧？好，下面这一个第二个参数传的是什么，也是一个对象，但这个对象里面是不是两个方法，说白了就两个函数嘛，一个rement，一个什么re。

而这两个对象里面的所有数据。都会被解构。被解构。负交给这个什么呢？APP组件作为它的属性传递，说白了会用到一个点点点的操作符。能懂吗？点点干嘛的，是不是解构啊，懂不懂就说白了，把这个对象里面的属性是不是全部捞出来放到APP里面去。把这个对象里面所有属性捞出来，是不是放在下面。看懂不啊，这个事情咱做过呀，对吧，只是说这些事情他是默默后面帮你做的。对不对，他后面帮你做了，说白了你就按他套路写就行。好来，我们先来看一下结果对不对啊，对了以后我们再来分析它到底是一个什么样的状况啊，先写出结果来，因为这个呢，稍微麻烦一点啊。

我们先来看一下我们当前这种写法啊。行还是不行，如果行还是挺好的啊，因为这个套路感就更强了啊。来，其实套路感强没什么坏处啊，只要你熟练了就非常轻松。好，先看功能行不行再说。好像每一个按钮，诶，这个有个小问题是吧？哎，这里面涉及到去取那个什么状态。大家看看学习状态，我没写没改。就这里对吧，取状态应该是点pro是点什么啊。现在说白了一啊，一点大都没有啊。

没问题是吧，减哎加这加不了是吧，OK，增加一步可以吧，可以接着我们要看一下这一个are react这个结构。这个非常有意思，所以我们来一步看最外层现在是谁？Provider provider接收一个什么store对象，这个对象里面是不是有PA方法，有script方法，有get方法，也就是说这些功能我的provider是不是都可以调用了？他就对我们整个应用进行全局的管理。能不能好打开它。它里面是不是我们最终看它，也就是说它的里面是APP组件吗？不是，是不是我们通过connect返回了一个组件，它取了一个特别名字啊，这个名字不用你管。它里面包含了谁？这一个非常关键。这个非常关键。现在我们看出来了，他是不是内部悄悄的给你传了三个属性进去了。

我有直接写吗？我连APP标签都没写。对不对，是他帮我去包装吧，就他内部是不是给你包装的啊，我们不包装过那个level level link吗？还记得不my level。知道不啊，OK，他包住了谁？APP。包装它是为了给他什么传属性数据对不对？只是说第一个是不是个一般属性，后面两个是什么函数属性能看懂，不是函数属性。那也就是说导致于我的这个APP本身它需要写redu代码吗？这不用啊。这然是不是觉得很干净，也就是说我真正污染的是不是就这一片呢？就这一片有依赖对不对？我依赖的位置越集中，是不是写成越方便？

那么呢？我一页的位置越集中，写着越方便。那这样的话里面还是以前的写法，就我需要接受什么就接受什么，对吧？啊OK，也就是说我以前我是不是APP里面有自己的状态。但由于我的状态，是不是被捞到redux里面去了，那也是在我的外面呗，是吧，在我外面我要我要这个数据，我该怎么做。是不是通过属性来传来接收？能不能，我现在除了接收这个，看的是不是还要接收一些更新的一些行为。是吧，那怎么办？你也通过属性来接收。但是我声明接收属性得有人来传吧。谁来帮我传呢，现在。是不是这个。是吧，这个万里穿，而且它有固定的套路啊，这个套路感特别强，说实话。说白了，你只要学会了一个，你其他的写法都一样的。

就现在这种写法，就比刚才我们前一个版本要轻松很多，因为这个套路很强的，就在这里写就行，其他的按一般写法就行。二但是你要看懂这两个。其实这两个还是这里面要说一些事情，有些事情要注意。这个名字能随便瞎写吗？能吗？不能，这个要跟谁一致啊，跟我这个APP里面声明的属性一致，这必然一致。没问题，没问题是吧，好，下面这个是关键的，这个好懂啊，这个其实是好懂一些，下面这个。下面首先这个名字这么写是不是相当于这么写的。对不对，对吧，好，那我问你这个要跟谁一致，跟谁一致。跟I线一致。

跟跟他意思。是吗？要跟他一样吗？是跟他一样吗？你你想啊，这个这个会作为我们这个AP的什么属性的属性名传力。那不懂，这是属性名，这是属性值。这个这个理解非常关键啊，因为它难一点。这个是属性名，那所以说属性名是不是要跟我这个声明的属性名要一致。能看到吧，那这一个了。这一个得跟action。生命的方法一致，实际上是action great，对不对？我前面我们说过，其实你要正确的写法，应该写的比较严谨，应该这么写。本来就是一个action嘛。能看到吧，但是啊，一般不会这么写，不会这么选一，就是因为这么写吧，到时候我写的时候我就麻烦一点，我觉得这里面必须写action create了。

懂吗？那多费劲呢？为什么不刚好名字一样多好啊。听懂吧，也就是说我的这个属性值是不是需要跟我的某一个action create要一致。看到吗？这样一致是不是写起来能编码简洁一些？其实不一致有关系吗？没有不一致，我能不能实现效果可以，但是编码就很难这么简洁。因为大家现在彤彤通通的，基本上能用ES6写的都用ES6写的，用ES6语法确实就是简洁一些。但是要想实现ES6简洁的语法写法，首先你在命名上面就要注意一下，懂吗？首先注意很简单，就定同样的名字。摁到吧，这样我就能省略右边的那个名称。

有人说他这个东西怎么做的那个函数，也就是说现在啊，现在我传给他的它的值是不是最后啊，是一个最后要调用一下PA。大家想想看啊，在我改造之前，我把它改造之前呢，给他看一下啊，这个挺有意思的，它其实就是有些模板代码它都能写，所以说你不要写，看这些，你看this.prop点这个点这个这都是固定的吧，这里面变化的是什么？他不就是他的这个名字吗？对吗？这个变化的是不是就它呀。是啊，OK。那想想看，你看我们改造以后呢，是不是就只需要指定这些名字就可以了。那好多东西都不用写了。那就爽很多了。这用了它明显我们的整个一个是编码简洁，再一个依赖性就耦合性更弱一些。

那我性弱一点肯定要好一点，你别强忍，耦合到处都写了那个他的代码，这样看起来就不太舒服。好。写完这个以后，我再来去介绍一下react干他的一个思想，思想上的东西。啊，这个react杠，它将所有的组件分为两大类。一类叫UI组件，一类叫容器组件。啊，UI组件啊，容器组件的区别在哪呢？非常简单，UI组件不使用redux API。能懂吧。而容器组件呢？需要使用Rex API。前面的这些可以都不用管啊，这个是非常关键的一个特性，再一个UI组件一般放在components下面。而容器组件一般放难了。

Contain，看名字你就知道contain什么容器。那其实我们这个地方呢，这个它是什么。什么邮件？什么组件，也就是说它这里面有用到redux API吗？没有，但是他返回的这个组件呢。就是利用那个相关的API生成的呀。对吧。所以我们最好把他们俩什么呢分隔开来做一个拆解。N到不好怎么拆，其实很简单，大家看到啊，先建再建一个文件夹，叫什么名字看啊ten是因为可能也会有多个是吧，好把这个名字改一改，这个名字叫这个名字不太合适了，因为我这个也就是说容器组件是包含了这个UI组件。这个名字稍微改改啊，这个名字改成什么呢？我改大家知道了，叫count。

这个计数系的一个组件，把这一个名字改成什么呢？看能不能看到啊，接着啊，我向外报的export就是看了。来想我是不是一个很纯洁的主页吧。有需要redux API吗？不需要好这一个部分。给我抽取到。这个组件里面来，你说我定一个什么名字。给你呗，是吧。能看到吧，OK，好，快点走力。好，这个时候我是不是需要引入一些东西啊。来引入什么，把这里面不要不要的东西都给它，哎，这里面怎么这么多名字相同的，把它关了。

这一个是吧，还有我们的这一个，看到这里面有些人他是不需要的，对不对。这一片。是不是搞过来这是我的吧，哎，不对呀，我现在改错位置了，好像现错位置了。应该先带src什么？是不是就在这里？他在哪个位置啊。一旦有多个，就容易犯这种错误啊，尽量真正写下面，就不会这样，好，我们来把它打开。就这个吧，好把它打开，我们打开它对应的写啊好。来这两个我不能引入了吧，不需要，我刚才说过了，我是一个非常纯洁的啊一个组件，大家回头再看我这个。你看有没有用到，很简单，你就看引入就行。很干净。对吧，而我这一个。

我这一个啊，大家看着我们说过了，任何组件都要引入一个东西，不管你用不用都要引入。懂不懂？好，接着引入了connect吧。引入了是不是这两个action。接着我去暴露了，是不是这个连接方法返回的东西，但是我要引入谁，不是引入APP，是引入什么看看。点点斜杠啊components下面的什么看看诶。我还没改名呢，我把别的是不是改了啊，那把这个得换过来，这个改了不行呢，就这一个是吧，这个不能改，这个我们没整的P是吧，改错位置了来应该改什么。给他。他叫什么看？

诶，那个里面是不是也还没。哎，这个了是吧，能看到吧，啊OK，我看一下这个有没有搞错啊，到时候别别坏了啊。就还好了是吧，嗯，好打家看啊，接着我来去干嘛。易怒。是不是就是包装水。Hunter。那也就是说我现在大家看到我啊，我现在就写了一个UI组件叫count的组件，它很干净。是吧，你一般的写法就行，唯一的跟以前的变化就是把状态变为了什么属性。是吧，把以前不是我有一个状态叫count吗？最先写的时候对吧，因为因为以前我没用大之前是不是我自己管理状态啊。但现在状态交给谁了？效果吧，那我这个组件就只能什么通过属性是不是来接收数据了。

就这一个是啊，唯一变化的就它了。它是新增的一个概念，叫容器组件，很简单，就是你一旦用上的API。那你就是个容器组件，而且一般容器组件会包含一个什么。是不是UI组件包装它嘛。能看到吧，嗯。那最后我这一个引入还是引入APP吧，只是我这个引入不对。不是看下面的是什么，Contain下面的。对吧，啊，你那你说我的其他代码需要动吗。不需要动。这就好了，不需要动。陈总吧，啊，OK，我现在论的都是对的啊，没有任何的问题，我们来看一下，看看我们现在的。

是不是可以了。刷牙。记着啊写的三吗加。可以吧？可以，诶这个也可以加，诶不能加对吧，一五。OK。那啊，OK。那用上这个结构以后呢，其实我们的编码啊，就会更清晰一些。有专门的啊UI组件，有专门的容器组件。这样写法比较好一些。最后我们要说一下啊，我们这个大的代码会非常的固定。就这么四个文件，你不管三加二，你要用，先把这四个文件给我创建出来。认了吧，啊，记得就是分别去写里面的东西，这个里面很简单，这是最简单的，就写一些常量。有几个，就看你对状态有哪些操作。是吧，无非也就正常改查嘛。

对吧，好，再一个就是啊，Actions。这些其实用来是生成什么呢？是不是生成X对象的一些函数啊，这个写法不会非常复杂吧，这里面应该没什么业务啊，没什么业务。OK，主要就是返回一个我们的action对象。那后面我们要说一个东西叫异步的action啊，到时候就会麻烦一点。其实主要的事情在这里面做，说实话对吧，因为这里面我们是不是要涉及到根据原来的老的状态，根据这个action去返回生成计算产生一个什么新的状态。你说老师这个很简单，主要是我们现在做的事情很简单。它不就是这个数值加一减一加几减几对吧，所以说我们现在做的事情很简单，而且我们这个数据本身也没什么结构，就是一个简单的数值。所以看起来并不难啊，这个速度是固定的。看到吧，多其实是固定的一些一个写法。

啊，后面我们会写的更加复杂一点，到时候再说啊，OK。嗯。那现在相当于我们就用上了啊杠。啊，这里面各位来看一下它里面啊的提供了几个东西，再一个呢，是我们那个最外层的一个组件是吧？Provide，它是个全局的管理者。他要接受一个什么？十多十多我们有吧，有这这个其实很关键。啊，这个是干嘛呢？是将我们的组件跟redux什么关联连接起来。它是不是产生一个连接组件了。而这个连接组件其实是为了向这一个UI组件里面去传递属性。对不对，传递哪些属性怎么指定呢？是不是它呀。能不懂啊，这两个是不是用来产生那个属性的，才能只是说这两个啊，一个叫map state to pro。

什么意思？映射状态成为什么？说白了，将状态映射成什么属性？就是我读的是状态里面的数据吧，最终传递的是不是我当前组件的一个属性，其实名字取的挺好的，它是个什么类型？这个参数什么类型？不是对象，它是个函数。看一下这个没关系，记不住没关系啊。它是个函数，函数返回的四个对象。你不能直接写对象，因为因为主要是什么，我要去从这个里面读数据，所以没法写成一个对象。听懂吗？这是回调函数。他会去传类的，你要给个对象，他没法给你传东西。主要是这一点啊，下面的这一个啊，下面这个叫mappa to pro。

首先要知道这个参数什么类型。它真是对象对吧，他是对象。那这个对象里面包含的是一些什么呢？包含的是一些方法吧，哪里的方法从哪得到的方法？从哪个模块里得到的方法？是吧，啊，Actions。OK，其实最终啊，它会转换成一个对于dispatch的调用的一个函数。因为这个是固定的，所以说它不需要你去写了，咱以前不自己写吧，那自己写多麻烦是多少点，你派对吧。太费劲啊，你穿一个X就可以了。啊，我就轻松给你搞定。啊，是你做的事情越来越少，你是你需要啊，去写的东西也越来越少。啊，OK，这个刚才已经说过了啊。啊，后面呢，是一个基本的使用，有很多不变的，基本上我们那些模块是不是都没有变的，都没有动啊，动的是后面的一些东西啊看。

好，其实这里面呢，它也有一些他的问题啊，但这个呢，我们先不管它。