redux 初識

前言

Redux 試圖讓 state 的變化變得可預測

react／react-native 將組件的更新交給了狀態機（state），想要更新頁面活着頁面的某個組件就必須得經過改變state的方式。頁面越複雜，組件越多，所須要的state就越多，而且隨着頁面的交互，state也須要不斷得變化，而管理這些不斷變化的 state 就變的很是困難。終有一刻，不可勝數的 state 會讓你以爲 state 的變化已然不受控制。

"若是你不知道是否須要 Redux，那就是不須要它。"

Redux主要做用是讓應用的 state 能夠集中管理，從而達到清晰管理每一個 state，因此當你的應用很簡單時，徹底不須要使用redux，它會增長你的工做量。

三大原則

Redux 主要是經過限制 state 更新發生的時間和方式來實現 state 的管理。而這些限制條件則反應在三大原則中：

單一數據源

整個應用的 state 被儲存在一棵 object tree 中，而且這個 object tree 只存在於惟一一個 store 中。

State 只讀

唯一改變 state 的方法就是觸發 action。

確保視圖和網絡請求都不能直接修改 state，它們能夠表達想要修改的意圖（actio），而後經過這個觸發意圖（action）來修改 state。

使用純函數來執行修改

爲了描述 action 如何改變 state tree ，你須要編寫 reducers。

Reducer 是純函數，它接收先前的 state 和 action，並返回新的 state。

Action、Reducer 和 Store

Action

action是一個普通對象，用於指明用戶的操做行爲，它是把數據從應用傳到 store 的有效載荷，是 store 數據的惟一來源。一般將新數據（state）傳入action發送給store。

const EAT_APPLE = 'EAT_APPLE'

{
  type: EAT_APPLE,
  text: 'eat an apple'
}

這裏定義了一個action對象，它有type和text倆個鍵，其中type是必需的，用於描述當前action；text是自定義的，做爲承載數據的載體。

Action 建立函數

Action建立函數就是生成 action 的方法，，調用這個函數會建立action，一般只返回一個簡單的action對象。它的做用主要是爲了減小重複大量地建立action。

function eat(text) {
 return {
   type: EAT_APPLE,
   text
 }
}

Reducer

reducer根據action操做來作出不一樣的數據響應，指明應用如何更新 state。它是一個純函數，只作數據處理。

(previousState, action) => newState

它接收倆個參數：action和state，並return一個新的state。

純函數(一樣的輸入，一定獲得一樣的輸出)：

• 修改傳入參數；
• 執行有反作用的操做，如 API 請求和路由跳轉；
• 調用非純函數，如 Date.now() 或 Math.random()。

//使用ES6參數默認值語法初始化state
function toEat(state = {behavior: ""}, action) {
  if (typeof state === 'EAT_APPLE') {
    return Object.assign({}, state,{
        behavior: action.text
    }}
  }
  
  return state；
}

注意：

• 不要修改 state，Object.assign() 新建了一個副本
• 在無匹配action的狀況下返回舊的 state

因爲redux單一數據源，因此整個應用只有一個單一的 store，因此當須要拆分數據處理邏輯時，你應該使用 reducer 組合 而不是建立多個 store。

Redux 提供了一個combineReducers方法，用於 Reducer 的合併：

combineReducers({reducer,...})

Store

Redux 應用只有一個單一的 store。

store有如下方法：

• createStore(reducer,[preloadedState])

  根據傳入的reducer建立一個store。這個函數的第二個參數是可選的，用於設置 state 初始狀態。

• store.getState()

  獲取當前state的值。

• store.dispatch(action)

  向store派遣一個action。即向store傳值。

• store.subscribe(listener)

  註冊監聽器，監聽store，一旦store變化，會觸發listener。該函數會返回一個函數用於註銷該監聽器。

工做流程

一個清晰明瞭的流程圖能幫咱們更好的理解：

從上圖能夠看出redux處理的是一個單向數據流：

• 用戶行爲或者程序調用 store.dispatch(action)，向store派遣action；

• store在接收到action後，會自動呼起reducer來處理action，而且會傳入倆個參數（當前 State 和收到的 Action），這裏reducer能夠依據數據處理邏輯拆分紅多個,可是數據源store只能是一個；

• combineReducers函數會將多個多個子 reducer 輸出合併成一個單一的 state 樹

• 生成新的UI

總結

1. 並不老是須要redux，若是你的應用沒那麼複雜，就不必用它；
2. redux經過限制數據更新發生的時間和方式來達到管理state的目的；
3. redux三大原則：單一store、reducer純函數、state只讀
4. 在 createStore 和 reducer 函數中均可以初始化state。
5. redux經過dispatch、subscribe、getState實現數據的發送、監聽、獲取，從而實現單向數據流的流動