技術標籤：React

redux

為什麼出現：React 有 props 和 state ，React 沒有資料向上回溯的能力，唯一的方法是提升state到公用元件當中，子元件觸發父元件的回撥修改state。為了更好的管理state狀態，引入了專業的React頂層state分發給所有React 應用

三大原則：

• 單一資料來源： 整個應用的state儲存在一棵 object tree 中，並且這個object tree 只存在於唯一一個store中
• state是隻讀的：唯一改變state的就是action，
• 使用純函式來執行修改：為了描述action如何改變state tree，需要編寫reducer，而reducer 要做的是就是根據state和action的值產生一個新的物件返回

function reducer (state,action)=>{
    const {counterCaption}=action
    switch(action.type){
        case ActionTypes.INCREMENT:
            return{...state,[counterCaption]:state[counterCaption]+1}
        case ActionTypes.DECREMENT:
            return{...state,[counterCaption]:state[counterCaption]
 
-1}
        default:
        	return state
    }
}

react-redux

負責和Redux Store打交道的元件，處於外層，被稱為容器元件（Container Component）
負責渲染介面的元件，處於內層，叫做展示元件（PresentationalComponent）

react-redux的兩個最主要功能：

• Provider：提供包含store的context
• connect：連線容器元件和傻瓜元件；

redux-saga

是redux的一個中介軟體，解決非同步問題
是一個用於管理應用程式 Side Effect 的庫，它的目標是讓副作用管理更容易，執行更高效。（非同步獲取資料，訪問瀏覽器快取等），將redux的同步轉為非同步，非同步流程可控制

redux-thunk

thunk的缺點也是很明顯的，thunk僅僅做了執行這個函式，並不在乎函式主體內是什麼，也就是說thunk使得redux可以接受函式作為action，但是函式的內部可以多種多樣。比如下面是一個獲取商品列表的非同步操作所對應的action

export default ()=>(dispatch)=>{
    fetch('/api/goodList',{ //fecth返回的是一個promise
      method: 'get',
      dataType: 'json',
    }).then(function(json){
      var json=JSON.parse(json);
      if(json.msg==200){
        dispatch({type:'init',data:json.data});
      }
    },function(error){
      console.log(error);
    });
};

從這個具有副作用的action中，我們可以看出，函式內部極為複雜。如果需要為每一個非同步操作都如此定義一個action，顯然action不易維護。

dva

dva 首先是一個基於 redux 和 redux-saga 的資料流方案，然後為了簡化開發體驗，dva 還額外內建了 react-router 和 fetch，所以也可以理解為一個輕量級的應用框架。dva = React-Router + Redux + Redux-saga；