对于Redux源码的一些理解

Redux很早前看过源码，不得不说Redux是一个有用的架构，接触过Redux对于以后理解React-Redux有很大的帮助。最近学习了一段时间后打算从新学习下，一方面为了总结和概括，另外一方面分享给你们，若是有什么不足之处但愿各位大牛的纠错和指正。本文主要包含以下几个分析点：

• applyMiddleware
• compose
• thunk中间件

// 该文件的核心函数部分共传入了三个参数
// reducer, preloadedState, enhancer
function createStore(reducer, preloadedState, enhancer){
    ...
    if (typeof enhancer !== 'undefined') {
        return enhancer(createStore)(reducer, preloadedState)
    }
    ...
}
复制代码

createStore方法的做用是用来建立一个仓库来存放state，subscribe，reducer以及dispatch，state用来存放数据的地方，经过store.getState()来获取；subscribe用来加入监听函数，当页面数据改变的时候会进行触发，dispatch用来派发action，根据不一样的类型匹配不一样的reducer，继而进行state数据的更新，具体能够参考阮一峰老师的博客 Redux 入门教程。

其中enhancer函数的做用顾名思义就是用来扩展增强的，这个函数的存在使得能够随意的加入早就想要的中间件，从而更加方便快捷，这里的增强函数主要是applyMiddleware。

applyMiddleware

这里使用连续箭头函数，简单明了更重要的一点是造成了闭包，闭包的存在使得内部的变量能够很自由的访问外部被多个return嵌套的变量, 从而使得每一个中间件都得到middlewareAPI参数，引用外部的dispatch变量，这样避免了若是存在一个中间件修改了dispatch致使后面一系列的问题。

export default function applyMiddleware(...middlewares) {
  return (createStore) => (reducer, preloadedState, enhancer) => {
    // 建立仓库
    const store = createStore(reducer, preloadedState, enhancer)
    let dispatch = store.dispatch
    let chain = []

    const middlewareAPI = {
      getState: store.getState,
      dispatch: (action) => dispatch(action) // 经过闭包引用外部的dispatch变量
    }
    // 将middlewareAPI传入中间件，使得每一个中间件都得到{getState,dispatch}参数，而因为闭包的缘由，咱们就能够在中间件当中获取最新的store以及引用外部更新的dispatch变量。
    // @return 返回包含(next) => (action) => {....}的数组
    chain = middlewares.map(middleware => middleware(middlewareAPI))
    // 建立加强功能的dispatch
    dispatch = compose(...chain)(store.dispatch)

    return {
      ...store,
      dispatch
    }
  }
}
复制代码

thunk中间件

以thunk中间件为例，当须要派发的action是异步函数而不是对象的时候须要这个中间件，则此时chain即为 [(next)=>(action)=>{...}, ....]， 若是action为函数则直接执行该函数，而且传入 dispatch和 getSate这两个参数，不然执行next方法直到最后next函数为dispatch进行action派发。

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }

    return next(action);
  };
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;
复制代码

compose

理解compose方法首先须要了解reduce，reduce()方法接收一个函数做为累加器，数组中的每一个值（从左到右）开始缩减，最终计算为一个值，因此最终的形式是a(b(c(d...(...args))))。

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)))
}
复制代码

以前chain返回包含(next) => {...}的thunk，logger中间件数组，从而获得a_middleware方法里的next方法就是b_middleware，b_middleware方法里的next方法是c_middleware，以此类推，根据applyMiddleware.js中compose(...chain)(store.dispatch)以及chain返回值能够知道, 最后的next参数是dispatch，大概步骤以下:

• 第一步：当咱们把store.dispatch传入c_middleware时，这时就把store.dispatch传给了 c_middleware的next变量，返回一个(action)=>{next=store.dispatch}^[1]函数；
• 第二步：接下来就是把[1]传给b_middleware的中间件的next，这时候中间件b_middleware内部的next就变成(action)=>{[1]}^[2], 当执行b_middleware的时候，会进入c_middleware；
• 第三步：接下来就是把[2]的结果传递给a_middleware, (action)=>(action)=>{[1]}传递给a-middleware的next变量，当执行a_middleware的时候会进入b_middleware。

从下面大概例子能够看出disatch: (...args) => dispatch(...args)的好处，dispatch随时随地随着dispatch = compose(...chain)(store.dispatch)更新而更新，从而当传入为方法的时候，也不会忽略其余中间件，再次dispatch的时候会流过全部thunk以后的中间件。

1.
a_middleware(b_middleware){
    ...
    b_middleware = (action) => (action) => {store.dispatch函数}
    return (action) => b_middleware(action)
    ...
}
dispatch = (action) => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }
    return b_middleware(action)
}
2.
b_middleware(c_middleware){
    ...
    c_middleware = (action) => {store.dispatch函数}
    return (action) => c_middleware(action)
    ...
}
dispatch = (action) => {
    return c_middleware(action)
}
3.
c_middleware(store.dispatch){
    return (action) => {store.dispatch函数}
}
dispatch = (action) => {store.dispatch函数}
复制代码

总结

1.首先将store.getState和store.dispatch经过闭包的方式使得中间件能够访问；

2.其次，经过compose函数操做，对next进行赋值，使得中间件按顺序依次执行；

3.最后，返回一个dispatch函数，能够经过传入action参数，使得中间件按顺序依次执行，若是action为函数则直接执行该函数，而且传入dispatch和getSate参数。

总之使用redux进行状态管理极大地提升了工做效率，让数据更好地被管理。