深刻淺出解讀redux源碼之createStore、combineReducers

在react中使用redux狀態管理的一個完整的流程：

0.使用中間件建立倉庫，而且經過react-redux中的Provider 傳入倉庫，以便子組件鏈接倉庫，獲取狀態和派發動做。
1.先構建一個組件
2.實現頁面的基本佈局和css樣式
3.根據後臺文檔寫好調取api的方法，好比axios/fetch 以及使用resful風格
4.在action-types.js文件中定義新的動做類型 並導出
5.在action裏添加新的方法，調取後臺接口，獲取後臺數據，並經過payload傳參。若是須要發給後臺參數，經過getState結構出來，在調取接口的時候處理好並傳給後臺。
6.在本身的reducer中增長case以處理相應的動做類型
7.組件經過connect鏈接倉庫，並在組件種調用action方法，獲取數據處理邏輯
說明：1.派發動做會自動執行renducer，而後把action當作參數傳進去，執行。

那麼redux內部到底是如何建立倉庫？如何進行狀態管理呢？

建立倉庫

首先，redux是一種設計模式，能夠和jQuery/原生js/react一塊兒使用。本文配合使用的是原生js。

//建立倉庫
const createStore =(reducer)=>{
  let state;
  let listeners=[];
  let getState=()=>state;
//dispatch作了什麼？
//1.每派發一個動做，就會執行reducer合併老狀態，返回一個新狀態
//2.讓訂閱的函數執行，若是訂閱的是render函數就會從新渲染頁面
  let dispatch=(action)=>{
    state=reducer(state,action);//當倉庫中的state發聲改變，會從新執行render,讀取最新的狀態樹並更新視圖
    listeners.forEach(l=>l());
  }
// 訂閱函數
  let subscribe=(listener)=>{
    listeners.push(listener);
    return ()=>{//返回一個取消訂閱的函數，這個函數手動執行了，纔會取消訂閱
      listeners.filter(l=>l!=listener);
    }
  }
  return {
    getState,//獲取倉庫狀態
    subscribe,//訂閱
    dispatch//派發動做，發佈訂閱的事情
  }
}
export {createStore}

如何取消訂閱?

let unsubscribe=store.subscribe(render);//假設訂閱的是render函數

setTimeout(()=>{
  unsubscribe();
},5000)
  //取消訂閱以後 也就是5s以後派發動做頁面不會從新渲染


----------

`通常在react的生命週期的組件將要掛載和組件將要卸載兩個階段進行訂閱和取消訂閱。`

componentWillMount(){
  this.unsubscribe=store.subscribe(()=>{
   //訂閱的函數能夠是render
  })
}

componentWillUnMount(){
  this.unsubscribe();
}

combineReducers: 讓每一個小管理員執行，更新每個小的狀態樹

let combineReducers = (reducers)=>{
    return function (state = {}, action) {
        return Object.keys(reducers).reduce((newState, key) => {
            newState[key] = reducers[key](state[key], action);
            return newState;//返回更新後的state
        }, {});
    }
}
------解讀這段代碼以下：----
// 假設大的管理reducers是這樣的：
let reducers={home:小管理員fn1,list:小管理員fn2,detail:小管理員fn3};

Object.keys(reducers) -> [home,list,detail] //把屬性名取出來做爲一個數組

[home,list,detail].reduce((newState,key)=>{

      解讀此行代碼 newState[key] = reducers[key](state[key], action);
      
      newState = { home/list/detail: 新的state }   
      新的state= 小管理員reducer分別執行
                fn1/fn2/fn3(state.home/list/detail,action)執行，
                執行的參數是總是state和派發的動做，更新每一個小的狀態樹
                
  return newState ;//返回更新後的狀態樹
 },{})//第一個參數是空對象做爲newState的值

本文將會深刻分析redux源碼的實現，未完待續，敬請關注。。。