39_尚硅谷_redux_counter应用_redux版本.avi原创

小菜什么的。呃，下面呢，我们真的要进入啊主题。来啊，我把这个，我把这个看成十，看成为备份一个。啊，写成react啊，再写啊，大家看到这是can'应用。到时候我们会不断的去，这是一吧，第一个。啊，到时候有二有三有四啊，这用写的。下面真的要用redu，那想想看要用redu，首先你想想看要干嘛呀，这不下载依赖包吗？那这个依赖包很正常，就是re。对吧，来下载一下。M PM in多杆。

好，等到下载过程中，我先就简单的介绍一下它的一些核心的语法。大概说一下。它这个re呢，给我提供了一个这样一个函数叫create。多诶，你看这个，你说的这个函数返回值是什么。十多对象啊，看名字你都知道，那为什么有十多对象啊？看着这个图啊。是不是需要一个状态管理对象，存储对象啊，就叫十多对象，这个最核心的一个对象。能看到不啊，OK，我们刚刚说过了，它有一个方法叫什么。Dispatch，看着吧。OK，好，它还能够跟那个reduce函数是不是进行交互啊，啊，最后它是不是还能去向外返回。Stay stay，对象就撞了对象嘛，对不对啊，这些大家都懂，那这语法就好懂一些。

啊，里面呢，具体的我就不再去看，我们等会写的时候再说这个十多性啊，下面介绍一下十多对象。他就是redu最核心的管理对象，那他管理的什么东西呢？他管理的两个东西。一个状态，一个就是我们那个。Reducer reducer很有用啊，是根据老的状态产生一个什么新的状态的一个函数。那也就是说，我要想更新状态，必然会调用这个函数啊。只是说我不是直接调，是他帮我调啊，你看这方法名，其实你看你就懂。干嘛去？获取状态显示对吧，这个呢。是不是分发事件相当于？那么呢？风发事件最终触发水调用。看。啊，大家如果不懂的就看图啊，其实看图就能，嗯，看懂一些东西，你说我去调用这个dispa触发水调。

出完水就用。他。Reduce水调用说吧，我放状态是不是为了更新状态去的，更新状态得产生一个新的状态吧？是不是这意思啊，我这个地方，我刚才说这不是一个套路吗。要路线吗？我一旦分发action，这里面我们可以把它叫成是分发action action什么意思？Action大家知道什么意义吗？就是一个行动，一个行为。只是一个更新的行为，懂不懂啊，OK。好来往下看啊。好，它除了一个分发，它其实还有一个。减少了。订阅啊，是不是有点像消息订阅与发布机制啊，这个有点像发布。听懂吧，说白了，我在一分发，最终的最终就会导致于这个回流函数六五。

你不订阅了吗？订阅监听能不能看到啊？OK，这个回答是用来干嘛呢？用来更新组件，重新渲染组件。重新渲染组页，因为这个方向调，我说了是不是会产生那个新的状态，新的状态产生了，要不要对我们的组件进行重绘啊。要吧。肯定要啊，不要的话，那那那怎么显示一个新的状态呢。他其实是有套路的啊，只是这个套路有点深而已。后面的这几个啊，先不用管它，这个有点小太多，那后面的这个先暂时不管，用到的时候慢慢再说啊。那它这个里面呢啊，它这个里面有几个核心概念。啊，先大概看一下啊，啊，能懂多少是多少，其实这个action大家能懂。啊，这个action代表代表一个行为，你到底是增加还是删除还是修改的一个行为，这个里面包含两个方面的属性，它是个对象啊，它是个对象，它包含两个方面，一个什么呢？Type，你看它是一个固定的一个，呃，一些字符串。

我会把它们定义成常量的，其实这个我不不想写成这个，我以后统一风格都叫什么呢？对，都叫data塔，无论你是是一个number类型呢，还是个对象类型，还是数据类型，我都叫date，在有什么好处，就是统一取数据的时候都点date。能懂吧，啊，这样能风格统一一点。好，那除了他。它有一个对应的什么呢？叫action crater什么意思？这是干嘛的？是什么东西啊？创建X型的什么呢？工厂函数。能懂吗？这是不是一个函数？

是吧，右边是一个箭头函数，箭头函数就是个逆逆函数嘛，接着我给它取了一个名字嘛。你看变化的是什么？Number，这个number啊，这个number实际上是会交给谁，交给应该这么写。看不懂。啊，最终大家看它这里面很有意思，我返回的是个小括框，一个大框，为什么这么写，对返回的是一个对象，是个X型对象啊，但是呢，你又不能不写这个小括括号。为什么？如果我不写小括号，这一个大括，括号就不会作为对象的标识了，而是作为什么函数体的标识。那么那样就不太方便了。听懂不好，这说的是action，有个基姆尼解，下面一个reducer，其实reduce好懂，它就是根据脑的state和你提交的什么action来去产生一个新的什么是state，哎，这个里面会涉及到一个概念叫纯函数，后面再慢慢说，先不用管它啊，你说函数还有纯不纯吗？

有啊，有的函数就是很纯洁的，有的函数就不纯洁啊，OK啊，什么叫纯洁的函数，什么叫不纯洁的函数？到时候再说。啊，后面呢，就有一种写法，为什么会有Switch case了。大家知道我们的type值是不是有可能有增加，有可能有减少，对吧，能看到吧，只是这个里面我们不应该用number了。我们应该用什么固定的date？啊，这个对于复杂的那个应用，这种搞法就能有优势。其实如果是一个简单的，那取number其实更好一点，听懂不啊OK。就能看懂吧，大概应该能懂，就是根据老的状态，最后return的都是一个什么。

新的状态。能看到吧，啊OK。好。这里面要注意一个事情，返回的是一个什么新的状态，这里面说一个事情，不要修改原来状态，哎，记得这其实是它的特性。我们不能改变原来状态，懂不懂我们每一次都是sad state。你改变以前状态有用吗？没用，你也不应该改变以前状态。这里要说个事啊，大家想我们说过那个虚拟多M在更新的时候，是不是有一个动数的对比呀？脑数和新数的对比对吗？你以前的状态需要改吗？不需要，你不能改变以前的状态，你要产生一个新的状态，最终形成一个新的动数，两个人进行什么对比，这要对比的，你不能改变以前的。啊，OK，这个要注意啊。好，最后就有一个什么，刚才说过了，多少的想。啊，这个对象呢，是将state将将reducer联系在一起的一个管理对象。

啊，怎么样得到这个对象？还记得不啊，它有一个create store。有这样一个函数，你能看它传什么啊，大家看一下啊，接受什么。接受reducer，说白了我这个reducer是不是相当于后面是不是在这个对象内部管理着。我们说十多对象，除了管理谁丢失还管理谁。管理的最终作用呢？并不是，它其实是什么state，它重点是管理state，但是没有它行吗？不行，因为它是帮我产生新的state的一个函数。你想要，没有他，我就产生不了新的state了。大概能懂吧，啊OK啊，它有一些这么一些功能，刚才看过了啊嗯，好，大概介绍以后呢，我们就要去开始去工作了啊，去写东西啊。

来，那下面就是要去改造我们的这个这个应用呗，是吧，改造我们这个应用好。IR。要去写它，首先第一步，我们刚才是不是已经下载了呀，下载以后上面去写啊，因为刚才我们是先介绍一下它的语法。要想用上是不是要必须要产生一个什么对象啊，多对象是吧，那产生个store对象多不有get state啊，什么pach action是不是这样一些方法呀啊去操作。好吧，来啊，先从redux里面引入一个东西，引入一个用来创建下的一个函数，先不行啊，先把这个写好。再去写里面的，因为这样有提示。这是一个背，你背那背景是。看到吗？嗯。

好，那也就是说我们在这里面一上来就要去什么啊，是不是生成一个是不是多对象啊，石头对象，把这个先搞好再说。好，来吧，看定义那个名称嘛，等于。啊，Create嘛，是不是一个函数嘛，好，他要接收一个什么。是不是要接收一个呀。那那就是我定好了吗？没有，那我现在大家看到我，我为了能够去更好的去写代码，我这里专门来创建一个文件夹叫redux。也就是什么意思呢？所有关于相关的一些东西，我尽量写在这个文件夹里面。听到不好，那我在这里面呢，先要创建的第一个模块就是reducer模块，而且reduce为什么死了，有可能有多个，因为我可能有很多个状态吧，那抄到不同状态有不同的函数。

这个每一个reducer是一个函数。这个能不懂，而这一个S就代表我可以用什么多个reduce函数。当然，我现在只有一个，能懂吗？一个你也先写，把这个写成S。好，那也就是说来啊，这是一个什么啊，包含N个reduce函数的模块。懂不懂啊，OK，好，那我们就去定义一个啊，Reducer。来port这一次啊，我不写default了。啊，我取个名字叫count计数器的吗？

可以吧？那为什么我不写default啊？因为大家知道一个模块里面只有一个default。这个就是为什么你看我刚才说过，我可能是不是有多个啊，工厂就是这样的函数啊，那我可能是不是还有一个别的一个，其实也就是说我这么写的，我整个模块是个什么类型。对象，而对象里面是不是有两个这样的方法？这个能懂吧，因为你看嘛，我是包含N个reducer函数的模块，说明它是个对象嘛。那现在就应该用export。能不能看懂啊，这样我每暴露一个不同的，暴露不同的函数吗？当然我现在只有什么一个一个，也尽量这么写，别写结破了。看完了，好，这个函数它接受的参数是固定的。第一个，第二个。

能看到吧。好。我们在这里面最终是不是都要去return了一个新的状态，对不对。好，这个里面我要先想一想，我们的action里面是不是有type有date呀。你说一下type，我们有几个type？怎么想这个要想啊，有几个太说白了，我们有了一些操作。我们对于我们刚才那个刚才那个应用来说，有几种对于状态的操作不，其实就两种，其实就两种。因为后面两个啊，一个是带条件的增加，就满足条件才增加，那它也最终是增加呀，对不，后面一个异步的增加，最终也增加。那不懂，对于状态来说，其实他就两个操作。两个操作是不是对应两个type值？那大家看着我，那我要分别来判断吧，也就是说我这一上来啊，我先写个打印输出来看一下啊，这一个到时候能够有用啊，这一个是对的，以及这个安全都打印出，到时候可以看了。

好，我就上面来一个什么呢？Switch Switch随是Switch吗？不是吧？点太，因为不同的type做的事情不一样。懂不懂？当然你也可以用if else用能用Switch的肯定能用if else能懂吗？好，我一共有篇文章当case case是什么呢？我设计一下我这个type是不是有增加或者减少，标志名称都什么类型？串嘛，真的不好来。看着啊，我就写一个写一个，来一个increment，我故意用大写。认不啊，我故意用大写记的冒号里面是不是要return？一个新的状态好，这里面要说我们状态的初始值是多少。

是不是你们呢？能不懂就你吧，大概呢，我怎么样指定初始值啊，是这么写的。等于零，这是叫什么语法？叫行参默认值。能不懂啊，行差默认值啊，OK，哎哎，写在这里啊，不好意思，应该写在这上面，看错位置了。这是打印输出是吧。这里面就有一个事情，有一个一个Switch里面是不是有个default呀，返回的是什么。是对的，也要最先，它会第一次调用，不会传任何X。那此时返回的是几？返回的是零吗？那如果我是in这个action type是了。那我是不是要在原来的状态值的基础上加上一个值，那我加几了？

加几啊对，X等于。看到吧，数据是在action里面嘛，我们说统一的名称，哎，这样是不是挺好的。好，那除了增加是不是还有什么减少，是不是写什么。看到吧，好，这个我这个唯一要改的就减号。对吧，好，这两个这两个字符串啊，我别的模块到时候也要用到，你说我该怎么办？假设我假设这两个名称，这两个串，我别的文件到时候也要用到，你说我怎么样能避免写错呀。

就是我另外假设我这个模块里面也会引用到，也会用到这个这个字符串名称。那该怎么办呢？那怎么样去避免写错了，这是一些不变化的值吧，常量值对不对，怎么办呢？看到我。我会专门去建一个东啊，建一个模块。叫他一个名字，其实他一看就能懂。啊，OK，我再写写，大家就更懂了，Export。我先写上，看看大家能不能，哎，我是不是把这些常量字符串定义在这里啊，就是将X类型的常量字符串啊包含。所有啊，Action type的type的是吧，产量是不是。

能不懂啊，那我这边用的话不就这么写是什么呢？诺啊import打括号from点斜杠。Acting这里面是不是有两个呀？Increment。The。那我这里呢？能看到不啊，OK，这样是不是避免写错了，就大家都用这样的名称来引用，那自然不会写错了。有人说老师他的名称引用错了吗？那我就救不了他了。明白吧，啊OK，这是其实是种通用的办法啊，就是有一些常量在用的时候，尽量定义成一些单独的一些模块里面定义，这样比较好。那也就是说我们整个re代码是不是又多了一个模块，后面我们会说啊，这整个文件里面有四个模块。

固定的啊，固定的。其实他他的一个他的文档里面设计不是这么设计的，但是我觉得他那种设计会让初学者特别费劲，所以我就改一改。好，那这个搞好以后，下面还没到，想了半天，我这边是不是需要一个reducer。我这有没有。这不就是他吗？对吧，这就我们的法，那我怎么引入这一步很关键，我要引入这个也就是函数。来看到啊在下面，因为这是自定义的模块是吧，Import啊，我先不写from点。写杠redu下面的reduce，但我在里面写什么呢？是写reduce吗？我现在也是论没问题，但是我现在需要的是什么，是不是需要的是它，其实我就一个对不对。

那怎么办呢？应该是解构吧，这个对象里面。是他。能看到吧，那也就是说我现在传什么。那就穿他呀。到时候这个store是不是就能关联上这个。这个能找吧。啊，OK，好。来啊，我们这个时候我先写一个打印输出，我们来看一下，这个是多对象啊，看一下先别着急啊，先别着急，我们先看一下，因为这个流程有点长啊，先看一下现有的现象，其实结果还是跟以前一样的吧，因为这个我还没改了，这个组件都没改你显示的。东西跟以前是一样的，诶换一个事情。那个reduce函数是不是调用了一次？是吧，那个是等于多少。

零对吧，F型呢，里面是一个什么，只有type，而且你来看这一个应该是它自动掉的吧，你说什么时候掉的大。肯定是在这呀，那没有别的地方了。你想啊，此时我一打印是不是就已经掉了，在我打印之前它就掉了，说明在这也就是说你想啊，我这个十多对象是用来管理状态的，他上来是不是要得到一个初始状态。靠谁得到？要用谁去得到？调用这个reducer呀。是不是，而且它传的action是不是比较特别啊，它传的action是不是type等于一个这样的一个字符传就不用背啊，你再看到这个你就知道了。初始化对吧，OK，也就是说，哎，我来写个注释。内部。

会第一次调用什么函数，能不懂得到什么初始。State。对不对？而初始的值是多少零。没问题吧？啊，这个应该是这个挺关键的啊，现在有知道，也就是说这个多对象里面是不是已经保存了一个state，而且它也关联着我们的这个reducer对不对，好。下面啊，我们的这个APP啊，下面就要改造我们的APP了。这个还能要吗？因为现在状态交给谁管理了，交给管理了。对吧，但是呢，我们需不需要状态。需要，而且啊，而且这个我们还能做吗？不能我们这样做不行啊，因为我没有状态了，也就是说更新状态的操作应该是不是交给外部去做，最终应该交给去做对不对。

这个能懂吧，啊这该怎么办呢？那也就是说我需要是不是两个更新那个状态的方法。记住啊，OK，我需要他们，那怎么办呢？这个地方我这样看着我。我把这个度。给了什么？穿过去。因为他可以做他所需要的所有的事情，我给你传过去。能不懂啊，我就把这个度传过去好了，那AP这边是不是就接收了这个度啊，其实多看到所有事情他都能做了。啊，都能做这个该怎么去怎么去做了看看啊。

那下面呢，我们这个地方啊，这个里看一下，我们先看一下这个怎么样得到状态吧。就是这个，我是不是得到抗。怎么得？来啊，我的pro里面是不是有那个什么度，有吧，有它有一个什么方法能得到它里面的状态呀？啊，好像刚才咱看过石头对象。Get，而当前的state是不是就是count值啊？是吧，因为我们这里面设计这个SP就是count值嘛，就是零嘛，开始。是不是是的，好，那我很简单了，Get什么state。看没看懂。啊，这样我看了是不得的。还缺什么？还缺一些东西，就是几个更新状态的一些操作是吧，好。

来，我们把它这个不能用了吧，不能用了。下面。啊，这个也不对了吧。这个这个要吗。这个标因为没有没有state了，对不对，看到吗？啊，我这个没了，那所以他也不能要了啊，把他们都删了吧。那也就是说我们需要去调用store的什么方法去更新状态，对不对啊调用啊store的方法更新什么状态，因为状态在他身上嘛。是不是这意思？能看到吧，好，来吧。怎么办？得做点事情啊，对不对啊，我来看一下这个上面。我们如何来出发，更新的过程我就怕嘛。

是不是啊，就他好了，来吧。现在写this.props.this。第一次派是不是需要有什么，是不是需要一个对象啊，我们先写着接着了。Type值是多少的问题。对不对。看到不，那我们怎么办？是不是要引入那几个常量啊，我们去引入一下呗，Import from。啊，点斜杠re，诶点点吧，应该出去一下，Re下面的什么action好，这不有两个吗？还有什么D。是这样的吧，好，我这个呢写什么，现在我是不是要携带数据过去写什么。

值是多少？Number好懂吧，好了，那下面的是什么？是不是类似的？大家看到啊，下面啊搞法跟这个一样的。这个不要了吧，只是我们这里传的标识不一样了，是。没问题是吧，好下面这个。再一个关键是这个要先是不是得到，得到这个count值，我能不能得到，能，但是不能这么得，对吧，那点pro点什么get state。看到吧，啊OK，不用点了吧，这已经是count这边。

有没有看懂，那接着后面判断，判断完以后，哎，这个不能这么做。其实这个事情咱做过了，已经。对吧，也就是说我们现在是不是要调用store的方法去更新状态，只是我们现在是不是要去增加。把这个整个什么拿过来是不是就可以了。对不对啊，OK。好，下面这一个了，不类似的嘛。这个就这一项。呃，这个还要吗？啊，这不要了吧，这不用了呀。看到吧，这没必要了，要它没用啊。我直接指定number就可以了。我只要，我要，我需要看到吗？不需要。Come on。啊，OK，好。

那这些事情我们都搞好以后，我们现在来看一看，看看现在行不行是吧，也不知道了，你你得看到底行还是不行啊，得看一看。来吧，试一下。这是我当前的吧，诶显示。没看见东西啊。能看到吧，肯定多少啊，是不是没有值好那没有是this.pro.store.get state这里面我是不是指定一看呢？咋办？没纸没没报错啊姐。怎么办？一个这是下面这调试怎么样调对不对啊，最好的办法在这里写一个什么第bug比那个打印要好调节。这个能懂吗？啊OK。过来了吗？Can是什么？Undein？

能看到吧，啊，Count是安半的，那也就是说现在我没有得到一个正确的值。对不对。能看到吧，好，那现在啊，我们来看一下我们的这个index，我这里面不有一个吗？那现在我可以这样。我在外面去干嘛去？就就是很简单，Get什么state。能看到吧，我看一下，我得我得看一下，这很正常的吧，对不对，好来试一下呗。刷一下先。啊，走一把。有没有有啊，是不是你。对吧，好，那而我现在啊，而我现在，我现在不把十多传过去了吗？传了吧。

传了一个，大家看到我就传了这个石头对象过去了，对不对啊，而我的AP啊，就会接收这个什么。啊，接触它呀，看到我这个render里面啊，this.props点度点get什么state。哎，这一个不能再写这个啦，你本来就是数值，你还写大括号，那不得到是例的吗？因为我刚才是结构。这其实就告诉你怎么去调啊，你不调的话，你是很难去看问来，首先我要确定这数据到底走不走，有没有对不对，打一他有，但我这么又不对，那说明我这语法有问题啊。能不能好，那把这个第8UG给他什么做了。或者删掉游戏。有没有了，有了，那有了之后啊，有了之后我们来看一下，我们接着是不是点加减呢，点加。

再点价什么个意思？大家看着这个，看着这个意思啊，就是我是不是掉了呀。是不是掉了，大家看一下。这不能不是迟钝，没有更新界面。状态其实产生了。你来看一下，我们其实还有一个方法没用，还有一个方法没用，也就是说状态更新了，我们知道我们没有去管，对不对，我们刚刚说过一次，状态更新了，我得干嘛去啊，不是监听，监听要提前加上监听是为了什么？为了能够在我去状态更新的时候，我能够去重绘我的那个主见嘛，对吧。等一下啊，好来，我们来写一下，把这个写完啊，写一下啊叫石头点。

Re。对吧，它是不是要指定一个函数啊。是不是方干嘛。干嘛去？是不是这意思，我在这函数里面重重复一下。看着吧。这不就是重绘这个组件吗？你不重绘，那怎么能得到新的，你一重绘那个就可以从十多里面是不是取到新的状态。其实多里面是不是有新的状态了，因为那个函数调用了嘛，Reduce函数看懂吗？但这样是不是有点重复啊，怎么办？啊，把这个定义一个啊，人的函数。看懂了吧？接着我直接在这里面传什么render，按这样行吗？有一个问题，初始化渲染要做。

啊，初始化渲染对吧。而这一个是不是绑定啊，这个叫什么呢？啊，订阅监听，订阅监听实现什么啊。啊，真心实现啊，最终我的目标实现，就状态啊，就湿度中的什么状态变化了就会什么。啊，自动调用啊，对不啊，自动调用干嘛去了，进行重绘。这个能不能懂，这应该能懂的。看到吗？好啦，来吧。看看啊，改成三走你。好了呀，对吧，OK。嗯，可以可以，那这样看他行不行。

行是吧，这样呢不行，因为有限制对吧，这个点一下过一位增加啊好了。啊，就这样子。啊，但是现在的说实话啊，用上呢，有些大事比没用复杂很多，为什么呢？因为他不管你复杂还是简单，那个套路都要写一遍。听懂吗？对于简单应用来说，这个套路就是个负担。那么呢？但是对于复杂应用来说，它就有好地方了。因为他的套路是固定的，这样都按照一个套路写。无论多复杂，都按照一个套路，那写下肯定轻松啊，你因为一个套路你只要写上五遍，那基本上你就闭着眼都能写。啊，但是难在写第一遍的时候比较费劲。太费劲了是吧，OK好行，这个呢，我们先讲到这。