react 中间件相关的一些源码解析
零、随便说说中间件
在react的使用中,我们可以将数据放到redux,甚至将一些数据相关的业务逻辑放到redux,这样可以简化我们组件,也更方便组件抽离、封装、复用,只是redux不能很好的处理异步,当我们获取接口数据的时候,redux就满足不了我们的需要。然后,中间件就出来了,使用中间件可以满足我们异步获取数据,当然也可以干其他的事;
我们都知道一个数据更新,经过component >> action >> dispatch >> reducers >> state >> store >> component,这样一个过程。其实,中间件的本质就是 把异步的这种情况单独的拿出来处理,然后还是把数据经过redux处理了。也就是说做中间件的关键是先把正常的action 和 异步的action 区分出来,从上边的流程看也只能是action >> dispatch 这一步了。
下边看看中间件相关的一些源码,从createstore开始:
一、createstore
const createstore = (reducers, initialstate, enhancer) => {
if (typeof initialstate === 'function' && typeof enhancer === 'undefined') {
enhancer = initalstate;
initialstate = undefined; }
if (typeof enhancer !== 'undefined') { if (typeof enhancer !== 'function') { //校验enhancer是否为函数,如果不是函数则抛出异常 throw new error('expected the enhancer to be a function.') } //如果enhancer存在且为函数,那么则返回如下调用,如果enhancer为applymiddleware,那么调用则 //是applymiddleware(createstore)(reducer, preloadedstate)。后面讲applymiddleware再详细讲。 return enhancer(createstore)(reducer, preloadedstate) }
....
// 下边就是没有中间件的时候,返回一些state的方法如:getstate, dispatch...
}
这就是做了个区分,有中间件和没中间件的区分,有中间件返回的是中间件代码:enhancer(createstore)(reducer, preloadedstate),没有就直接返回一些方法;
二、applymiddleware
const applymiddleware = (...middlewares) => (createstore) => (reducer, initial, enhancer) => { const store = createstore(reducer, initial, enhancer); let dispatch = store.dispatch; let chain = []; const middlewareapi = { getstate: store.getstate, dispatch: (action) => dispatch(action) }; chain = middlewares.map(middleware => middleware(middlewareapi));// a dispatch = compose(...chain)(store.dispatch); // b return { ...store, dispatch }; }
看名字就可以知道这是应用中间件的一个方法,他是将中间件 middlewares 和 store 结合返回一个新的store对象,实际上是对 dispatch 的重写;
结合上边的 createstore 源码我们可以看到,当有中间件的时候 createstore 返回的实际上就是 applymiddleware 的一个执行结果,从参数看是从第二层的方法开始的,那是因为,我们在执行 createstore之前,会有下面的一步操作:
const enhancer = compose(applymiddleware(...middlewares)) const store = createstore(reducer, enhancer)
其实可以看到在 applymiddleware 中利用 createstate 重新生成了 store,并对 dispatch 进行了重写:先将每一个中间件都执行一次,参数是 middlewareapi ,然后将返回的数组, 借助于 compose,以原生 dispatch 为参数执行,返回新的 dispatch,最后替换 store 里的 dispatch 并作为新的 store 返回;这个返回结果实际上就是 createstore 中,有中间件传入时的返回结果。
可能会对 dispatch 重写的过程会不太清楚,下边看看 compose 源码:
三、compose
const compose = (...middlewares) => { if (middlewares.length === 0) { return arg => arg; } else { const last = middlewares[middlewares.length - 1]; const reset = middlewares.slice(0, -1); return (args) => rest.reduceright((composed, f) => f(composed), last(args)) } }
结合着 applymiddleware 看这个源码会更好没理解一点。(reducerright 方法不熟的朋友,百度一下)
当传入中间件数组的时候,返回的是一个带参数的方法, 参数就是相当于上面的 dispatch ,取出最后一个中间件执行,并最为 reducerright 的 初始值,执行reducerright 方法;
四、中间件的方法 middleware
const middleware = ({ state, dispatch}) => (next) => (action) => { if (typeof action === 'funtion') { return net(action); } dispatch(action); }
中间件的本质:判断你要处理的情况,执行你想要执行的方法,如果是异步,我们 action 通常是方法,所以就执行next,如果不是异步执行的就是原生 dispatch;
中间件的第一层是在 applymiddleware 中执行的(标注a处),第二层是 applymiddleware 中 compose 中执行的(标注b处),其实 next 就是原生的 dispatch 或者已经重写的 dispatch (即 middleware 中最后一层的方法);
五、没有了
到目前为止这个中间件相关的源码算是搞完了,理解这些感觉写个中间件基本上没问题,推荐看看 redux-thunk 源码其实很简单,和第四步的差不多;
有一个中间件的小dome:https://github.com/wayaha/react-demos-middleware
敢不敢点个星!!!
推荐阅读
-
react 中间件相关的一些源码解析
-
redux 中间件 --- applyMiddleware 源码解析 + 中间件的实战
-
JDK源码分析--String的一些解析
-
【Android 异步操作】Handler 机制 ( Android 提供的 Handler 源码解析 | Handler 构造与消息分发 | MessageQueue 消息队列相关方法 )
-
react源码解析:在react中workInProgress Fiber 树存在的意义
-
redux 中间件 --- applyMiddleware 源码解析 + 中间件的实战
-
react 中间件相关的一些源码解析
-
react源码解析:在react中workInProgress Fiber 树存在的意义
-
通过源码来解析Laravel依赖注入的相关内容
-
通过源码来解析Laravel依赖注入的相关内容