Redux中間件原理

一、是什麼#

中介軟體（Middleware）是介於應用系統和系統軟體之間的一類軟體，它使用系統軟體所提供的基礎服務（功能），衔接網路上應用系統的各個部分或不同的應用，能夠達到資源共享、功能共享的目的

在上篇文章中，了解到了Redux整個工作流程，當action發出之後，reducer立即算出state，整個過程是一個同步的操作

那麼如果需要支持異步操作，或者支持錯誤處理、日誌監控，這個過程就可以用上中介軟體

Redux中，中介軟體就是放在就是在dispatch過程，在分發action進行攔截處理，如下圖：

其本質上一個函數，對store.dispatch方法進行了改造，在發出 Action 和執行 Reducer 這兩步之間，添加了其他功能

二、常用的中介軟體#

有很多優秀的redux中介軟體，如：

redux-thunk：用於異步操作
redux-logger：用於日誌記錄

上述的中介軟體都需要通過applyMiddlewares進行註冊，作用是將所有的中介軟體組成一個陣列，依次執行

然後作為第二個參數傳入到createStore中

const store = createStore(
  reducer,
  applyMiddleware(thunk, logger)
);

redux-thunk#

redux-thunk是官網推薦的異步處理中介軟體

預設情況下的dispatch(action)，action需要是一個JavaScript的物件

redux-thunk中介軟體會判斷你當前傳進來的資料型別，如果是一個函數，將會給函數傳入參數值（dispatch，getState）

dispatch 函數用於我們之後再次派發 action
getState 函數考慮到我們之後的一些操作需要依賴原來的狀態，用於讓我們可以獲取之前的一些狀態

所以 dispatch 可以寫成下述函數的形式：

const getHomeMultidataAction = () => {
  return (dispatch) => {
    axios.get("http://xxx.xx.xx.xx/test").then(res => {
      const data = res.data.data;
      dispatch(changeBannersAction(data.banner.list));
      dispatch(changeRecommendsAction(data.recommend.list));
    })
  }
}

redux-logger#

如果想要實現一個日誌功能，則可以使用現成的redux-logger


import { applyMiddleware, createStore } from 'redux';
import createLogger from 'redux-logger';
const logger = createLogger();

const store = createStore(
  reducer,
  applyMiddleware(logger)
);

這樣我們就能簡單通過中介軟體函數實現日誌記錄的資訊

三、實現原理#

首先看看applyMiddlewares的原始碼

export default function applyMiddleware(...middlewares) {
  return (createStore) => (reducer, preloadedState, enhancer) => {
    var store = createStore(reducer, preloadedState, enhancer);
    var dispatch = store.dispatch;
    var chain = [];

    var middlewareAPI = {
      getState: store.getState,
      dispatch: (action) => dispatch(action)
    };
    chain = middlewares.map(middleware => middleware(middlewareAPI));
    dispatch = compose(...chain)(store.dispatch);

    return {...store, dispatch}
  }
}

所有中介軟體被放進了一個陣列chain，然後嵌套執行，最後執行store.dispatch。可以看到，中介軟體內部（middlewareAPI）可以拿到getState和dispatch這兩個方法

在上面的學習中，我們了解到了redux-thunk的基本使用

內部會將dispatch進行一個判斷，然後執行對應操作，原理如下：

function patchThunk(store) {
    let next = store.dispatch;

    function dispatchAndThunk(action) {
        if (typeof action === "function") {
            action(store.dispatch, store.getState);
        } else {
            next(action);
        }
    }

    store.dispatch = dispatchAndThunk;
}

實現一個日誌輸出的原理也非常簡單，如下：

let next = store.dispatch;

function dispatchAndLog(action) {
  console.log("dispatching:", addAction(10));
  next(addAction(5));
  console.log("新的state:", store.getState());
}

store.dispatch = dispatchAndLog;