TodoList小demo
(單向)數據流
數據流是我們的行為與響應的抽象；使用數據流能幫我們明確了行為對應的響應，這和react的狀態可預測的思想是不謀而合的。
常見的數據流框架有Flux/reFlux/Redux。相比其它數據流框架，Redux輕量(壓縮后只有2K),而且在一個react項目中，Redux維護了單一的狀態樹。
下面我們來具體看看為什么要使用數據流
不只是前端，很多系統開發的時候遵從的都是MVC分離，也就是數據放在Model里面，View來控制顯示，Controler做整體的管理。但是隨着系統的龐大，它會產生一系列問題。比如舉個例子，我們上網shopping，提交訂單，那么用戶的賬號，優惠信息，物流信息，庫存等等的Model都會發生更新變化，然后View上的顯示也會隨之變化，反過來，View的有些變化也會對Model產生影響，這樣就使用戶下了一個訂單以后界面會變得什么樣變得不可預測。
所以在React出現的同時Facebook也搞出了一個Flux數據流(React是純V層框架，需要數據流進行支撐)，它的思想如下:
它認為用戶有各種各樣的Action,然后所有的Action由一個統一的Dispacher分發到若干個Store里去，這個Store保存着數據也保存着頁面的狀態，根據數據和頁面的狀態，一個store只能向視圖層傳遞信息，而不允許視圖層再返回來作用到Store上，然后視圖就發生更新，然后再由用戶傳入新的操作。這樣子我們就能預測到Action作用到Store上時，View發生什么變化。
那Redux是Flux的一種實現方法，但是也有些許不一樣，它的思想如下
當頁面渲染完，UI就出現了，然后用戶觸發UI上的Action，然后Action被送到Reducer這個方法里去，然后Reducer更新了Store，Store里包含react開發的State，最后State決定UI層的展現。這就是Redux的一個完整過程。
react-redux安裝:
npm install react-redux redux
redux本身就是一個工具流，而react-redux則是對redux的綁定。類似的還有ng2-redux、backbone-redux等
項目結構
四個重要的文件夾：
-- actions：行為
-- components：組件
-- container：組件
-- reducer：Store里分發Action的方法
- index.html：模板文件
- server.js
- webpack
下面對各個部分進行舉例（一個簡單的待辦項小demo）：
action:(1.是行為的抽象；2.是普通JS對象；3.一般由方法生成；4.必須有一個type)
const addTodo = (text) = > { return { type: 'ADD_TODO', //必須要有type id: nextTodoId++, text } }
reducer:(1.是響應的抽象；2.純方法（非存方法是指比如依賴當前的時間）)
/* 傳入舊的state和作用的action返回一個新state */
const todo = (state, action) => { switch (action.type) { case 'ADD_TODO': return { id: action.id, text: action.text, completed: false // 剛傳入的待辦項未完成 } case 'TOGGLE_TODO': if (state.id !== action.id) { return state } return Object.assign({}, state, { // 把state和completed合並成一個對象返回 completed: !state.completed }) default: return state } }
store:(1.action作用於store；2.reducer根據store響應；3.對於redux來說，store是唯一的；4.store包括了完整的state；5.state完全可預測)
import { createStore } from 'redux' import todoApp from './reducers' let store = createStore(todoApp)
打印store：
組件：
