### 核心概念 Redux 本身很簡單。 當使用普通對象來描述應用的 state 時。例如，todo 應用的 state 可能長這樣： ~~~ { todos: [ { text: 'Eat food', completed: true }, { text: 'Exercise', completed: false } ], visibilityFilter: 'SHOW_COMPLETED' } ~~~ 這個對象就像 “Model”，區別是它并沒有 setter（修改器方法）。因此其它的代碼不能隨意修改它，造成難以復現的 bug。 要想更新 state 中的數據，你需要發起一個 action。Action 就是一個普通 JavaScript 對象（注意到沒，這兒沒有任何魔法？）用來描述發生了什么。下面是一些 action 的示例： ~~~ { type: 'ADD_TODO', text: 'Go to swimming pool' } { type: 'TOGGLE_TODO', index: 1 } { type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' } ~~~ 強制使用 action 來描述所有變化帶來的好處是可以清晰地知道應用中到底發生了什么。如果一些東西改變了，就可以知道為什么變。action 就像是描述發生了什么的指示器。最終，為了把 action 和 state 串起來，開發一些函數，這就是 reducer。再次地，沒有任何魔法，reducer 只是一個接收 state 和 action，并返回新的 state 的函數。 對于大的應用來說，不大可能僅僅只寫一個這樣的函數，所以我們編寫很多小函數來分別管理 state 的一部分： ~~~ function visibilityFilter(state = 'SHOW_ALL', action) { if (action.type === 'SET_VISIBILITY_FILTER') { return action.filter; } else { return state; } } function todos(state = [], action) { switch (action.type) { case 'ADD_TODO': return state.concat([{ text: action.text, completed: false }]); case 'TOGGLE_TODO': return state.map((todo, index) => action.index === index ? { text: todo.text, completed: !todo.completed } : todo ) default: return state; } } ~~~ 再開發一個 reducer 調用這兩個 reducer，進而來管理整個應用的 state： ~~~ function todoApp(state = {}, action) { return { todos: todos(state.todos, action), visibilityFilter: visibilityFilter(state.visibilityFilter, action) }; } ~~~ 這差不多就是 Redux 思想的全部。注意到沒我們還沒有使用任何 Redux 的 API。Redux 里有一些工具來簡化這種模式，但是主要的想法是如何根據這些 action 對象來更新 state，而且 90% 的代碼都是純 JavaScript，沒用 Redux、Redux API 和其它魔法。