動機(jī)
在創(chuàng)建應(yīng)用時我們知道程序有很多狀態(tài)需要管理,比如服務(wù)器的緩存數(shù)據(jù),本地的邏輯控制都會產(chǎn)生大量狀態(tài)。如果我們在view層保留大量的狀態(tài)將使我們的應(yīng)用變的維護(hù)起來越來
越難,而且造成view的無法復(fù)用,無法去編寫單元進(jìn)行測試,于是跟隨著[flux](http://facebook.github.io/flux/)的腳步,redux讓狀態(tài)管理更加的容易。我們知道view是用來和用戶進(jìn)行
交互的,它應(yīng)該只負(fù)責(zé)展示數(shù)據(jù),接收用戶動作,而不應(yīng)該去承擔(dān)額外的邏輯。作為一個iOS開發(fā)者我深知蘋果的mvc設(shè)計結(jié)構(gòu),作為視圖層的UIViewController承受了太多的邏輯了。當(dāng)然也可以使用其他
模式,比如mvvm, mvp等去進(jìn)行開發(fā)?;氐秸},redux動機(jī)是管理應(yīng)用狀態(tài)。
設(shè)計原則
- 單一數(shù)據(jù)源:數(shù)據(jù)存儲在一個store中
- 狀態(tài)是不可變的:唯一修改狀態(tài)的方式是通過action
- 純函數(shù)的方式修改狀態(tài)
你可以從這里了解到詳細(xì)的信息[redux中文教程](http://www.redux.org.cn/docs/introduction/PriorArt.html)
簡單的實現(xiàn)一個
應(yīng)用啟動的時候我們創(chuàng)建一個單例,這個單例就是我們說的store,然后把數(shù)據(jù)存儲在store中然后根據(jù)action去改變store中的數(shù)據(jù),
view監(jiān)聽store的變化這樣store就像膠水一樣把a(bǔ)ction和view粘合了在一起。所以我們可以做一個簡單的狀態(tài)管理框架。
- store
store應(yīng)該具有什么樣的功能。
1. 存儲狀態(tài)
2. 把狀態(tài)變化通知給view
3. 接收用戶發(fā)過來的要改變狀態(tài)的action
到此為止我們可使用下面的代碼來實現(xiàn)上面所說的功能
// store
function createStore(reducer) {
var currentState;
var currentListener;
function dispatch(action) {
console.log('來了一個action, action類型為', action)
setState(reducer(currentState, action))
}
function getState() {
return currentState
}
function setState(state) {
currentState = state;
if (currentListener) {
currentListener(getState())
console.log('狀態(tài)發(fā)生變化,通知視圖', currentListener)
} else {
console.log('訂閱者已經(jīng)銷毀,無法通知')
}
}
function subscribe(listener) {
console.log('我正在監(jiān)聽store里的狀態(tài), state發(fā)生變化我就通知視圖')
currentListener = listener
}
function unSubscribe() {
currentListener = null
}
return {
dispatch,
getState,
subscribe,
unSubscribe
};
}
//redux
function todos(state, action) {
switch(action.type){
case 'add_todo':
return (state || []).concat([action.text])
default:
return []
}
}
//action
function addTodo(text) {
return {type: 'add_todo', text: text}
}
var store = createStore(todos)
//view
//在componentWillMount的時候監(jiān)聽
store.subscribe((state) => {
console.log('我在視圖中發(fā)現(xiàn)了state發(fā)生了變化,我要更新視圖。', state)
});
store.dispatch(addTodo('新添加了一條信息'))
//在componentWillUnmount的時候取消監(jiān)聽
store.unSubscribe()
store.dispatch(addTodo('在添加一條信息'))
很多根據(jù)flux模式設(shè)計的狀態(tài)管理框架思路,其實都是差不多的。另外說一定函數(shù)式編程思想還是很不錯的。