一. Flux
1. 概念
flux是一套前端应用架构模式，核心是单向数据流
注：flux不是具体的代码实现
2. 解决了什么问题
组件内部state过于复杂时会使得组件本身臃肿难以维护，因此需要将state与事件部分抽取出来，组件本身只负责获取数据与渲染，其他的逻辑通过分类从component中剥离出去，这样可以保证数据流更清晰。
3. 分类分离的内容
组件中只负责渲染之后，组件状态与行为如何分类呢
- store：保存状态与行为，通过对store的监听可以实现store中数据变化时实时渲染组件。
- action：保存行为描述与行为所需数据，本事就是一个js对象，如下所示
{ type:'delete',id:'1' } - dispatcher
有了store中的行为和数据，有了action的行为描述，组件如何触发行为从而改变state呢？这就需要dispatcher做中转，它的存在保证了单向MVC的实现。
dispatcher提供两种方法，register与dispatch
register接收回调函数作为参数，函数内使用switch...case方式先设定好特定actiontype对应的store中的行为函数(也可能会加一些额外逻辑)
dispatch接收参数为action，当接收以后action会传递给register的回调函数，在函数内部处理action中的数据。
二. Redux
redux是flux架构的具体代码实现
1. 解决问题
通过对数据流的限制来保证state的变化可预测
注：所谓可预测就是指数据的走向清晰，就像拓扑图一样使数据沿着预定的顺序行走，这就是单项数据流的好处
2. 如何限制数据流
通过redux三大定律
- 单一数据源：整个应用的state存储在一个js对象中
保证的数据流的终点固定。
- state为只读：所谓只读就是只能取数据，不能直接在state改数据，如果想要修改state当且仅当触发action(dispatch一个action)才可修改
保证了数据流的起点
- 使用纯函数执行修改
使用reducer规定如何修改state，reducer本身是一个纯函数，接收state与action作为参数，纯函数好处在于输入确定，输出也会确定
//这就是一个reducer函数，负责处理action，返回新的state
function reducerDemo(state,action){
switch (action.type) {
.....
注：函数内部不可直接修改state，可通过拷贝方式返回新的state
}
}
保证了修改过程中数据流输出可预测
3.redux组成
- action
action就是一个js对象，保存actiontype与data(行为所需数据)，为保证data的复用性一般使用action creator(以data为参数的函数)生成action - reducer
reducer是一个纯函数，定义了state如何被修改
const initialState = ''; //拆分的state
function reducer1 (state = initialState,action) { //拆分的reducer
switch (action.type) {
....
}
}
考虑到当应用复杂的情况下reducer与state会变得非常臃肿，redux采取了先拆分后合并的方式来处理state与reducer
import { combineReducers } from 'redux';
import reducer1 from './xxx';
import reducer2 from './xxx';
const rootReducer = combineReducers({
reducer1,
reducer2
});
这样combineReducers会将拆分的state与reducer - store
redux中提供了createStore函数，它以rootReducer为参数返回store
const store = createStore(rootReducer);