前言
提到中介軟體，你可能會想到Express和Koa等服務端框架，沒想到也沒關係，這句話是我裝逼用的。
那麼redux中的中介軟體到底幹嘛用的？
有這樣一個問題？我們之前用的Redux都是在Action發出之後立即執行Reducer,計算出state,這是同步操作。如果想非同步操作呢？即過一段時間再執行Reducer怎麼辦？這裡就需要用到中介軟體middleware。
先放一張圖看看：
一、中介軟體的概念
redux是有流程的，那麼，我們該把這個非同步操作放在哪個環節比較合適呢？
Reducer?純函式只承擔計算State功能，不適合其它功能。View?與State一一對應，可以看做是State的視覺層，也不適合承擔其它功能。Action？它是一個物件，即儲存動作的載體，只能被操作。
其實，也只有dispatch能勝任此重任了。那麼怎麼在dispatch中新增其它操作呢？
let next = store.dispatch;
store.dispatch = function(action){
console.log('老狀態 ',store.getState());
next(action);
console.log('新狀態 ',store.getState());
}
複製程式碼示例中可以看出，我們對store.dispatch重新進行了定義，在傳送action的前後，做了列印。
這是中介軟體的大致雛形，真實的中介軟體要比這麼複雜多了
二、中介軟體的用法
我們在這裡先看看中介軟體是怎麼使用，下面我們一步步剖析每個細節。
import {applyMiddleware,createStore} from 'redux';
import reduxLogger form 'redux-logger';
const store = createStore(reducer,inital_state,applyMiddleware(thunk, promise,reduxLogger));
複製程式碼程式碼中有兩點需要注意：
- 1、
createStore方法可以整個應用的初始狀態作為引數 內部是這麼處理的
let state = inital_state;
複製程式碼- 2、中介軟體的引數次序有講究。下面我會把這個問題講明白。
三、applyMiddleware
Middleware可以讓你包裝store的dispatch方法來達到你想要的目的。同時，middleWare還擁有“可組合”這一關鍵特性。多個middleWare可以被組合到一起使用，形成middleWare鏈，依次執行。其中每個middleware不需要關心鏈前後的的middleWare的任何資訊。
function applyMiddleware(...middlewares){
return function(createStore){
return function(reducer){
//引入store
let store = createStore(reducer);
let dispatch = store.dispatch;
let middlewareAPI = {
getState:store.getState,
// 對dispatch進行包裝
dispatch:action=>dispatch(action)
}
//每個中介軟體都是這種模型 ({ getState, dispatch }) => next => action
chain = middlewares.map(middleware=>middleware(middleAPI));
dispatch = compose(...chain)(store.dispatch);
// dispatch被改裝後，返回store
return{...store,dispatch};
}
}
}
複製程式碼上面程式碼中，所有中介軟體都被放進了一個陣列chain,然後巢狀執行，最後執行store.dispatch。中介軟體內部middlewaAPI可以拿到getState和dispatch這兩個方法。
...middleware：遵循Redux middleware API的函式。每個middleware接受Store的dispatch和getState函式作為命名引數，並返回一個函式。該函式會被傳入成為next的下一個middleWare 的dispatch方法，並返回一個接收action的新函式，這個函式可以直接呼叫next(action)，或者在其他需要的時刻呼叫，甚至根本不去呼叫它。
所以，接下來，我們就能看到middleware的函式簽名是({ getState, dispatch }) => next => action
其實，它的本質就是包裝sotre中的dispatch。
上面程式碼中，還用到了compose方法，我們來看看compose是怎麼是實現的？
compose
先看下面一個栗子：
function add1(str){
return str+1;
}
function add2(str){
return str+2;
}
function add3(str){
return str+3;
}
let result = add3(add2(add1('好吃')));// 好吃123;
複製程式碼這中寫法呼叫起來，一層套一層，是不是看著很不爽，我們簡化一下：
function compose(...fns){
if(fns.length==1)
return fns[0];
return function(...args){
let last = fns.pop();
return fns.reduceRight((prev,next)=>{
return next(prev);
},last(...args));
}
}
let add = compose(add3,add2,add1);//
let result = add('好吃');// 好吃123
// 上面的程式碼其實就是redux3.6.0版本中compose的實現方式
複製程式碼看看這個程式碼是不是用起來，很乾練一些。其實還可以簡化
function compose(...fns){
if(fns.length==1)
return fns[0];
return fns.reduce((a,b)=>(...args)=>a(b(...args)));//add3(add2(add1('好吃')))
}
let add = compose(add3,add2,add1);//
let result = add('好吃');// 好吃123
// 這是redux3.6.0版本之後的compose實現方式，一直沿用至今。
複製程式碼至於為什麼applyMiddleWare的引數有順序，這裡給出了答案。
四、Applymiddleware的三個常用引數
4.1、日誌記錄
使用 Redux 的一個益處就是它讓 state 的變化過程變的可預知和透明。每當一個 action 發起完成後，新的 state 就會被計算並儲存下來。State 不能被自身修改，只能由特定的 action 引起變化。
試想一下，當我們的應用中每一個 action 被髮起以及每次新的 state 被計算完成時都將它們記錄下來，豈不是很好？當程式出現問題時，我們可以通過查閱日誌找出是哪個 action 導致了 state 不正確。
圖片的效果是不是很期待啊！！！
我們先來手動實現一版。
// 記錄所有被髮起的action和新的state
let next = store.dispatch;
store.dispatch = function(action){
console.log('老狀態 ',store.getState());
next(action);
console.log('新狀態 ',store.getState());
}
複製程式碼還是上面的示例，我們來做個修改
let logger = function({ getState, dispatch }){
return function(next){// 這裡的next可以理解為store.dispath,本質上就是呼叫 middleware 鏈中下一個 middleware 的 dispatch。
return function(action){
console.log('老狀態1 ',getState());
next(action);//派發動作
console.log('新狀態1 ',getState());
}
}
}
// 高逼格寫法
let logger = ({ getState, dispatch }) => next => action => {
console.log('老狀態1 ',getState());
next(action)
console.log('新狀態1 ',getState());
}
複製程式碼4.2、redux-thunk 中介軟體
redux-thunk 是redux官方文件中用到的非同步元件，實質就是一個redux中介軟體，一個封裝表示式的函式，封裝的目的就是延遲執行表示式。
redux-thunk是一個通用的解決方案，其核心思想是讓action可以變成一個thunk，這樣的話，同步情況：dispatch(action),非同步情況：dispatch(thunk)。
下面是redux-thunk的實現：
let thunk = ({dispatch,getState})=>next=>action=>{
if(typeof action == 'function'){
action(dispatch,getState);
}else{
next(action);//這裡可以理解為dispatch(action),本質上就是呼叫 middleware 鏈中下一個 middleware 的 dispatch。
}
}
複製程式碼使用redux-thunk
const store = createStore(
reducer,
applyMiddleware(thunk)
);
複製程式碼然後我們實現一個thunkActionCreator
//過一秒加1
export function thunkActionCreator(payload){
return function(dispatch,getState){
setTimeout(function(){
dispatch({type:types.INCREMENT,payload:payload});
},1000);
}
},
複製程式碼最後，在元件中dispatch thunk
this.dispatch(thunkActionCreator(payload));
複製程式碼4.3、redux-promise
redux-promise也是延遲執行的表示式，它是解決非同步的另外一種方案。
redux-thunk和核心思想是把action變成thunk，而redux-promise的核心思想是讓action返回一個promise物件。
這個中介軟體使得store.dispatch方法可以接收Promise物件作為引數。這時 ，action 有兩種寫法:
寫法一、返回值是一個Promise物件。
function promiseIncrement(payload){
// return {type:types.INCREMENT,payload:payload} 以前是這種寫法
return new Promise(function(resolve,reject){
setTimeout(function(){
resolve({type:types.INCREMENT,payload:payload});
},1000);
});
},
複製程式碼寫法二，action 物件的payload屬性是一個Promise物件，這需要從
function payloadIncrement(){
return {
type:types.INCREMENT,
payload: new Promise(function(resolve,reject){
setTimeout(function(){
if(Math.random()>.5){
resolve(100);
}else{
reject(-100);
}
},1000)
})
}
}
複製程式碼下面我們來看看 redux-promise是怎麼實現的，就會明白它內部是怎麼操作的.
let promise = ({dispatch,getState})=>next=>action=>{
if(action.then && typeof action.then == 'function'){
action.then(dispatch);
// 這裡的dispatch就是一個函式，dispatch(action){state:reducer(state,action)};
}else if(action.payload&& action.payload.then&& typeof action.payload.then == 'function'){
action.payload.then(payload=>dispatch({...action,payload}),payload=>dispatch({...action,payload}));
}else{
next(action);
}
}
複製程式碼上面的程式碼可以看出，如果Action本身就是一個Promise，它resolve以後的值應該是一個Action物件，會被dispatch方法送出action.then(dispatch)；如果Action物件的 payload屬性是一個Promise物件，那麼無論resolve和reject,dispatch 方法都會發出Action。