FLUX

進化 Flux

咱們能夠先經過對比 Redux 和 Flux 的實現來感覺一下 Redux 帶來的驚豔。

首先是 action creators，Flux 是直接在 action 裏面調用 dispatch：

export function addTodo(text) { AppDispatcher.dispatch({ type: ActionTypes.ADD_TODO, text: text }); } 

Redux 把它簡化成了這樣：

export function addTodo(text) { return { type: ActionTypes.ADD_TODO, text: text }; } 

這一步把 dispatcher 和 action 解藕了，很快咱們就能看到它帶來的好處。

接下來是 Store，這是 Flux 裏面的 Store：

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 把它簡化成了這樣：

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; } 

一樣把 dispatch 從 Store 裏面剝離了，Store 變成了一個 pure function：(state, action) => state

什麼是 pure function

若是一個函數沒有任何反作用（side-effects)，不會影響任何外部狀態，對於任何一個相同的輸入（參數），不管什麼時候調用這個函數老是返回一樣的結果，這個函數就是一個 pure function。所謂 side-effects 就是會改變外部狀態的因素 ，好比 Ajax 請求就有 side-effects，由於它帶來了不肯定性。

因此如今 Store 再也不擁有狀態，而只是管理狀態，因此首先要明確一個概念，Store 和 State 是有區別的，Store 並非一個簡單的數據結構，State 纔是，Store 會包含一些方法來管理 State，好比獲取／修改 State。

基於這樣的 Store，能夠作不少擴展，這也是 Redux 強大之處。

來源：The Evolution of Flux Frameworks