相信大家都知道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的原有工作流。
歡迎關注我的公眾號：老幹部的大前端，領取21本大前端精選書籍！
