簡單介紹redux的中介軟體

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

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

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

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

react-redux這裡也不細說。

redux中介軟體

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

一般來說，redux處理非同步的方式有兩種：間接方式和中介軟體方式；

間接方式就死自定義非同步的行為，保留dispatch同步的功能。

思路：就是講非同步返回的結果塞進action中，然後在通過dispatch同步到reduce中，再改變state；

demo:

request.get(api)
.then(d => )

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

const store = createstore(reducer, initstate);

const _dispatch = store.dispatch;

const middlewareapi = ;

const chain = ;

chain = middlewares.map(middleware => ); 2）

let dispatch = compose(...chain)(store.dispatch); 3）

return }

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

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

eg：

m = [m1,m2,m3] ----> m1(m2(m3(store.dispatch)));

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

中介軟體基本形式：

const middleware = store => next => action =>

引數解釋：

store：其實就是middlewareapi；

next: 這裡有兩種情況，如果改中介軟體是在middlewares陣列裡最右邊，則next就是store.dispatch;否則就是它相鄰左邊的乙個中介軟體返回值（閉包函式，就是action => {}這個函式）；

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和中介軟體通訊的渠道吧。

流程圖：

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

export function ajaxthunk (url, type) )})}
}store.dispatch(ajaxthunk(url1, 'add'));

它的大概實現思路是：

const promiseaction = store => next => action =>  = action;
if (playload && typeof playload.then === 'function') );
}).catch(e => {})
} else 
}action =

export const promisewares = store => next => action => );
if (typeof action === 'function') = store;
action(dispatch);
} else = action;
if (playload && typeof playload.then === 'function') );
}).catch(e => {})
} else );}}
};

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

簡單介紹redux的中介軟體

redux 中介軟體 redux thunk

redux中介軟體原理

redux中介軟體剖析

簡單介紹redux的中介軟體

redux 中介軟體 redux thunk

redux中介軟體原理

redux中介軟體剖析

相關推薦