龙岩网站建设运营,html页面布局,网站代码 上传 wordpress 空间,最简单网站设计的代码原文链接 middleware 的由来 在业务中需要打印每一个 action 信息来调试#xff0c;又或者希望 dispatch 或 reducer 拥有异步请求的功能。面对这些场景时#xff0c;一个个修改 dispatch 或 reducer 代码有些乏力#xff0c;我们需要一个可组合的、自由增减的插件机制… 原文链接 middleware 的由来 在业务中需要打印每一个 action 信息来调试又或者希望 dispatch 或 reducer 拥有异步请求的功能。面对这些场景时一个个修改 dispatch 或 reducer 代码有些乏力我们需要一个可组合的、自由增减的插件机制Redux 借鉴了 Koa 中 middleware 的思想利用它我们可以在前端应用中便捷地实现如日志打印、异步请求等功能。 比如在项目中进行了如下调用后redux 就集成了 thunk 函数调用以及打印日志的功能。 import thunk from redux-thunk
import logger from ../middleware/logger
const enhancer applyMiddleware(thunk, logger), // 以 redux-thunk、logger 中间件为例介绍中间件的使用
const store createStore(rootReducer, enhancer)
复制代码下面追本溯源来分析下源码。 applyMiddleware 调用入口 export default function createStore(reducer, preloadedState, enhancer) {// 通过下面代码可以发现如果 createStore 传入 2 个参数第二个参数相当于就是 enhancerif (typeof preloadedState function typeof enhancer undefined) {enhancer preloadedStatepreloadedState undefined}if (typeof enhancer ! undefined) {return enhancer(createStore)(reducer, preloadedState)}...
}
复制代码由上述 createStore 源码发现applyMiddleware 会进行 applyMiddleware(thunk, logger)(createStore)(reducer, preloadedState) 的调用。 applyMiddleware 源码如下 export default function applyMiddleware(...middlewares) {return createStore (...args) {const store createStore(...args)let dispatch store.dispatchlet chain []const middlewareAPI {getState: store.getState, // 调用 redux 原生方法获取状态dispatch: (...args) dispatch(...args) // 调用 redux 原生 dispatch 方法}// 串行 middlewarechain middlewares.map(middleware middleware(middlewareAPI))dispatch compose(...chain)(store.dispatch)return {...store,dispatch // 返回加工过的 dispatch}}
}
复制代码可以发现 applyMiddleware 的作用其实就是返回加工过的 dispatch下面会着重分析 middlewares 是如何串行起来的以及 dispatch 是如何被加工的。 串行 middleware const middlewareAPI {getState: store.getState,dispatch: (...args) dispatch(...args)
}
chain middlewares.map(middleware middleware(middlewareAPI))
dispatch compose(...chain)(store.dispatch)
复制代码观察上述代码后发现每个 middleware 都会传入参数 middlewareAPI来看下中间件 logger 的源码 以及 redux-thunk 的源码, 发现中间件接受的第一个参数正是 ({ dispatch, getState }) // logger 源码
export default ({ dispatch, getState }) next action {console.log(action)return next(action) // 经 compose 源码分析此处 next 为 Store.dispatch
}
复制代码// redux-thunk 源码
export default ({ dispatch, getState }) next action {if (typeof action function) {return action(dispatch)}return next(action) // 此处 next 为 logger 中间件返回的 (action {} 函数
}
复制代码dispatch 是如何被加工的 接着上个小节在 dispatch compose(...chain)(store.dispatch) 中发现了 compose 函数来看下 compose 的源码 export default function compose(...funcs) {// ...return funcs.reduce((a, b) (...args) a(b(...args)))
}
复制代码compose 源码中的 funcs.reduce((a, b) (...args) a(b(...args))) 算是比较重要的一句它的作用是返回组合参数后的函数比如 compose(f, g, h) 等价于 (...args) f(g(h(...args)))效果图如下所示调用 this.props.dispatch() 后会调用相应的中间件最终会调用 redux 原生的 store.dispatch()并且可以看到中间件调用的形式类似数据结构中的栈(先进后出)。 拿上个小节提到的 logger、redux-thunk 中间件为例其 middleware 的内部串行调用方式如下从而完成了 dispatch 功能的增强(支持如 this.props.dispatch(func) 的调用以及日志功能)。具体可以看 项目中的运用 action {if (typeof action function) {return action(dispatch)}return (action {console.log(action)return store.dispatch(action)})(action)
}
复制代码参考文献 深入React技术栈
