簡單介紹redux的中介軟體

DragonChen發表於2018-04-05
Redux

用過react的同學都知道在redux的存在，redux就是一種前端用來儲存資料的倉庫，並對改倉庫進行增刪改查操作的一種框架，它不僅僅適用於react，也使用於其他前端框架。研究過redux原始碼的人都覺得該原始碼很精妙，而本博文就針對redux中對中介軟體的處理進行介紹。

在講redux中介軟體之前，先用兩張圖來大致介紹一下redux的基本原理：

clipboard.png

圖中就是redux的基本流程，這裡就不細說。

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

clipboard.png

react-redux這裡也不細說。

redux中介軟體
一般情況下，redux是不具備處理非同步請求的能力，稚嫩溝通過間接或者新增中介軟體的方式，加強了對dispatch的能力，是的redux具備非同步的能力；
一般來說，redux處理非同步的方式有兩種：間接方式和中介軟體方式；

  • 間接方式：

間接方式就死自定義非同步的行為，保留dispatch同步的功能。
思路：就是講非同步返回的結果塞進action中，然後在通過dispatch同步到reduce中，再改變state；

clipboard.png

demo:

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

這種方式沒有破壞dispatch的同步機制，原汁原味的使用dispatch將資料同步到state中，但不好的地方就是每次呼叫都會寫很長的一段。

  • 中介軟體方式

中介軟體方式中核心部分就是redux提供的applyMiddleWare這個高階函式，它通過多層呼叫後悔返回一個全新的store物件，全新的store物件和原來物件中，唯一的不同就是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
    }
}

短短十幾行程式碼，其中卻蘊含著不少精妙之處，博主選擇了其中三處地方進行分析其精妙之處:
1）MiddleWareAPI主要是通過塞進中介軟體，從而最終塞進action中，讓action能具備dispatch的能力，而這裡為什麼要用匿名函式，主要原因是因為要讓MiddleWareAPI.dispatch中的store和applyMiddleWare最終返回的store保持一致，要注意的是MiddleWareAPI.dispatch不是真正讓state改變，它可以理解為是action和中介軟體的一個橋樑。

2）改地方就是將MiddleWareAPI塞進所有的中介軟體中，然後返回一個函式，而中介軟體的形式後面會說到。

3）該地方是最為精妙之處，compose會將chain陣列從右到左一次地櫃注入到前一箇中介軟體，而store.dispatch會注入到最右邊的一個的中介軟體。其實這裡可以將compose理解為reduce函式。
eg：

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

從這裡其實就知道中介軟體大致是什麼樣子的了：
中介軟體基本形式：

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

引數解釋：

  1. store：其實就是MiddleWareAPI；
  2. next: 這裡有兩種情況，如果改中介軟體是在middlewares陣列裡最右邊，則next就是store.dispatch;否則就是它相鄰左邊的一箇中介軟體返回值（閉包函式，就是action => {}這個函式）；
  3. action：可以是函式，也可以是含有promise的物件；

到這裡可能會有些糊塗，糊塗的地方可能就是next和store.dispatch的區別分不清；
區別：
next（最右邊的中介軟體）：其實是真正觸發reducer，改變state的dispatch，這裡的dispatch和state是同步關係的；這裡的action必須是一個物件，不能含有非同步資訊；

next（非最右邊的中介軟體）：其實就是相鄰前一箇中介軟體返回的函式（action => {...}）;這裡的action就是上一級中介軟體next（action）中的action，第一個中介軟體的action就是專案中store.dispatch(action)中的action。

中介軟體中的store.dispatch：其實就是用來塞進action的，這裡就理解為action和中介軟體通訊的渠道吧。

流程圖：

clipboard.png

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);

說道這裡應該會對中介軟體有個大致的認識，接下來介紹一下常用的中介軟體以及自己寫一箇中介軟體。

  • redux-thunk:主要是適用於action是一個函式的情況，它是對原有的中介軟體模式再封裝多一層，原則上是支援promise為主的action函式；
export function AjaxThunk (url, type) {
    return dispatch => {
        Ajax(url)
            .then(d => {
                dispatch({
                    type,
                    playload: d
                })
            })
    }
}
store.dispatch(AjaxThunk(url1, 'add'));
  • redux-promise:主要就是針對action物件，action物件是一個promise的非同步請求函式：

它的大概實現思路是：

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)
}
  • 自定義中介軟體：很多時候網上的redux中介軟體可能不太符合專案中的需要，所以這時候可以自己寫一套適合專案的中介軟體，以下指示本博主的一個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'});
        }
    }
};

以上就是本博主對redux中介軟體的理解，如有不對，請指出。

相關文章