溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
用過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 => {
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 => {
...
}
參數解釋：
到這里可能會有些糊涂，糊涂的地方可能就是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和中間件通信的渠道吧。
流程圖：
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中間件的理解，如有不對，請指出。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
