什么是Flux? —— 简单地说，Flux是用来构建用户端的Web应用程序的体系架构，用来管理和控制应用中数据的流向。
从上图可知，Flux最大的一个优点就是数据的单向流动。
1.首先要有 action，通过定义一些 action creator 方法根据需要创建 Action 提供给 dispatcher
因此，我们可以将上图总结一下：Action 可以看成是修改Store的行为抽象；Dispatcher 管理着应用的数据流，可以看为Action到Store的分发器；Store 管理着整个应用的状态和逻辑，类似MVC中的Model。
相对于MVC中View具备多个修改Modal的能力，导致VC<->M在复杂页面中会比较混乱。
Flux实现了所有的状态都通过Store来维护，Store统一控制View，View没有直接修改Store的能力，而是发起Action通过Dispatcher去修改Store(通过 Action 传递数据)。避免了数据流的混乱。
Flux Demo
什么是Redux? —— Redux是基于Flux架构的一次改进，官方的定义：Redux is a predictable state container for JavaScript apps（可预测的状态容器）。
从图中可以看出，Redux和Flux最大的不同在于Redux用Reducer代替了Flux的Dispatcher。Redux设想你永远不会变动你的数据，而应该在Reducer中返回新的对象来作为应用的新状态。因此，State 应该是只读的，唯一改变 State 的方法就是触发Action。而为了描述 Action 如何改变 State Tree ，需要编写 Reducers来实现。
Reducer函数 ：是纯函数，不应该有副作用，不应有API调用，Date.now()或者随机获取等不稳定的操作，应当保证相同的输入Reducer计算的结果应该是一致的输出，它只会进行单纯的计算。
1 2 3 4 5 6 7 8 9 function Reducer (state, action ) switch (action.type) { case ACTION_TYPE: return newState; default : return state; } return newState; }
State是不可修改的，所以返回的新State应该是基于输入State副本的修改，而不是直接修改State后的返回。
Redux三大原则
1.单一数据源(Store) 2.State是只读的 唯一改变 State 的方法就是触发 Action，Action 是一个用于描述已发生事件的普通对象。 3.通过纯函数Reducer来修改Store,
Redux与Flux的对比 前面我们称Redux是基于Flux架构的一次改进，那么Redux和Flux具体有哪些区别呢？从代码层面来看：Action:
Flux:
1 2 3 4 5 6 7 export function addTodo (text ) AppDispatcher.dispatch({ type: ActionTypes.ADD_TODO, text: text }); }
Redux:
1 2 3 4 5 6 7 export function addTodo (text ) return { type: ActionTypes.ADD_TODO, text: text }; }
Store:
Flux:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 let _todos = [];const TodoStore = Object .assign(new EventEmitter(), { getTodos() { return _todos; } }); AppDispatcher.register(function (action ) switch (action.type) { case ActionTypes.ADD_TODO: _todos = _todos.concat([action.text]); TodoStore.emitChange(); break ; } }); export default TodoStore;
Redux:
1 2 3 4 5 6 7 8 9 const initialState = { todos : [] };export default function TodoStore (state = initialState, action ) switch (action.type) { case ActionTypes.ADD_TODO: return { todos : state.todos.concat([action.text]) }; default : return state; }
Redux简单demo实现 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 const INCREMENT = 'INCREMENT' ;const DECREMENT = 'DECREMENT' ;function incrementCreator (number ) return { type: INCREMENT, number, }; } function decrementCreator (number ) return { type: DECREMENT, number, }; } const initialState = { counter: 0 , }; function countReducer (state = initialState, action ) switch (action.type) { case INCREMENT: return Object .assign({}, { counter: state.counter + action.number, }); case DECREMENT: return Object .assign({}, { counter: state.counter - action.number, }); default : return state; } } const store = Redux.createStore(countReducer);store.subscribe(function log ( console .log(store.getState()); }); store.dispatch(incrementCreator(5 )); store.dispatch(decrementCreator(4 ));
