redux

動機(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ù)式編程思想還是很不錯的。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容