一個簡單的例子讓你瞭解React-Redux
1. (單向)資料流
資料流是我們的行為與響應的抽象；使用資料流能幫我們明確了行為對應的響應，這和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的一個完整過程。
2. React 的一些簡單回顧
3.react-redux 介紹
react-redux安裝:
npm install react-redux reduxredux本身就是一個工具流，而react-redux則是對redux的繫結。類似的還有ng2-redux、backbone-redux等
4. 直接開擼程式碼
專案結構
四個重要的資料夾：
– 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.純方法（非存方法是指比如依賴當前的時間）)
通過reducer,可以把使用者的actions都和states結合起來，形成新的state 在返回去，在container元件中得到新的state
/* 傳入舊的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:（reducer和state的集合）
- 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：
元件：
redux 並不知道 component元件的存在，而只知道container元件的存在，所以資料流從redux流入 container元件，container在通過 props傳參的形式，傳入component元件。
一般來說componet元件是如何顯示，比較容易複用，而container卻是和我們的業務聯絡比較緊密，不容易複用。
總結
很多中介軟體 redux-thunk傳送ajax, redux-gen生成器，react-route-redux路由，react-redux-form 表單；
function 優於ES6 Class 的寫法，優於React.createClass的寫法；function的箭頭函式就不用return了，這樣就避免了寫render方法，搞笑快捷；
mapStateToProps和mapDispatchToProps可以自定義，只要和connect高階函式名保持一致就行了。
熟悉陣列方法 map, filter，reduce方法
