淺析Redux 的 store enhancer

相信大家都知道Redux的middleware（中間件）的概念，Redux通過middleware可以完成發送異步action（網絡請求）、打印action的日誌等功能。相對而言，Redux的store enhancer的概念，很多人並不是很清楚。

1. 基本概念及使用

Redux通過API createStore創建store，createStore的函數簽名如下：

createStore(reducer, [preloadedState], [enhancer])

其中，第3個可選參數enhancer，就是指的store enhancer。

store enhancer，可以翻譯成store的增強器，顧名思義，就是增強store的功能。一個store enhancer，實際上就是一個高階函數，它的參數是創建store的函數（store creator），返回值是一個可以創建功能更加強大的store的函數(enhanced store creator)，這和React中的高階組件的概念很相似。

store enhancer 函數的結構一般如下：

function enhancerCreator() {
  return createStore => (...args) => {
    // do something based old store
    // return a new enhanced store
  }
}

注意，enhancerCreator是用於創建store enhancer 的函數，也就是說enhancerCreator的執行結果纔是一個store enhancer。（…args） 參數代表創建store所需的參數，也就是createStore接收的參數，實際上就是（reducer, [preloadedState], [enhancer]）。

現在，我們來創建一個store enhancer，用於輸出發送的action的信息和state的變化：

// autoLogger.js
// store enhancer
export default function autoLogger() {
  return createStore => (reducer, initialState, enhancer) => {
    const store = createStore(reducer, initialState, enhancer)
    function dispatch(action) {
      console.log(`dispatch an action: ${JSON.stringify(action)}`);
      const res = store.dispatch(action);
      const newState = store.getState();
      console.log(`current state: ${JSON.stringify(newState)}`);
      return res;
    }
    return {...store, dispatch}
  }
}

autoLogger() 改變了store dispatch的默認行爲，在每次發送action前後，都會輸出日誌信息。然後在創建store上，使用autoLogger()這個store enhancer:

// configureStore.js
import { createStore, applyMiddleware } from 'redux';
import rootReducer from 'path/to/reducers';
import autLogger from 'path/to/autoLogger';

const store = createStore(
  reducer，
  autoLogger()
);

2. 與middleware （中間件）的關係

如果你瞭解redux-logger這個redux middleware，是不是感覺autoLogger()的作用和它很相似呢？難道store enhancer 和 middleware 可以實現相同的功能？確實如此。實際上，middleware的實現函數applyMiddleware本身就是一個store enhancer，applyMiddleware源碼示意如下：

export default function applyMiddleware(...middlewares) {
  return createStore => (...args) => {
    // 省略
    return {
      ...store,
      dispatch
    }
  }
}

applyMiddleware的結構和前面提到的store enhancer的結構完全相同，applyMiddleware(…middlewares)的執行結果就是一個store enhancer。所以，可以用middleware實現的功能，當然也可以使用store enhancer 來實現了。從applyMiddleware(…middlewares)最終的返回結構{…store, dispatch}還可以推測出，applyMiddleware(…middlewares)這個store enhancer 主要用來修改store的dispatch方法，這也確實是middleware的作用：增強store的dispatch功能。middleware實際上是在applyMiddleware(…middlewares) 這個store enhancer之上的一層抽象，applyMiddleware(…middlewares) 傳遞給每一個middleware參數{getState, dispatch}，middleware對dispatch方法進行加強。

當同時使用applyMiddleware(…middlewares)和其他store enhancer時，往往可以先使用redux提供的compose函數，將這些store enhancer組合成一個：

// configureStore.js
import { createStore, applyMiddleware, compose } from 'redux';
import rootReducer from 'path/to/reducers';
import autLogger from 'path/to/autoLogger';

const enhancer = compose(
  applyMiddleware(...middlewares),
  autLogger()
);

const store = createStore(
  reducer，
  enhancer
);

經過compose組合後，所有的store enhancer會形成一個洋蔥模型，compose中的第一個enhancer處於洋蔥模型的最外層，最後一個enhancer處於洋蔥模型的最內層，每當發送一個action，都會經過洋蔥模型從外到內的每一層enhancer的處理，如下圖所示。因爲一般我們通過middleware處理異步action，爲保證其他enhancer接收到的都是普通action，所以需要將applyMiddleware(…middlewares)作爲第一個store enhancer 傳給 compose，讓所有的action先經過applyMiddleware(…middlewares)的處理。

​

applyMiddleware(…middlewares)將middleware限制爲只可以增強store dispatch的功能，但這只是它自身的規範限制，對於其他store enhancer，你可以增強store中包含的任意方法的功能，如dispatch、subscribe、getState、replaceReducer等。畢竟，store只是一個包含一些函數的普通JavaScript對象，可以很容易的複製其中的方法，並增加新的功能。

我們再來看一個例子，redux-localstorage， 這個store enhancer 用來自動將store中的state持久化到localStorage中。它的主要代碼如下：

// store enhancer
export default function persistState(paths, config) {
  // 一些功能選項配置

  return next => (reducer, initialState, enhancer) => {
    let persistedState
    let finalInitialState

    try {
      persistedState = deserialize(localStorage.getItem(key))
      finalInitialState = merge(initialState, persistedState)
    } catch (e) {
      console.warn('Failed to retrieve initialize state from localStorage:', e)
    }

    const store = next(reducer, finalInitialState, enhancer)
    const slicerFn = slicer(paths)

    // 主要代碼
    store.subscribe(function () {
      const state = store.getState()
      const subset = slicerFn(state)

      try {
        localStorage.setItem(key, serialize(subset))
      } catch (e) {
        console.warn('Unable to persist state to localStorage:', e)
      }
    })

    return store
  }
}

這個enhancer做的事情其實很簡單，只是在創建store後，立即訂閱了store的變化，當store中的state發生變化時，將state持久化到localStorage。

3. 破壞性enhancer

因爲store enhancer中，我們可以任意複製、改變store中的方法，所以在自定義store enhancer時，有可能會因爲破壞了Redux的正常工作流，導致整個應用無法正常工作。下面就是一個破壞性enhancer的例子：

export default function breakingEnhancer() {
  return createStore => (reducer, initialState, enhancer) => {
    const store = createStore(reducer, initialState, enhancer)
    function dispatch(action) {
      console.log(`dispatch an action: ${JSON.stringify(action)}`);
      console.log(`current state: ${JSON.stringify(newState)}`);
      return res;
    }
    return {...store, dispatch}
  }
}

這個例子重新創建了一個dispatch方法，但在新的dispatch方法中，並沒有調用老的dispatch方法，將action發送出去，導致action無法正常發送，整個應用自然也就無法工作。所以，自定義store enhancer時，一定要注意，不要破壞了Redux的原有工作流。