1. Redux出现的原因：
由于在react中各个组件之间的通信以及状态管理都比较繁琐，比如重孙子想去太爷爷家拿滑板，必须要给爸爸打电话说这件事，爸爸再给爸爸的爸爸打电话（对不起我去新买一个！）。所以就有了redux的出现从此解放生产力，可以把数据（滑板）先放在数据仓库（store-公用状态存储空间）中，这里可以统一管理状态，然后哪个组件（重孙子）用到了，就让管理员（action）去stroe中用reducer查找状态。
2. 基础知识
2.1 工作流程
[以图书借阅举例]
- 由此可以看出redux的组成有：
- components： 需要调用redux的组件（直接引用即可）
- action：传递数据；Action就是一个对象，这个对象一般有两个属性，第一个是对Action的描述，第二个是要改变的值。
- store： 保存所有的数据；
- reducer: 对仓库中的数据进行管理；必须注意的是reducer本身并不具备增删改查state的能力；
2.2 两个优化点（必备！）
- 创建ActionType文件统一管理；
- 这么做的原因在于我们需要用到action的地方很多，但如果一不小心将type写错，就会导致部分功能无法实现，且不会报错（人生无望！）
- 便于其他地方调用时，直接引入；
- 把所有的Redux Action放到一个文件里进行管理
- 目前ToDoList组件里有很多Action，并且分散才程序的各个地方，如果庞大的工程，这势必会造成严重的混乱；
2.3 三个一定要注意的问题
- Store必须唯一；
- Reducer不可改变state内容，只要store能改变自己的内容；
- Reducer必须是纯函数；只依赖于输入参数，返回的值由传入的值决定；
3. 优化内容
3.1 将UI与业务逻辑分离
【UI和业务逻辑分离后，可以更好地维护； 也更便于开发】
- 将UI部分单独拿出来放在一个文件中；
- 在需要使用该UI的组件中引用该文件；
- 需要注意的是，我们需要从父组件传数据给子组件（UI组件）；
3.2 转化为无状态组件：
定义： 什么是无状态组件呢，也就是在该组件中没有业务逻辑，不用继承任何类，也不存在任何状态；只是一个函数；
- 需要注意的是，由于在该函数中以及使用的JSX语法，因此依旧需要引入Redux;
3.3 配置redux-thunk中间件
- 目的：比如在Dispatch一个Action之后，到达reducer之前，进行一些额外的操作（进行一些异步操作），就需要用到middleware（中间件）。
- 配置步骤：
- 优化：
- 以前actionCreators.js都是定义好的action，根本没办法写业务逻辑，有了Redux-thunk之后，可以把TodoList.js中的componentDidMount业务逻辑放到这里来编写。
- 也就是把向后台请求数据的代码放到actionCreators.js文件里。那我们需要引入axios,并写一个新的函数方法。（以前的action是对象，现在的action可以是函数了，这就是redux-thunk带来的好处）
4. react-redux
将redux和react通过provider（提供器）和connect（连接器）更好的配合在一起，使得步骤更加的便捷；
4.1. Provider:
<Provider>是一个提供器，只要使用了这个组件，组件里边的其它所有组件都可以使用store了，这也是React-redux的核心组件;
4.2 connect:
- 使用connect获取store中的数据；
- 映射关系的设置：
- 映射关系就是将原来的state映射成组件中的props；
- 更新store中的数据：
- 添加input的onChange事件作为示例：
- 通过dispatchToProps进行事件的派发，并将dispatchToProps作为第二个参数传递给connect：
4.3 进行一些优化：
- 首先可以看到我们这个TodoList组件中没有任何的业务逻辑，因此可以改成无状态函数；这也是react-redux的功劳；
- 其次代码中有好几处this.props都是重复的，这时候就可以用javascript的解构赋值方法，来精简代码。
感谢@技术胖，本片学习内容为通过观看@技术胖的学习视频以及文本资料再加上官方文档。@技术胖于我个人而言教学方式以及教授方式都非常的被我受用，语言简洁明了，代码也很清晰，最重要的是每节课目的明确；
这是他的博客地址：www.jspang.com/
