redux(一)

隨着 JavaScript 單頁應用開發日趨複雜，愈來愈多的 state （狀態）須要在前端進行管理。

這些 state 可能包括服務器響應、緩存數據、本地生成還沒有持久化到服務器的數據，也包括 UI 狀態，如激活的路由，被選中的標籤，是否顯示加載動效或者分頁器等等。

爲了高效的管理 state 而不是簡單的在全局上新建變量，開發者須要捋清 model/view 之間的關係，以下降前端開發的複雜性。此處以 Redux 爲例，總結如何利用其設計思想以及實踐經驗，來使得應用的 state 管理變得容易。

核心概念

Redux 的核心概念第一點則是 state 的表示，你能夠用一個對象來表示應用的 state (能夠當作 model) 但不能直接修改他（沒有 setter）。這一步定義的內容能夠當作是用於控制頁面效果、動畫的一些開關狀態。

{
    todo: [],
    name: 'me'
}

想要修改 state 中的數據只能經過發起 action 來實現（這樣作的好處就是能夠清晰的知道應用中到底發生了什麼）， action 也是一個普通對象，用來描述將要發生什麼。在 action 中咱們須要存儲發生事件的描述以及用於更新 state 的屬性數據，好比：

{ type: 'ADD_TODO', text: 'Go to swimming pool' }

那麼如何接收 action 並更新返回新的 state 呢？用 reducer 函數。它接收 state 和 action，在內部處理後並返回新的 state。考慮到應用的複雜性，咱們能夠分別編寫 reducer 分別獨立地操做 state tree 的不一樣部分。

Redux 三大原則

• 單一數據源：整個應用的 state 被儲存在一棵 object tree 中，而且這個 object tree 只存在於惟一一個 store 中。
• State 是隻讀的：惟一改變 state 的方法就是觸發 action，action 是一個用於描述已發生事件的普通對象。
• 使用純函數來執行修改：爲了描述 action 如何改變 state tree ，你須要編寫 reducers。

基礎

Action

咱們約定，action 內必須使用一個字符串類型的 type 字段來表示將要執行的動做。多數狀況下，type 會被定義成字符串常量。除了 type 字段外，對象結構徹底由本身決定。可是須要注意的是應該儘可能減小在 action 中傳遞的數據。

爲了瞭解生成 action，還須要知道 action 建立函數，該函數只是簡單的返回一個 action，這樣作將使 action 建立函數更容易被移植和測試。例如：

function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}

當你把 action 建立函數結果傳給 dispatch() 方法，便可發起一次 dispatch 過程，例如：

dispatch(addTodo(text))

在使用過程當中可能用到的工具包括 connect()， bindActionCreators()

Reducer

reducer 就是一個純函數，接收舊的 state 和 action，返回新的 state。經過 reducer，咱們不只能夠修改 state 還能夠藉機初始化 state。

針對 action 的處理咱們須要注意：不要修改 state，且在 default 狀況下返回舊的 state。

在使用過程當中可能用到的工具包括 combineReducers()

Store

在知道了如何用 reducer 來根據 action 更新 state 後，須要進一步瞭解的就是 store —— 將它們聯繫到一塊兒的對象。store 具備如下職責：

• 維持應用的 state；
• 提供 getState() 方法獲取 state；
• 提供 dispatch(action) 方法更新 state；
• 經過 subscribe(listener) 註冊監聽器;
• 經過 subscribe(listener) 返回的函數註銷監聽器。

數據流

Redux 應用中的數據的生命週期遵循四個步驟：

• 調用 store.dispatch(action)
• redux store 調用傳入的 reducer 函數
• 根 reducer 應該把多個子 reducer 輸出合併成一個單一的 state 樹
• Redux store 保存了根 reducer 返回的完整 state 樹

搭配 react

結合 react 開發其中比較重要的一點在於如何設計組件層次結構。結合 react 能夠知道在組件層次方面，主要須要考慮兩點：展現組件和容器組件，固然很差區分的組件能夠劃分爲其餘組件。