我們可以先通過(guò)對(duì)比 Redux 和 Flux 的實(shí)現(xiàn)來(lái)感受一下 Redux 帶來(lái)的驚艷。

首先是 action creators，F(xiàn)lux 是直接在 action 里面調(diào)用 dispatch：

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

Redux 把它簡(jiǎn)化成了這樣：

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

這一步把 dispatcher 和 action 解藕了，很快我們就能看到它帶來(lái)的好處。

接下來(lái)是 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 把它簡(jiǎn)化成了這樣：

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 變成了一個(gè) pure function：(state, action) => state

什么是 pure function

如果一個(gè)函數(shù)沒(méi)有任何副作用（side-effects)，不會(huì)影響任何外部狀態(tài)，對(duì)于任何一個(gè)相同的輸入（參數(shù)），無(wú)論何時(shí)調(diào)用這個(gè)函數(shù)總是返回同樣的結(jié)果，這個(gè)函數(shù)就是一個(gè) pure function。所謂 side-effects 就是會(huì)改變外部狀態(tài)的因素 ，比如 Ajax 請(qǐng)求就有 side-effects，因?yàn)樗鼛?lái)了不確定性。

所以現(xiàn)在 Store 不再擁有狀態(tài)，而只是管理狀態(tài)，所以首先要明確一個(gè)概念，Store 和 State 是有區(qū)別的，Store 并不是一個(gè)簡(jiǎn)單的數(shù)據(jù)結(jié)構(gòu)，State 才是，Store 會(huì)包含一些方法來(lái)管理 State，比如獲?。薷?State。

基于這樣的 Store，可以做很多擴(kuò)展，這也是 Redux 強(qiáng)大之處。

來(lái)源：The Evolution of Flux Frameworks