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