React系列-Redux中间件

243 阅读1分钟

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