Redux和React-Redux的實現（三）：中間件的原理和applyMiddleware、Thunk的實現

現在我們的Redux和React Redux已經基本實現了，在Redux中，觸發一個action，reducer立即就能算出相應的state，如果我要過一會才讓reducer計算state呢怎麼辦？也就是我們如何實現非同步的action呢？這裡就要用到中間件（middleware） 1. 中間件（mi ...

現在我們的Redux和React-Redux已經基本實現了，在Redux中，觸發一個action，reducer立即就能算出相應的state，如果我要過一會才讓reducer計算state呢怎麼辦？也就是我們如何實現非同步的action呢？這裡就要用到中間件（middleware）

1. 中間件（middleware）介紹

中間就是在action與reducer之間又加了一層，沒有中間件的Redux的過程是：action -> reducer，而有了中間件的過程就是action -> middleware -> reducer，使用中間件我們可以對action也就是對dispatch方法進行裝飾，我們可以用它來實現非同步action、列印日誌、錯誤報告等功能。

又是裝飾器，沒錯，這塊的好多東西都離不開裝飾器模式，所以，設計模式很重要。

關於中間件，有很多框架或者是類庫都使用了中間件，像express、koa、mongoose等都有使用。

2. Redux中間件的使用

我們可以使用Redux提供的applyMiddleware方法來使用一個或者是多個中間件，將它作為createStore的第二個參數傳入即可，我們以Redux-Thunk為例

import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'

const store = createStore(counter, applyMiddleware(thunk))
ReactDOM.render(
  (
    <Provider store={store}>
      <App />
    </Provider>
  ),
  document.getElementById('root')
)

通過thunk中間件，我們就可以實現非同步的action了。

export function addAsync(){
  return dispatch => {
    setTimeout(() => {
      dispatch(add())
    }, 2000);
  }
}

想要實現中間件，我們首先有兩個任務要做：

擴展createStore方法，使它可以接收第二個參數。
applyMiddleware方法的實現。

3. createStore方法的擴展

我們在createStore中加入第二個參數enhancer, 專業的解釋應該叫增強器，叫middleware也可以的。

我們已經說過中間件的作用就是通過改變dispatch方法來改變數據流，所以我們這裡直接用enhancer對createStore方法進行裝飾。Redux的源碼也是這麼寫的，哈哈哈哈，怎麼和我想到的一模一樣呢？因為我看了Redux的源碼。。

export function createStore (reducer，enhancer) {
  if (enhancer) {
    return enhancer(createStore)(reducer)
  }
  let state = {}
  let listeners = []

  function getState () {
    return state
  }
  function subscribe (listener) {
    listeners.push(listener)
  }
  function dispatch (action) {
    state = reducer(state, action)
    listeners.forEach(listener => listener())
    return action
  }

  dispatch({type: '@myRedux'})
  return {getState, subscribe, dispatch}
}

高階函數的寫法，應該都能看懂了吧？前幾篇隨筆有詳細的講高階函數，還有例子。

4.applyMiddleware方法的實現

先看我們上邊對enhancer的調用，enhancer也就是我們的applyMiddleware接受了createStore做參數，返回了一個函數，這個函數的參數是reducer。現在我們對這種兩層嵌套的函數已經不陌生了，其實它就是一個return兩層的函數。

我們的applyMiddleware主要做了什麼呢？首先通過傳入的createStore方法create了一個store，然後將store的dispatch傳遞給middleware，由middleware對dispatch進行包裝，返回一個帶有被包裝的dispatch的store。

看到這裡，很簡單嘛。但是註意，還記得我們是怎麼使用非同步的action的嗎？

export function addAsync(){
  return (dispatch, getState) => {
    setTimeout(() => {
      dispatch(add())
    }, 2000);
  }
}

居然還可以在可以在非同步的action中拿到dispatch和getState方法，所以要對這個進行處理，也不是很難，把他倆傳給我們的middle就好了。

都說到這裡了，能不能自己寫出來呢？

export function applyMiddleware (middleware){
    return createStore => (...args) => {
        const store = createStore(...args)
        let dispatch = store.dispatch

        const midApi = {
            getState: store.getState,
            dispatch: (...args)=>dispatch(...args)
        }
        dispatch = middleware(midApi)(store.dispatch)
        return {
            ...store,
            dispatch
        }
    }
}

如果我們執行了被包裝後的dispatch，就相當於執行了middleware(midApi)(store.dispatch)(action)這段語句，這是一個三層的嵌套函數，我們也稱作柯里化。

5.自己的redux-thunk

其實自己的thunk很簡單，正常的action的的返回值是個對象，前面已經說過，非同步的action的返回值是一個函數，那麼我們只需要判斷一下action的返回的類型即可。

const thunk = ({dispatch, getState}) => next => action => {
    if (typeof action === 'function') {
        return action(dispatch, getState)
    }
    return next(action)
}

export thunk

在這裡呢，dispatch和getState就是我們在applyMiddleware中傳入的那個midApi對象，next就是store.dispatch也可以理解為下一個中間件，如果action的類型是object，說明這是一個同步的，直接dispatch就好了，如果
action的類型是function，當觸發這個dispatch的時候，就觸發action這個函數，同時將dispatch和getState方法傳入到action函數中，這也是為什麼我們能在非同步action中拿到dispatch和getState方法的原因。

6.多個中間件合併與compose方法

我們的applyMiddle方法還不是太完善，只能使用一個中間件，使用多個中間件怎麼辦，這個，簡單，map一下唄。如果是要求多個中間件依此執行怎麼辦？還是map呀，好，來map一下。

我們會得到這樣的代碼：

const store = createStore(
    reducer,
    applyMiddleware(middlewareOne) (
        middlewareTwo(
          middlewareThree(
              ...
          )
        )
    )
)

我們會發現，我們陷入了一個深度嵌套的函數當中，這時我們就需要一個compose方法來結合一下，方便我們的書寫。

compose是函數式編程的一種寫法，compose的作用是從右到左結合多個函數，形成一個最終函數。就是將fn1(fn2(fn3()))的形式，變成compose(fn1, fn2, fn3)的形式。

compose 做的只是讓你在寫深度嵌套的函數時，避免了代碼的向右偏移。不要覺得它很複雜。

compose方法的實現：

export function compose (...funcs){
    if (funcs.length==0) {
        return arg=>arg
    }
    if (funcs.length==1) {
        return funcs[0]
    }
    return funcs.reduce((ret,item)=> (...args)=>{
                console.log(ret)
       return ret(item(...args))
      })
}

compose不是那麼複雜，關於如果想瞭解更多關於compose的知識，可以看看Redux對compose的說明

到這裡我們可以使用多個中間件的applyMiddleware方法已經實現了，整個的applyMiddleware方法在這裡：

export function applyMiddleware (...middlewares){
    return createStore=>(...args)=>{
        const store = createStore(...args)
        let dispatch = store.dispatch

        const midApi = {
            getState:store.getState,
            dispatch:(...args)=>dispatch(...args)
        }
        const middlewareChain = middlewares.map(middleware=>{
            return middleware(midApi)
        })
        console.log(compose(...middlewareChain)(store.dispatch))
        dispatch = compose(...middlewareChain)(store.dispatch)
        return {
            ...store,
            dispatch
        }
    }
}
export function compose(...funcs){
    if (funcs.length==0) {
        return arg=>arg
    }
    if (funcs.length==1) {
        return funcs[0]
    }
    return funcs.reduce((ret,item)=> (...args)=>{
                console.log(ret)
       return ret(item(...args))
      })
}

到這裡，整個Redux和React-Redux的基本原理我們已經清楚了，也已經基本實現了，發現其中涉及到很多函數式編程和裝飾者模式，還有一次觀察者模式，所以，編程思想和設計模式是很重要的，有時間一定要加強這方面的學習。

我們現在有了這些基礎，可以去看看Redux和React-Redux的源碼，也大體上和我寫的是差不多的，因為我也看了源碼。