純Redux原理分析

前言

雖然一直使用redux+react-redux，可是並無真正去講redux最基礎的部分理解透徹，我以爲理解明白redux會對react-redux有一個透徹的理解。

其實，redux並不僅能夠用於react的，其實他能夠用於任何地方，其實他的基礎原理大概就是發佈/訂閱模式，此處主要對redux的源碼進行一個深刻的剖析

redux架構

redux一共有下邊幾部分構成：

* createStore
* combineReducers
* bindActionCreators
* applyMiddleware
* compose

其中，createStore分爲以下幾部分

* subscribe 訂閱用於刷新頁面的回調事件
* dispatch 觸發動做
* getState 獲取當前狀態下的store
* replaceReducer 替換初始化傳入的reducer
* Observer 相關，不太理解如何使用，暫時略過

store

其實，最簡單的使用以下：

執行這個方法 createStore(reducer) 則會返回暴露上面幾個方法的一個對象(賦值給store)

經過store.getState則能夠獲取當前store，此處注意，官方文檔一直再說要在你定義的reducer當中定義一個default，來返回默認值，其實主要是頁面須要初始化，在createStore.js能夠看出最後他調用了

dispatch({ type: ActionTypes.INIT })

action -> dispatch -> 更新store

當dispatch調用的時候(通常會在事件的回調函數中調用)，會去執行reducer(也就是你定義的處理函數)，經過你的處理函數，最後會返回一個新的store來供你更新redux緩存的store，從這塊能夠看出

try {
      isDispatching = true
      // 經過給reducer回傳當前狀態和動做狀態來更新store
      currentState = currentReducer(currentState, action)
    } finally {
      isDispatching = false
    }

render

前面提到的store還有一個方法，subscribe，這個方法會緩存傳入的方法，便於dispatch的時候進行回調，從而更新試圖。

其實，上面這些就是redux的原理了，具體能夠看一下redux官方示例，有一個couter的例子，很容易理解: https://github.com/reactjs/re...

下面說一下其餘幾個點

compose

簡單來講就是從右側函數的返回值，做爲左側函數的參數
如 compose(fn, fn2)(...args) 等同於 fn(fn2(...args))

applyMiddleware

這個也是挺經常使用的一個方法

使用方法：

const store = applyMiddleware(Middle1, Middle2)(createStore)(reducer, initialState, enhancer)

這個方法主要作了一件事情

就是利用中間件來改變程序默認建立store，dispatch對整個過程作的處理，從而達到你本身想要的目的

最著名的一個組件就是redux-thunk,說這個方法前，先說說中間件應該怎麼寫，官網有這麼一段描述

每一個 middleware 接受 Store 的 dispatch 和 getState 函數做爲命名參數，並返回一個函數。該函數會被傳入 被稱爲 next 的下一個 middleware 的 dispatch 方法，並返回一個接收 action 的新函數，這個函數能夠直接調用 next(action)，或者在其餘須要的時刻調用，甚至根本不去調用它。調用鏈中最後一個 middleware 會接受真實的 store 的 dispatch 方法做爲 next 參數，並藉此結束調用鏈。因此，middleware 的函數簽名是 ({ getState, dispatch }) => next => action。

下面看下redux-thunk很是簡單，可是他的目的主要是爲了再不引入第三方框架能夠來操做異步事件，如

store.dispatch((dispatch, setState) => {
        setTimeout(() => {
            dispatch({
                type: 'EXAMPLES',
                payoad: '...'
            })
        }, 5);
    })

在redux-thunk內部作了這麼件事情，就是若是action是函數則執行這個函數，給他傳入dispatch, getState及其餘參數，若是不是，直接調用next(action)，將控制權交到下一個中間件(中間件是從左到右執行順序，最後控制權交到store.dispatch)，其實中間件就是在dispatch觸發以前作了一些其餘的事情來擴展redux功能

combineReducers

一共作了兩件事情，首先將reducer進行檢查是否爲函數，同時檢測reducer默認傳入的store是否爲undefined同時檢測是否影響到redux默認明明空間的action type;而後就是返回一個組合reducer，裏邊處理下每次有值改變的時候，執行該函數(過程同單個reducer),內部其實就是去循環執行他的子reducer，子reducer根據action來進行store的修改，因此來講每一個子reducer只要有處理相同type的函數，都會起到做用

注意：若是你的子reducer都不返回新對象，這個方法中會進行判斷，則他也不返回新對象

bindActionCreators

能夠將Action Creator(也就是生成action的函數)綁定到當前函數，執行後會生成action，而後需用dispatch(action)

沒太看懂使用場景，有了解的歡迎留言，互相交流學習。

總結

咱們經常使用的通常是除了bindActionCreators和compose以外的方法，那個理解明白了，對於之後出現的問題會有很大幫助，本文只是針對最基礎的redux進行解析，以後有機會繼續解析react-redux對他的封裝