注册 留言板
当前位置:首页 > 前端开发 > 其它 > 正文

redux的中间件(middleware)

来源:CSDN   发布时间: 2017-06-19   作者:zhaoruda   浏览次数:
摘要: applyMiddleware的实现 首先我们来看下applyMiddleware源码实现,代码如下所示: export default function applyMiddleware(.....

applyMiddleware的实现

首先我们来看下applyMiddleware源码实现,代码如下所示:

export default function applyMiddleware(...middlewares) {
  return (createStore) => (reducer, preloadedState, enhancer) => {
    var store = createStore(reducer, preloadedState, enhancer)
    var dispatch = store.dispatch
    var chain = []

    var middlewareAPI = {
      getState: store.getState,
      dispatch: (action) => dispatch(action)
    }
    chain = middlewares.map(middleware => middleware(middlewareAPI))
    dispatch = compose(...chain)(store.dispatch)

    return {
      ...store,
      dispatch
    }
  }
}

其中:
1、applyware执行完成后会返回一个闭包,该闭包接受的参数为createStore。这个闭包会在createStore方法中被执行。这样就可以在所有的middleware中共享store了。
2、compose方法会基于middlewares和store.dispatch生成一个新的dispatch。
3、最终用新生成的dispatch来替换store中原有的dispatch。
由上可知,其中最关键的也就是compose方法:

export default function compose(...funcs) {
  if (funcs.length === 0) {
    return arg => arg
  }

  if (funcs.length === 1) {
    return funcs[0]
  }

  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

其中args参数为store.dispatch,而且每个middleware在定义时也可以接收dispatch参数,具体见中间件的结构。

参照文档可知,[0, 1, 2, 3, 4].reduce( (prev, curr) => prev + curr ) 的执行如下:
这里写图片描述
最后一次函数调用的返回值 (10) 作为reduce函数的结果被返回。

中间件的结构

中间件的结构如下:

function ({getState, dispatch}) {
    return function (next) {
        return function (action) {...}
    }
}

applyMiddleware中的middlewares.map执行后,中间件返回为:

function (next) {
        return function (action) {...}
    }

当compose执行完毕后,就会生成新的dispatch。在每个中间件中可以基于自己的判断,action是否交个下一个middleware去处理,还是自己处理完毕后直接调用dispatch。

中间件的执行过程

假设我们有3个中间件A、B、C,

A = ({dispatch}) => next => action => {
     if(conditionA){
     return dispatch(action)
     }
     return next(action);
}
B = ({dispatch}) => next => action => {
     if(conditionB){
     return dispatch(action)
     }
     return next(action);
}
C = ({dispatch}) => next => action => {
     if(conditionC){
     return dispatch(action)
     }
     return next(action);
}

则最终生成的dipatch类似与:

newDispatch = action => {
     if(conditionA){
         return dispatch(action)
     }
     return (action) => {
         if(conditionB){
            return dispatch(action)
          }
         return (action) => {
         if(conditionC){
            return dispatch(action)
          }
         return next(action); //这时,C中的next为store.dispatch
        }
}

这样,在中间件中就可以判断如何对action进行处理。



中间件 redux
我来说两句
评论内容:
验  证  码:
 
(网友评论仅供其表达个人看法,并不表明本站同意其观点或证实其描述。)
评论列表
已有 0 条评论(查看更多评论)
精彩专题
友情链接:
QQ交流群:①群 155252576 ②群 469193068 ③群 531831996 ④群 243504572
设为首页 - 加入收藏 Copyright @2016 Infocool 版权所有 粤ICP备16000626号