摘要：改地方就是將塞進(jìn)所有的中間件中，然后返回一個(gè)函數(shù)，而中間件的形式后面會(huì)說(shuō)到。流程圖異步信息說(shuō)道這里應(yīng)該會(huì)對(duì)中間件有個(gè)大致的認(rèn)識(shí)，接下來(lái)介紹一下常用的中間件以及自己寫一個(gè)中間件。

用過(guò)react的同學(xué)都知道在redux的存在，redux就是一種前端用來(lái)存儲(chǔ)數(shù)據(jù)的倉(cāng)庫(kù)，并對(duì)改倉(cāng)庫(kù)進(jìn)行增刪改查操作的一種框架，它不僅僅適用于react，也使用于其他前端框架。研究過(guò)redux源碼的人都覺(jué)得該源碼很精妙，而本博文就針對(duì)redux中對(duì)中間件的處理進(jìn)行介紹。

在講redux中間件之前，先用兩張圖來(lái)大致介紹一下redux的基本原理：

圖中就是redux的基本流程，這里就不細(xì)說(shuō)。

一般在react中不僅僅利用redux，還利用到react-redux：

react-redux這里也不細(xì)說(shuō)。

redux中間件
一般情況下，redux是不具備處理異步請(qǐng)求的能力，稚嫩溝通過(guò)間接或者添加中間件的方式，加強(qiáng)了對(duì)dispatch的能力，是的redux具備異步的能力；
一般來(lái)說(shuō)，redux處理異步的方式有兩種：間接方式和中間件方式；

間接方式：

間接方式就死自定義異步的行為，保留dispatch同步的功能。
思路：就是講異步返回的結(jié)果塞進(jìn)action中，然后在通過(guò)dispatch同步到reduce中，再改變state；

demo:

request.get(API)
       .then(d => {
           store.dispatch(type: xxx, playload: d)
       })

這種方式?jīng)]有破壞dispatch的同步機(jī)制，原汁原味的使用dispatch將數(shù)據(jù)同步到state中，但不好的地方就是每次調(diào)用都會(huì)寫很長(zhǎng)的一段。

中間件方式

中間件方式中核心部分就是redux提供的applyMiddleWare這個(gè)高階函數(shù)，它通過(guò)多層調(diào)用后悔返回一個(gè)全新的store對(duì)象，全新的store對(duì)象和原來(lái)對(duì)象中，唯一的不同就是dispatch具備了異步的功能；
源碼：

const applyMiddleWare = (...middlewares) => createStore => (reducer, initState) =>{
    const store = createStore(reducer, initState);
    const _dispatch = store.dispatch;
    const MiddleWareAPI = {
        getState: store.getState,
        dispatch: action => _dispatch(action)   1）
    };
    const chain = [];
    chain = middlewares.map(middleware => {middleware(MiddleWareAPI)});  2）
    let dispatch = compose(...chain)(store.dispatch);   3）
    return {
        dispatch,
        ...store
    }
}

短短十幾行代碼，其中卻蘊(yùn)含著不少精妙之處，博主選擇了其中三處地方進(jìn)行分析其精妙之處:
1）MiddleWareAPI主要是通過(guò)塞進(jìn)中間件，從而最終塞進(jìn)action中，讓action能具備dispatch的能力，而這里為什么要用匿名函數(shù)，主要原因是因?yàn)橐孧iddleWareAPI.dispatch中的store和applyMiddleWare最終返回的store保持一致，要注意的是MiddleWareAPI.dispatch不是真正讓state改變，它可以理解為是action和中間件的一個(gè)橋梁。

2）改地方就是將MiddleWareAPI塞進(jìn)所有的中間件中，然后返回一個(gè)函數(shù)，而中間件的形式后面會(huì)說(shuō)到。

3）該地方是最為精妙之處，compose會(huì)將chain數(shù)組從右到左一次地柜注入到前一個(gè)中間件，而store.dispatch會(huì)注入到最右邊的一個(gè)的中間件。其實(shí)這里可以將compose理解為reduce函數(shù)。
eg：

M = [M1,M2,M3] ----> M1(M2(M3(store.dispatch)));

從這里其實(shí)就知道中間件大致是什么樣子的了：
中間件基本形式：

const MiddleWare = store => next => action => {
    ...
}

參數(shù)解釋：

store：其實(shí)就是MiddleWareAPI；

next: 這里有兩種情況，如果改中間件是在middlewares數(shù)組里最右邊，則next就是store.dispatch;否則就是它相鄰左邊的一個(gè)中間件返回值（閉包函數(shù)，就是action => {}這個(gè)函數(shù)）；

action：可以是函數(shù)，也可以是含有promise的對(duì)象；

到這里可能會(huì)有些糊涂，糊涂的地方可能就是next和store.dispatch的區(qū)別分不清；
區(qū)別：
next（最右邊的中間件）：其實(shí)是真正觸發(fā)reducer，改變state的dispatch，這里的dispatch和state是同步關(guān)系的；這里的action必須是一個(gè)對(duì)象，不能含有異步信息；

next（非最右邊的中間件）：其實(shí)就是相鄰前一個(gè)中間件返回的函數(shù)（action => {...}）;這里的action就是上一級(jí)中間件next（action）中的action，第一個(gè)中間件的action就是項(xiàng)目中store.dispatch(action)中的action。

中間件中的store.dispatch：其實(shí)就是用來(lái)塞進(jìn)action的，這里就理解為action和中間件通信的渠道吧。

流程圖：

demo：

export const MiddleForTest = store => next => action => {
    if (typeof action === "function") {
        action(store);
    } else {
        next(action);
    }
};

export const MiddleForTestTwo = store => next => action => {
    next(action);
};

export function AjaxAction(store) {
    setTimeout(function () {
        store.dispatch({
            type: "up",
            playload: "異步信息"
        })
    }, 1000)
}

store.dispatch(AjaxAction);

說(shuō)道這里應(yīng)該會(huì)對(duì)中間件有個(gè)大致的認(rèn)識(shí)，接下來(lái)介紹一下常用的中間件以及自己寫一個(gè)中間件。

redux-thunk:主要是適用于action是一個(gè)函數(shù)的情況，它是對(duì)原有的中間件模式再封裝多一層，原則上是支持promise為主的action函數(shù)；

export function AjaxThunk (url, type) {
    return dispatch => {
        Ajax(url)
            .then(d => {
                dispatch({
                    type,
                    playload: d
                })
            })
    }
}
store.dispatch(AjaxThunk(url1, "add"));

redux-promise:主要就是針對(duì)action對(duì)象，action對(duì)象是一個(gè)promise的異步請(qǐng)求函數(shù)：

它的大概實(shí)現(xiàn)思路是：

const promiseAction = store => next => action => {
        const {type, playload} = action;
        if (playload && typeof playload.then === "function") {
            playload.then(result => {
                store.dispatch({type, playload: result});
            }).catch(e => {})
        } else {
            next(action);
        }
}

action = {
  type: "xxx",
  playload: Ajax(url)
}

自定義中間件：很多時(shí)候網(wǎng)上的redux中間件可能不太符合項(xiàng)目中的需要，所以這時(shí)候可以自己寫一套適合項(xiàng)目的中間件，以下指示本博主的一個(gè)demo，形式不唯一：

export const PromiseWares = store => next => action => {
    next({type: "right", playload: "loading"});
    if (typeof action === "function") {
        const {dispatch} = store;
        action(dispatch);
    } else {
        const {type, playload} = action;
        if (playload && typeof playload.then === "function") {
            playload.then(result => {
                store.dispatch({type, playload: result});
            }).catch(e => {})
        } else {
            next(action);
            next({type: "right", playload: "noLoading"});
        }
    }
};

以上就是本博主對(duì)redux中間件的理解，如有不對(duì)，請(qǐng)指出。