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...
}

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpswyj.html