Flux与Redux

一. 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组成

1. action
   action就是一个js对象，保存actiontype与data(行为所需数据)，为保证data的复用性一般使用action creator(以data为参数的函数)生成action
2. 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
3. store
   redux中提供了createStore函数，它以rootReducer为参数返回store
   const store = createStore(rootReducer);