120_尚硅谷_React全栈项目_使用redux管理头部标题

我们来看一下，我们刚才说过，我们现在是不是有两个数据需要管理。一个是开头，一个是我的user者，是不是这个比较简单一些？这个不用发请求，比较简单，涉及到就两个组件，一个是左侧的把关了啊，左侧的以及上面的这个是吧，以及上面这个好了，来我们来去做一下。做一下。先来打开啊，打开我们涉及到的两个组件。一个是ni的。还有一个。嗯，搜了半天他搜不到。啊，一个是我的汉代。我们刚才说过啊，我们需要在这个level level里面去指定，我确定我当前的要显示的标题吧。

那说明他是不是要去在level里面去更新我的状态。打开我的，也就是说最好我的这个里面应该是不是有一个设置当前汉字开头的一个。分支对不对，一个处理这能听懂不，那其实就要说我们要想去更新它这个数据，更新这个他的数据，必须要去写一个对应的什么呢？Action，以及相关的action type。先写好来，比如说我来先写一个port啊，我来一个reduce啊，来一个action，叫什么名字呢？看名字。看名字你就叫hand，我就记了你写了hand title said hand title什么意思？是不是去设置我们当前头部的标题的一个action，是不他反他是个同班是什么。

来写一下注释叫设置啊，同步标题的同步action，当然是action create啊，我们当然我们交流是action返回的一个什么型。是不是应该用对象，而对象必须有什么属性？Type属性，它是不是应该是个常量名称值？啊，我随便先写个啊，接着需要传递一个要显示的数据吧，要指定的数据，也就是说我肯定要去给他指定个什么hand拍新的是吧。只是用什么名字来携带问题，我现在先用一个date来携带可以吧？只是我们的这个值得单独定义在哪个模块里面去。

这个你们来吧。能不能听懂，好，那这个名字叫什么名字呢。我就叫他sat。那hand什么呢？Title？因为这名之意嘛，当然这个名字一般是大写是吧，只可以写成什么呢，小写的。这一看名字就知道是去干嘛去了，标识设置头部什么标题的。这能听到不啊，这是他。整的好了，那有了这个以后，我在这边就没有必要自己再写了，给它什么引入点斜杠。Tips。找哪个了？Setup。还没开头，这个能不懂。好，那这个时候我这个是不是就用这个值。

能看到我有了这么一个。好，我最终是不是我的这一个case来，我怎么样去更新呢？我的在reduce里面也写好看好了，同理我得去引入另外一个东西，什么东西了，就是我刚才从太里面引入的蓉谁。啊，我们点斜杠太过四找到谁了？我们是不是有一个设置头部标题。那我在这一个里面是不是要针对他进行一个处理。实际上要加一个什么，加一个kiss。K是多少呢？那不就他吗？是不，那我要离开一个哪个值呢，设置了，也就是说我当前管理值本来是不是首页要变成一个什么值呢。

那个最新的值是不是已经。存在着我当前的什么？I型的data里面吧。那你说干嘛去？其实很简单，因为我这个数据太简单了。是不是直接返回就行，我需要去管以前是什么，值吗？完全不需要吧，因为我一个新的值就把新的值覆盖掉嘛。啊，那这样的话，我的这个准备工作啊，大家看看我的这个准备工作就做好了，就差我在这一个Mac level里面去调用它，去分发它了。我们在组件里面要去实现一个分发，我得怎么做啊。是不是要PA最终要去处理是不是，那我们在汉的里面该干嘛呢？汉人里面最简单。是不是只要去读就行，我们先做汉的，因为汉的好做，也就是说我以前怎么显示头部标题的，大家看一下啊，看一下我们以前怎么显示头部标题的。

我们在这里面在认的时候，是不是去有专门调用一个方法来去便利查找，搞了很多事情对不对。太烦了吧？是不没必要。现在我是不是就要想办法从里面去读出这个状态值就可以，那这个时候。我们这一个。是一个，本身是个UI组件，但是我们现在是不是又需要跟进行通信了。那就要包装它生成对应的什么容器主页。那么听到要包装它生成对应容器组件，那前面我们是要把那个UI组件跟容器组件。分开写的呀。这不是UI组件吗？

这不是容器组件吗？一旦UI组件需要跟容器组件通信，那就包装生成对应的容器组件，听懂不？那这一次我们为了方便起见。为了方便编码的方便，我是这么做。看好了我就直接。在这里面来包生成对应的容器组件，什么意思？看好了。这一个啊，这个是他是不是先用那个先包了一层是吧，看好了。我们要想包装生成容器组件，得引入哪个函数connect对不对？那我直接写connect从哪里引入呢？React，杠什么？能不能听到？也就是说啊，我这里啊，再强调一点啊，我是为了编码方便，我就这么做一下，怎么做一下呢。这个报的是这个组，本来这个组件吧，是这个组件，好啦，我在外面。

啊，直接写吧，来看好了。看他懂不懂。把这个UI组件给他什么？塞进去，那现在我的这个整体暴露组件还是UI组件吗？不是吧，是个容器组件的吧，器组件内部是不是会去渲染UI组件，当然这个UI组件也被包了一层是不是？能看到不这个不包成了路由组件吗？本来它是一个非路由组件的，对不对？好，那这个时候我是不是要给他传递一些东西。是要传递一般属性还是函数属性？一般属性是让他去做显示的，对不对，函数属性是用来更新的。我这个焊的需要更新吗？需要去更新状态吗？不需要，需要的是显示这个名字对不对。

这能听到不好，那所以说我需要写它，我们说这里面有物理格式的写好。不管他需不需要，我都给他干好，可不可以？可以吧，那现在就要确定我们是不是要去，需要有一个。一般属性要传递过去是不是，那我需要先读的是哪个数据？读的是不是我们的这个hand的title数据。读的就是他吧。是不，所以我这边怎么写呢，名字叫什么。喊来，直接这样写就得了。接着是对的点什么。能不能听到？那这样就说我的hand是不是接收这样一个属性。他会，他实际上啊，是先传递给他。这包装不生成了一个新的组件吗？

这样一个组件他也不用。他又会传给我们的hand。能懂吧，那我看的最终是不是接受了一个汉的开头的一个属性。那你说我现在只需要干嘛去啊？当然说的做的好一点，是不是先申明一下。OK，不沉迷。这个不设零也没什么太大关系，为什么呢？因为都写在一个文件里面，这就是说为什么要写成一个文件，这样方便。一个手创建个页码。我不用在创建一个那个容器组件的文件了，我直接在这里包的。啊，另外一个我也。基本上可以不用生命，因为很明确，我这里写的很清楚。是不是传了一个属性过去了。名字叫他，是不是有人说万一他不懂这个语法呢？那要不懂这个语法，你猜了他还是不懂。能懂吧，啊好，当然你稍微做的严格一点，你就应该是单独来写啊，我们这里面就简洁一点写得了啊好。

好了啊，来，下面就说我这边要想显示无比简单。不要再去。调用什么方法了。以前是这么搞的，是不是现在换一种方式？我现在是不是接受了一个的title的属性，你说我怎么做呀。你说是不是？这个懂不懂？那现在也就是说我应该能够。显示首页了。是不是，但是它会变吗？他不会变。能听懂不，它不会变，那也就是说我点击它的时候，点击这个左侧菜单项的时候，它得变码。是不是那点击菜单项，我是去告诉你组渐变吗？不是。我是去更新我里面的什么状态数据，那它自动就会发生什么变化。

能听懂不？那现在我是不是在点击某一个菜单项的时候，是不是要去设置我新的状态数据。尊重不，那这个时候就要说一个事情了，来，看着回到我们的来。那现在我得知道他点了，是不是要想知道它点呢，也并不是什么难事，因为这里面是不是有一个。这个是我那个菜单下吧。实际上就它是不是。这能看到吧，我实际上是这么做的，看看大家懂不懂。我在这里面加一个什么呢。可是我点的开。点开以后我要干嘛去啊，最终是不是要去更新reduction里面的状态。那最终是不是要去分发X码？

对不，那最终我们是不是要找到他呀？要想去更新状态，写的代码也很固定，看好了我把它写一遍。也需要去包装它生成对应的什么呢？容器组件也是，无论你是要去读数据还是要更新数据，你都要去包装生成对应的什么。容器组件。来写一下。写多了，写多几遍你就有感觉了啊，Import。还是那个谁connect from，谁react什么，由于我们要更新，那必然是不要使用到action。所以我需要干嘛去引入我们的某一个ACTION3ACTION create来点点斜杠，点点斜杠我们下面的什么action，当找到我们当前设置头部标题的action。

是吧，好，接着我们现在是不是要包装我们的UI组件，生成容器组件了？啊，又是一个套路，说实话这东西吧，你就写多了就觉得也无趣。那没办法呀，要挣钱要养家是吧，要糊口。好。来这个是吧，我们刚刚说过这两个参数是不是固定的。来姐，小括号大括逗号，再来个大。能听懂，不，不管怎么着，先把这个结构摆起来。那你还有难度啊，接着我们要说，我们是不是要更新，需要传的是把这一个s create是放到这个。

再往里面。那最终就会向我的level传递一个这个名字的函数属性吗？是不，我们一调用它对应的函数，是不是就会去更新状态？咱前面不做了好几遍了吗？对吧，好来。什么时候做？点击回调，是不是有一个对应的回调函数，是不是，那我去调谁去this点。Set title是吧？传什么职啊？太简单了。对不对。明白领导。这个这个这一点击是不是就会把最新我当前的这个title存到我的大里面去。

是不存到十多里面。这怎么弄？那一旦状态发生了变化，那我的汉的主见就为什么更新显示为什么，因为你读了这个汉的态度。是不是因为你读了它？这能懂吗？啊，其实就这么几个东西，两个组件，一个一个是更新的，一个是读的，再一个是我们的。是吧，那我的这个读的这边是不是要读取它显示要读，你是不是要包装生成容器组件。你要去更新，也要包装生成什么容器组件。就这么一点事。啊，大家要先把套路搞清楚以后多写一写啊，我们后面马上就会去写它的源码啊，当然是写简洁版，不可能写真实的版本。

啊，那个时候大家会对他的实现呢，更加清楚一些，好来看好了。我们这边啊，最终是要去更新，那刚才已经掉了，我们现在来看一下，看一下行不行啊，就这两个组件连上我们的action以及reduce。就这就这四个结构来看一下，先看下结果。呃，先从首页开始啊，先从首页开始。首页，现在我点击。可不可以？是不在。没问题吧？但是还有一些情况。大家看好。我一刷新。他为什么守夜啊？这是不是读的初始值？是不这是我的错装，是不是首页啊，但是我现在是在首页上吗？不是啊，我是在商品管理这里对不对。

是不是得看我选中的是哪一个呀。这能听懂不？这个地方就要去说一个事情啊，说一个事什么事情呢。来看好了，实际上在这边啊，在我们初始的时候。就要去确定我当前选择的谁，其实吧，就在哪里做了，看好了，我其实最终是在这里做的，在我去我没有必要自己再去找啊，在下面，如果我在下面做的话，那我自己去编辑查找。这太麻烦了。我其实在哪做的，在郑州的，你看一下。这一个。大家注意观察啊，这个里面啊，会去确定我当前啊，我觉得这周也行吧。在这里面进入if，我是不是要去显示某一项？是不显示，只是说是显示还是显示我的上是吧？哎，我能停到这个上面吗。

我能停在这个商品上面吗？不能吧，所以我听到的肯定是某一个什么。My iPhone下面吧。这每一个是不是都是能停的，都是。上班有问题吗？不能停，停不住，所以我还没必要在上外面这里。没有必要在这里，在这里搞，大家看到我在哪里搞呢？我们当前是这个，我刚才想的是在这里，实际上应该在哪就行了，看好了。这一个是需要显示一个什么去的。显示一个麦吧，是不是，那我现在就是要看当前这个it是不是我要。选中那个item就行。说白了啊，我写一下，大家看一下啊。

你来看一下，看看是不是这个意思，如果item.k等等于我前面不有一个我当前请求的pass吗？如果下载。你说我当前要显示的是哪个？那不就挨太吗？你说是不是？这能听到吗？Come。当然还有一个特别的情况，还有一个除了这个情况，还有一个特别的情况，不知道大家还有没有印象，我们商品管理里面有个这玩意。有个这个这个路径是这样子的吧。是不，那现在跟他相等嘛。不的，还记得我们当时怎么做的吗？对，这个地方或者。啊，我们的pass.inex of谁呀？点K要等于几等等于零，那说明是不是我们当前需要显示的是啊，当前。

要显示的。Item item。当前啊，这个此。满足这个条件啊，如果满足啊，就是找到判断判断啊，就判断个判断it是否是当前。当前对应的item吧。那这个就是判断条件，如果一旦是，那我就应该是不是确定这个item的title为我要写成。是不，那我应该干什么事情去啊？

跟刚才说同理的事啊。你说我现在是不是要去做这样一件事情？你说对吧。我们现在不要去更新设置啊。嗯，设置更新我们hand title状态吗？当然是更新里面的啊，这里面说的是更新的是Du中的他态的状态。那我是不是要去调用这个函数去更新。是固定代码吧，啊是固定的，来我们先来看一下，看看行不行，看好了来我来刷新一把。现在是不是显示的是商品管理？首页品类没你吧，没问题，还一个我们退出登录一下看是不行。Mad me。

走，你。不对呀。这不对啊，这是什么？应该是首页对不对，这能听懂不，这个它是不是复用了，我们前面点那个角色再一遍啊，比如说我现在停在这个用户管理这。各种各种情况都要测试啊，停在用户管理，接着呢，我去点他啊。这不退出了吗？进入了我的那个。什么登录，但是得说。但是得说一个事情。我们的那个里面存的还是什么。还是用户管理？听懂了，不还是用户管理这样好吗？不好。Let know know。你就退出的时候是不是要做一些事情好，当然也可以通过一定的方式解决，比如说比如说举个例子啊，我们我们的log。

组件里面啊，如果他能去直接去访问这个home就能解决问题。就是我们如果登录成功以后，不要进入我们的管理页面吗？管理页面是不是本身就应该进入货的。大家看一下啊。能看到不啊，这样也这样也是可以解决，当然还有一些别的问题，我们等会再解决，先先实现一个基本效果，我们把这个用户登录了，都搞了以后再说，对不能孙总。可以懂吧，可以啊好。来，那这样的话呢，我们就去实现了一个基本的一个标题的一个正常显示都是OK的，都没有什么太大问题啊，这是这个啊，我们先做一个基本效果，如果后面我们发现有还有别的问题，我们再去解决它，好吧。

好，这是这个。