redux
为什么使用Redux：
使用react进行大型项目开发时，需要管理的状态不仅数量很多而且相互共享，一个状态多个组件都要共享使用并且渲染，管理不断变化的 state 非常困难。所以我们需要把 state 进行统一管理，这样才能控制每一个state的变化，让我们的程序可读性更强，出错率更低。
一、什么是Redux？
Redux 是一个 JS 库，一个状态容器。
作用： 集中式管理 React 应用中 多个组件共享的状态
（1）它可以和 react，vue，angular 等一起使用，但一般都和 react一起使用 。
（2）Redux 可以 解耦 React（View层）于数据管理和对数据的操作，保持View层的纯净，让每一个组件的职责划分更加清楚，同时又降低了React数据传递的难度和不可控性
（3）Redux 采用了中间件机制，既保证了代码的简洁，又增加了可扩展性。
Redux的三大原则：
- 单一数据源：整个应用的state都被存储到一个状态树里面，并且这个状态树，只存在于唯一的store中。
- State 是只读的：唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。
- 使用纯函数来执行修改：为了描述 action 如何改变 state tree ，你需要编写 reducers。
使用场景：
- 某个组件的状态，需要共享；
- 某个状态需要在任何地方都可以拿到；
- 一个组件需要改变全局状态；
- 一个组件需要改变另一个组件的状态。
二、Redux的工作原理
分析
redux流程图如下：
1. redux的三个关键函数：getState()、subscribe()、dispatch()
- getState() ：用于获取当前最新的状态
- subscribe() ：用于订阅监听当前状态的变化，然后促使页面重新渲染
- dispatch() ：用于发布最新的状态
2. Redux整体执行流程
（1）用户通过事件触发ActionCreator制造action
（2）同时，用户触发的事件内调用dispatch来派发action
（3）reducer接收action，并处理state返回newState
（4）View层通过getState( )来接收newState并重新渲染视图层
三、Redux文件分析
四、Redux流程解析
单个组件使用redux：
（1）创建redux的核心store对象，store集中管理状态。那状态从哪来呢？Reducer
（2）创建Reducer，定义状态的初值、处理状态的方法。 Reducer是只负责执行，那需要判断的东西从哪来呢？Action
（3）在创建Action之前，我们需要创建constant.js定义action中的type类型。
（4）创建Action，对定义好的方法进行封装。 那封装好的函数去哪里用呢？在组件中使用
（5）在组件中绑定事件（
dispatch引用封装函数，处理状态），使用getState()获取最新状态（6）使用
subscribe()订阅store，监听根组件（最外部），只要状态发生改变，就调用render重新渲染组件。
五、核心API
createStore创建一个storestore.dispatch()帮助我们派发一个actionstore.getState()帮助我们获取到state里面所有的数据内容store.subscribe可以订阅 store数据的改变 ，只要数据发生改变，store.subscribe接受的回调函数就会被执行
react-redux
一、什么是react-redux？
首先说一下redux和react-redux的区别：
二、react-redux的工作原理
分析
react-redux流程图如下：（多组件共享状态）
1. react-redux整体执行流程
（1）用户通过事件触发ActionCreator制造action
（2）同时，用户触发的事件内调用dispatch来派发action
（3）reducer接收action，并处理state返回newState
（4）View层通过getState( )来接收newState并重新渲染视图层
三、React容器组件和UI组件
- React-Redux把所有的组件都拆分成了两大类：UI组件 和 容器组件。
UI组件
- 只负责UI的呈现，不带有任何业务逻辑
- 没有状态（即不适用this.state，或定义 state）
- 所有数据都由 props 提供
- 不使用任何 Redux 的API
容器组件
- 负责管理数据和业务逻辑，不负责UI的呈现
- 带有内部状态
- 使用 Redux 的API
如何定义容器组件
通过connect方法自动生成容器组件 对 UI组件的增强
connect接收两个参数：
（1）mapStateToProps：负责输入逻辑，即把 state 映射到 UI组件的参数（props）
（2）mapDispatchToProps：负责输出逻辑，即 把用户对UI组件的操作映射成 action
const Container = connect(mapStateToProps,mapDispatchToProps)(Counter)
四、react-redux流程解析
单个组件使用redux：
（1）创建redux的核心store对象，store集中管理状态。那状态从哪来呢？Reducer
（2）创建Reducer，定义状态的初值、处理状态的方法。 Reducer是只负责执行，那需要判断的东西从哪来呢？Action
（3）在创建Action之前，我们需要创建constant.js定义action中的type类型。
（4）创建Action，对定义好的方法进行封装。 那封装好的函数去哪里用呢？在组件中使用
（5）在组件中绑定事件（
dispatch引用封装函数，处理状态），使用getState()获取最新状态（6）使用
subscribe()订阅store，监听根组件（最外部），只要状态发生改变，就调用render重新渲染组件。
单个组件使用redux：
- 在单个组件使用redux的基础上，每个组件的action、reducer单独定义。
- 多个组件的共同状态都存放在唯一的store里面。
- 汇总所有的reducer变为一个总的reducer，进行统一的暴露。
- 多个组件的action共用一个constant，定义action中的type类型。
五、核心API
createStore创建一个storestore.dispatch()帮助我们派发一个actionstore.getState()帮助我们获取到state里面所有的数据内容store.subscribe可以订阅 store数据的改变 ，只要数据发生改变，store.subscribe接受的回调函数就会被执行composeWithDevTools引入Redux DevTools，是一款用于调试的浏览器插件,它用来时时显示当前应用的state信息,action触发记录以及state的变化applyMiddlewareRedux 的原生方法，作用是将所有中间件组成一个数组，依次执行。combineReducers汇总所有的reducer变为一个总的reducer
