008_React 状态管理 Redux
Redux 的概念
Redux 是 JavaScript应用的状态容器，提供可预测化的状态管理；
- Javascript应用：是指任何Javascript构建的项目，而不是仅仅是React框架构建的项目，当然他们搭配用起来更加顺手；
- 状态容器：react项目中的state抽离出来集中在对象树状结构中store(状态容器)，一个项目只能有一个store(状态容器)；
- 可预测性：对于状态的更新变化都是通过纯函数进行操作的，纯函数的核心就是不管传入什么参数，都不会影响改变你传入参数的值；也就是每个新的state都会在旧的state进行产生，而且还不改变旧的state，这就是可预测性；
Redux和Vuex的区别和联系
- Redux，本身就是一个单纯的状态管理者，我们不追溯它的历史，从使用角度来说：它提供一个全局的对象store，store中包含state对象用以包含所有应用数据，并且store提供了一些reducer方法。这些方法可以自定义，使用调用者得以改变state的值。state的值仅为只读，如果需要更改则必须只能通过reducer。
- React-Redux，简单来说，它提供了一些接口，用于Redux的状态和React的组件展示结合起来，以用于实现状态与视图的一一对应。
- Vuex，吸收了Redux的思想，并且针对web应用的开发模式和Vue框架做了优化。所以它在实现了全量Redux的思想以外，为了与Vue框架结合，它也具备了类似React-Redux中的与框架结合的功能（尽管具体使用方式可能有差异），此外还一些更好用的特性
store和state是最基本的概念，Vuex没有做出改变。其实Vuex对整个框架思想并没有任何改变，只是某些内容变化了名称或者叫法，通过改名，以图在一些细节概念上有所区分。
- Vuex弱化了dispatch的存在感。Vuex认为状态变更的触发是一次“提交”而已，而调用方式则是框架提供一个提交的commit API接口。
- Vuex取消了Redux中Action的概念。不同于Redux认为状态变更必须是由一次”行为”触发，Vuex仅仅认为在任何时候触发状态变化只需要进行mutation即可。Redux的Action必须是一个对象，而Vuex认为只要传递必要的参数即可，形式不做要求。
- Vuex也弱化了Redux中的reducer的概念。reducer在计算机领域语义应该是”规约”，在这里意思应该是根据旧的state和Action的传入参数，”规约”出新的state。在Vuex中，对应的是mutation，即”转变”，只是根据入参对旧state进行”转变”而已。
- 总的来说，Vuex通过弱化概念，在任何东西都没做实质性削减的基础上，使得整套框架更易于理解了。
- 另外Vuex支持getter，运行中是带缓存的，算是对提升性能方面做了些优化工作，言外之意也是鼓励大家多使用getter。
什么用Redux？
先谈谈react，react是由facebook公司开源的前端框架；主要用于构建前端界面，将项目中的前端界面进行组件化处理，也就是说react是解决DOM层面上的抽象层；
对于一个完整的前端项目来说，这样是仅仅不够的，它并没有很好的解决组件之间的通信，只通过形式props实现了简单结构的组件通信，对于复杂结构的组件，如果进行采用props形式实现通信，会使整个项目变得难以维护，项目结构混乱（props嵌套传递层次太深）；因此诞生出了另一套解决方案：基于Flux架构实现的Redux状态管理框架;
redux运作机制
redux中state属于状态容器，用来存放相应的数据状态，然后在自定义Action规则，它是把数据从应用传到 store 的有效载荷。属于 store 数据的唯一来源。你可以通过 store.dispatch() 将 action 传到 store。执行reducer纯函数进行数据状态更改；其中store是将它们连接起来的概念化的标识；redux具体运行机制如下图所示：
Redux 名词解释
createStore
创建 store 对象，包含 getState, dispatch, subscribe, replaceReducer
reducer
reducer 是一个计划函数，接收旧的 state 和 action，生成新的 state
action
action 是一个对象，必须包含 type 字段
dispatch
dispatch( action )触发 action，生成新的 statesubscribe
实现订阅功能，每次触发 dispatch 的时候，会执行订阅函数
combineReducers
多 reducer 合并成一个 reducer
replaceReducer
替换 reducer 函数
middleware
扩展 dispatch 函数！
你再看 redux 流程图，是不是大彻大悟了？