React系列-Redux中間件

redux-logger

打印日誌中間件

let reduxLogger = (store) => (dispatch) => (action) =>{
        console.log(store.getState())
        dispatch(action)
        console.log(store.getState())
    }
複製代碼

redux-thunk

處理異步請求

let reduxThunk = (store) => (dispatch) => (action) =>{
        if(typeof action =='function'){
            return action(dispatch,store.getState)
        }
        dispatch(action)
    }
複製代碼

redux-promise

處理promise

let reduxPromise =  (store) => (dispatch) => (action) =>{
        let reduxPromise = (store) => (dispatch)=> (action)=>{
          if(action.then && typeof action.then === 'function'){
            // 若是返回的是一個promise 那麼不會處理失敗邏輯
            return action.then(dispatch)
           }
           if(action.payload && action.payload.then&& typeof action.payload.then ==='function'){
             return action.payload.then(function(data){
               action.payload = data;
                 dispatch(action);
             },function(err){
                 action.payload = err;
                 dispatch(action);
                 return Promise.reject(err);
             })
           }
           return dispatch(action);
         }
    }
複製代碼

applyMiddlewares

let applyMiddlewares = (middlewares)=>(createStore)=>(reducer)=>{
        let store = createStore(reducer);
        let chain = middlewares.map(middleware=>middleware(store))
        dispatch = compose(...chain)(store.dispatch);
        return {
            ...store,
            dispatch
        }
    }
    
    // compose
    let compose = (funcs)=>{
        return funcs.reduce((a,b)=>(...args)=>a(b(...args)))
    }
複製代碼

簡要總結

• redux 中間件都是一共返回三階函數分別傳遞參數store、dispatch(源碼裏面是next)、action。
• applymiddleware 也是一共三階函數，分別傳遞參數爲middlewares、createStore、reducer。內部實現爲先經過createStore和reducer獲取store，而後middleware執行傳遞store，中間件組合執行傳遞store.dispatch生成強化後的dispatch,最後覆蓋以前老的dispatch