简单练习react-redux

1.建议安装yarn
平常创建项目是使用yarn，因为yarn创建项目第一次之后都会有缓存。
如果是安装包，建议使用npm的镜像cnpm下载。
2.react-router和react-router-dom
react-router是路由的基本操作库
react-router-dom是路由基本操作库上封装的组件库
一般使用react-router-dom
一般使用的库有：router ，switch，Link
3.redux和react-redux
redux是redux的基础核心
react-redux是针对react的状态管理
使用react的话使用react-redux就行

建议：在安装包的时候，安装在-S中，在提示之后安装一些类型依赖到开发环境中-D

再使用react-redux时也需要安装redux：
一.用react-redux包裹住在需要使用地方的根组件

在根组件的页面引入Provider，用Provider来包裹根组件，Provide 需要传入一个值。这个值就是store，在使用这个值时，是使用{}包含key。
那么问题来了，store哪里来的？
二.因为目前是不存在store这个东西的，我们需要创建一个，在src目录下创建redux目录，现在就需要使用我们的redux了，在redux下创建store.ts：

首先我们需要导入redux中的createStore这个组件来创建我们的store，另外需要导入的就是我们创建store所需要使用的消息源了，下面使用创建store引用createStore来创建，最后记得导出哦。
三.创建完store之后，就是我们的数据源了
首先在我们的redux下创建一个student目录，首先在student下创建一个reduer.ts文件，我们先不急着用这个文件，先在src下创建一个papges文件夹，在papges下创建home.tsx文件，这个文件就是我们要使用react-redux数据，

在Home里导入react-redux中的{useDispatch，useSelector}的组件，
useSelector是用来来引入数据，
useDispatch是用来修改数据的，
导入后就是在组件中使用吧：
const hero = useSelector（（state：类型）=>state）里面的参数是一个回调函数，hero就是我们需要的数据，
const dispatch = useDispatch（）这个函数呢是我们要修改的数据所使用的函数
这里我们就可用先放下了。
现在就是我们去完善我们的数据源：现在回到reduer.ts

第一步创建我们数据的类型接口，我们创建有一个id，name，email三个字段的数据，定义我们的接口看上图使用interface关键字来创建接口，创建完接口后我们就可以来看我们的组件怎么写了，在创建函数中：
const reducer = （state = defaultValue，action：any） => {return state}
这里有一个参数state的默认值，现在我们就回到我们的接口下去创建这个默认值
const defaultValue：我们的所创建的接口 = {这里面就是我们的默认值（记得类型需要于接口保持一直哦）}
到这里我们的基础已经完成了。
现在我们可以回到Home页面

在前面我们已经创建了一个hero了，现在我们在使用hero和改变hero，
在div中我们引入hero的name，id，email三条属性，然后创建一个按钮，这个按钮中去使用dispatch这个函数来去修改hero，dispatch传入的是一个对象，
现在我们可以回到reduer.ts下了

一个简单switch判断，现在的action就刚才我们创建的数据了，
判断我们action.type的值是什么，action是一个对象，在Home页面我们给了action的值，如果action.type的值是string则执行return里面的代码。
五.但是在我们写代码时，不同的程序员所写的代码可能千奇百怪，造成的可维护性极低，那么这是我们就需要定义一个action模板来创建这个对象，就不会造成不同人写出不同对象的问题，那么我们就来创建action.ts吧
首先在student下创建action.ts，因为是给student下的reduer来设计模板：

第一步创建我们的参数，这里是运用ts中的变量类型自动判定，当代码没有运行到这里时，这三个参数都是字符串类型，
对这三个参数定义三个接口，与这三个接口相互对应的就是我们之间所创建的数据对象字段了，创建完三个接口我们可以把三个接口类型打包成一个HeroActionType，记得导出，后续我们会用到。类型定义完成之后就是我们的工程定义函数了，根据上面三个接口来创建三个工厂函数，记得工厂函数全部导出。
完成这个配置，之后我们再回到student下的reduer.ts

导入之前我们打包的类型，还记得我们之前为什么定义action吗？现在我们就把这个类型赋值给action：

当赋值完之后之前我们写的就会报错，这是为什么呢，先别急我们可以来看一下提示，再仔细看一下我们的这个判断，之前我们的action是any属性所有没有保存，现在我们给action定义了一个属性，那么action.type这个值还有用吗？
这里不急我们再回到Home页面

首先我们要把我们定义的工厂函数导入到这里，然后再使用dispatch的时候去直接可以使用工厂函数

调用工厂函数进行修改，这就使用方法，然后我们还需要回到student下的reduer.ts里：

我们可以看看实际效果：

然后点击按钮：

好了现在我们就已经完成了react-redux简单的练习使用，本人也是新手上路的小白，如有问题可以一起讨论。