一個簡單的例子讓你瞭解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 redux
redux本身就是一個工具流,而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方法