深刻理解redux

原文刊登在個人github

爲何寫這篇文章

業餘時間我也算看了很多優秀開源項目的源碼好比react,redux,vuex,vue,babel，ant-design等，可是不多系統地進行總結，學到的知識很是有限，所以我一直想寫一篇完善的源碼解讀方面的文章。

第二個緣由是最近面試的過程當中，發現不少候選人對redux的理解很淺，甚至有錯誤的理解。真正理解redux的思想的人很是好，更不要說理解它其中的精妙設計了。

所以就有了這篇文章的誕生。

REDUX是什麼

深刻理解redux以前，首先來看下，redux是什麼，解決了什麼問題。

下面是redux官方給出的解釋：

Redux is a predictable state container for JavaScript apps.

上面的概念比較抽象，若是對redux不瞭解的人是很難理解的。

一個更容易被人理解的解釋（一樣是redux官方的解釋）：

redux是flux架構的實現，受Elm啓發

首先科普兩個名字，flux和Elm。

flux

下面是facebook官方對flux的解釋：

Application Architecture for Building User Interfaces

更具體地說：

An application architecture for React utilizing a unidirectional data flow.

flux是隨着react一塊兒推出的數據管理框架，它的核心思想是單項數據流。

一圖勝千言，讓咱們經過圖來了解下flux

經過react構建view，而react又是數據驅動的，那麼解決數據問題就解決了view的問題，經過flux架構管理數據，使得數據可預測。這樣 view也變得可預測。 很是棒～

Elm

Elm是一門編譯代碼到javaScript的語言，它的特色是性能強和無運行時異常。Elm也有虛擬DOM的實現。

Elm的核心理念是使用Model構建應用，也就是說Model是應用的核心。 構建一個應用就是構建Model，構建更新Model的方式，以及如何構建Model到view的映射。

更多關於elm的介紹

瞭解了上面的東西，你會發現其實redux的任務就是管理數據。redux的數據流能夠用下面的圖來標示：

redux中核心就是一個單一的state。state經過閉包的形式存放在redux store中，保證其是隻讀的。若是你想要更改state，只能經過發送action進行，action本質上就是一個普通的對象。

你的應用能夠經過redux暴露的subscribe方法，訂閱state變化。若是你在react應用中使用redux，則表現爲react訂閱store變化，並re-render視圖。

最後一個問題就是如何根據action來更新視圖，這部分是業務相關的。 redux經過reducer來更新state，關於reducer的介紹，我會在後面詳細介紹。

它精妙的設計咱們在後面進行解讀。

最小化實現REDUX

其實寫一個redux並不困難。redux源碼也就區區200行左右。 裏面大量使用高階函數，閉包，函數組合等知識。讓代碼看起來更加簡短，結構更加清晰。

咱們來寫一個"redux"吧

實現

咱們要實現的redux主要有以下幾個功能：

• 獲取應用state
• 發送action
• 監聽state變化

讓咱們來看下redux store暴漏的api

const store = {
  state: {}, // 全局惟一的state，內部變量，經過getState()獲取
  listeners: [], // listeners，用來諸如視圖更新的操做
  dispatch: () => {}, // 分發action
  subscribe: () => {}, // 用來訂閱state變化
  getState: () => {}, // 獲取state
}
複製代碼

咱們來實現createStore，它返回store對象， store的對象結構上面已經寫好了。createStore是用來初始化redux store的，是redux最重要的api。 咱們來實現一下：

createStore

const createStore = (reducer, initialState) => {
  // internal variables
  const store = {};
  store.state = initialState;
  store.listeners = [];
  
  // api-subscribe
  store.subscribe = (listener) => {
    store.listeners.push(listener);
  };
  // api-dispatch
  store.dispatch = (action) => {
    store.state = reducer(store.state, action);
    store.listeners.forEach(listener => listener());
  };
  
  // api-getState
  store.getState = () => store.state;
  
  return store;
};

複製代碼

經過上面的20行左右的代碼已經實現了redux的最基本功能了，是否是很驚訝？咱們下面來試下。

使用

咱們如今能夠像使用redux同樣使用了咱們的"redux"了。

如下例子摘自官網

你能夠把下面這段腳本加上咱們上面實現的"redux"，拷貝到控制檯執行，看下效果。是否和redux官方給的結果一致。

// reducer
function counter(state = 0, action) {
  switch (action.type) {
  case 'INCREMENT':
    return state + 1
  case 'DECREMENT':
    return state - 1
  default:
    return state
  }
}

let store = createStore(counter)

store.subscribe(() =>
  console.log(store.getState())
)


store.dispatch({ type: 'INCREMENT' })
// 1
store.dispatch({ type: 'INCREMENT' })
// 2
store.dispatch({ type: 'DECREMENT' })
// 1
複製代碼

能夠看出咱們已經完成了redux的最基本的功能了。 若是須要更新view，就根據咱們暴漏的subscribe去更新就行了，這也就解釋了 redux並非專門用於react的，以及爲何要有react-redux這樣的庫存在。

爲了方便各個階段的人員可以看懂，我省略了applyMiddleware的實現，可是不要擔憂，我會在下面redux核心思想章節進行解讀。

REDUX核心思想

redux的核心思想出了剛纔提到的那些以外。 我的認爲還有兩個東西須要特別注意。 一個是reducer, 另外一個是middlewares

reducer 和 reduce

reducer能夠說是redux的精髓所在。咱們先來看下它。reducer被要求是一個純函數。

• 被要求很關鍵，由於reducer並非定義在redux中的一個東西。而是用戶傳進來的一個方法。
• 純函數也很關鍵，reducer應該是一個純函數，這樣state纔可預測(這裏應證了我開頭提到的Redux is a predictable state container for JavaScript apps.)。

平常工做咱們也會用到reduce函數，它是一個高階函數。reduce一直是計算機領域中一個很是重要的概念。

reducer和reduce名字很是像，這是巧合嗎？

咱們先來看下reducer的函數簽名：

fucntion reducer(state, action) {
    const nextState = {};
    // xxx
    return nextState;
}
複製代碼

再看下reduce的函數簽名

[].reduce((state, action) => {
    const nextState = {};
    // xxx
    return nextState;
}, initialState)
複製代碼

能夠看出兩個幾乎徹底同樣。最主要區別在於reduce的須要一個數組，而後累計變化。 reducer則沒有這樣的一個數組。

更確切地說，reducer累計的時間上的變化，reduce是累計空間上的變化。

如何理解reducer是累計時間上的變化？

咱們每次經過調用dispatch(action)的時候，都會調用reducer，而後將reducer的返回值去更新store.state。

每次dispatch的過程，其實就是在空間上push(action)的過程，相似這樣：

[action1, action2, action3].reduce((state, action) => {
    const nextState = {};
    // xxx
    return nextState;
}, initialState)

複製代碼

所以說，reducer實際上是時間上的累計，是基於時空的操做。

middlewares

關於middleware的概念咱們很少介紹， 感興趣能夠訪問這裏查看更多信息。

以下能夠實現middleware的效果：

store.dispatch = function dispatchAndLog(action) {
  console.log('dispatching', action)
  let result = next(action)
  console.log('next state', store.getState())
  return result
}
複製代碼

上述代碼會在dispatch先後進行打印信息，這樣一個最簡單的中間件就實現了。若是再加上compose就能夠將多箇中間件順序執行。

好比咱們還定義了另外幾個類似的中間件，咱們須要將多箇中間件按照必定順序執行，以下是redux applyMiddleware源碼：

// 用reduce實現compose，很巧妙。
function compose(...funcs) {
  if (funcs.length === 0) {
    return arg => arg
  }

  if (funcs.length === 1) {
    return funcs[0]
  }

  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

// applyMiddleware 的源碼
function applyMiddleware(...middlewares) {
  return createStore => (...args) => {
    const store = createStore(...args)
    let dispatch = () => null;
    let chain = [];

    const middlewareAPI = {
      getState: store.getState,
      dispatch: (...args) => dispatch(...args)
    }
    chain = middlewares.map(middleware => middleware(middlewareAPI))
    // 將middlewares組成一個函數
    // 也就是說就從前到後依次執行middlewares
    dispatch = compose(...chain)(store.dispatch)

    return {
      ...store,
      dispatch
    }
  }
}

// 使用
let store = createStore(
  todoApp,
  // applyMiddleware() tells createStore() how to handle middleware
  applyMiddleware(logger, dispatchAndLog)
)
複製代碼

上面就是redux關於middleware的源碼，很是簡潔。可是想要徹底讀懂仍是要花費點心思的。

首先redux經過createStore生成了一個原始的store(沒有被enhance)，而後最後將原始store的dispatch改寫了，在調用原生的reducer之間,插入中間件邏輯(中間件鏈會順序依次執行). 代碼以下：

function applyMiddleware(...middlewares) {
  return createStore => (...args) => {
    const store = createStore(...args)
    // let dispatch = xxxxx;
    return {
      ...store,
      dispatch
    }
  }
}
複製代碼

而後咱們將用戶傳入的middlewares順序執行，這裏藉助了compose，compose是函數式編程中很是重要的一個概念,他的做用就是將多個函數組合成一個函數，compose(f, g, h)()最終生成的大概是這樣：

function(...args) {
  f(g(h(...args)))
}
複製代碼

所以chain大概長這個樣子：

chain = [
  function middleware1(next) {
    // 內部能夠經過閉包訪問到getState和dispath

  },
  function middleware2(next) {
    // 內部能夠經過閉包訪問到getState和dispath

  },
  ...
]
複製代碼

有了上面compose的概念以後，咱們會發現每一個middleware的input 都是一個參數next爲的function，第一個中間件訪問到的next其實就是原生store的dispatch。代碼爲證： dispatch = compose(...chain)(store.dispatch)。從第二個中間件開始，next其實就是上一個中間件返回的 action => retureValue 。 有沒有發現這個函數簽名就是dispatch的函數簽名。

output是一個參數爲action的function, 返回的function簽名爲 action => retureValue 用來做爲下一個middleware的next。這樣middleware就能夠選擇性地調用下一個 middleware(next)。

社區有很是多的redux middleware，最爲經典的dan本人寫的redux thunk，核心代碼只有兩行, 第一次看真的震驚了。從這裏也能夠看出redux 的厲害之處。 基於redux的優秀設計，社區中出現了不少很是優秀的第三方redux中間價，好比redux-dev-tool, redux-log, redux-promise 等等，有機會我會專門出一個redux thunk的解析。

總結

本篇文章主要講解了redux是什麼，它主要作了什麼。而後經過不到20行代碼實現了一個最小化的redux。最後深刻講解了redux的核心設計reducer和middlewares。

redux還有一些很是經典的學習資源，這裏推薦redux做者本人的getting started with redux和You Might Not Need Redux。學習它對於你理解redux以及如何使用redux管理應用狀態是很是有幫助的。