react-redux流程与实现分析

1、前言

redux作为一种单向数据流的实现，配合react非常好用，尤其是在项目比较大，逻辑比较复杂的时候，单项数据流的思想能使数据的流向、变化都能得到清晰的控制，并且能很好的划分业务逻辑和视图逻辑。本文主要记录下自己学习redux、react-redux时的理解。

上图展示了redux数据的基本流程，简单的说就是view dispatch一个action后，通过对应reducer处理，然后更新store，最终views根据store数据的改变重新渲染界面。

2、创建store

store就是redux的一个数据中心，简单的理解就是我们所有的数据都会存放在里面，然后在界面上使用时，从中取出对应的数据。因此最开始，我们要创建一个这样的store，redux提供了createStore方法。

export default function createStore(reducer, preloadedState, enhancer) {
  ...
  return {
    dispatch,
    subscribe,
    getState,
    replaceReducer,
    [$$observable]: observable
  }
}

可以看到createStore有三个参数，返回一个对象，里面有我们常用的方法，下面一一来看一下。

（1）、getState

export default function createStore(reducer, preloadedState, enhancer) {
  ...
  var currentState = preloadedState
  function getState() {
    return currentState
  }
  ...
}

代码只有一行，redux内部通过currentState变量保存当前store，变量初始值即我们调用时传进来的preloadedState，getState()就是返回这个变量

（2）、subscribe
  代码本身也不难，就是通过nextListeners数组保存所有的回调函数，外部调用subscribe时，会将传入的listener插入到nextListeners数组中，并返回unsubscribe函数，通过此函数可以删除nextListeners中对应的回调。这里有个小细节是使用了currentListeners和nextListeners两个数组来保存，主要原因是在dispatch函数中会遍历nextListeners，这时候可能会客户可能会继续调用subscribe插入listener，为了保证遍历时nextListeners不变化，需要一个临时的数组保存。

var currentListeners = []
var nextListeners = currentListeners

function ensureCanMutateNextListeners() {
    if (nextListeners === currentListeners) {
      nextListeners = currentListeners.slice()        //生成一个新的数组
    }
 }

function subscribe(listener) {
    if (typeof listener !== 'function') {
      throw new Error('Expected listener to be a function.')
    }

    var isSubscribed = true

    ensureCanMutateNextListeners()
    nextListeners.push(listener)

    return function unsubscribe() {
      if (!isSubscribed) {
        return
      }

      isSubscribed = false

      ensureCanMutateNextListeners()
      var index = nextListeners.indexOf(listener)
      nextListeners.splice(index, 1)
    }
 }

（3）、dispatch
  我们知道dispatch一个action后，就会调用此action对应的reducer，从下面源码可以看的很清晰，在调用了currentReducer以后，遍历nextListeners数组，回调所有通过subscribe注册的函数。这样在每次store数据更新，组件就能立即获取到最新的数据

function dispatch(action) {  
  ...
  try {
      isDispatching = true
      currentState = currentReducer(currentState, action)  //调用reducer处理
    } finally {
      isDispatching = false
    }

    var listeners = currentListeners = nextListeners
    for (var i = 0; i < listeners.length; i++) {                   
      var listener = listeners[i]
      listener()
    }
  ...
}

（4）、replaceReducer
  replaceReducer是切换当前的reducer，虽然代码只有几行，但是在用到时功能非常强大，它能够实现代码热更新的功能，即在代码中根据不同的情况，对同一action调用不同的reducer，从而得到不同的数据。

3、中间件
  前面我们分析了createStore方法，通过createStore创建的store已经可以满足基本的分发action、修改store、更新view的功能了。但是仔细思考，对于前端必须用到的异步请求却无能为力，因为dispatch一个异步action时，数据还没有返回，而此时已经调用了currentReducer()方法，这样就没法更新store了。这里就需要用到中间件了。

  什么是中间件呢，我的理解是：比如水从自来水厂流到用户的家中，需要经过过滤、消毒、净化等一道道工艺，最终才会到用户的家中，这中间的一道道工艺就可以理解为中间件，每个中间件都可以对水进行一些处理，当然也可以不处理，直接让水流过去。而我们的数据类似于水，中间件就是对数据进行特殊处理的一个个节点。redux提供了applyMiddleware方法，在分析此方法之前，先看下redux中另一个方法，compose。

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

  funcs = funcs.filter(func => typeof func === 'function')

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

  const last = funcs[funcs.length - 1]
  const rest = funcs.slice(0, -1)
  return (...args) => rest.reduceRight((composed, f) => f(composed), last(...args))
}

这里有一个数学概念需要知道，叫柯里化函数，什么是柯里化函数，看一个简单的例子

var add = function (a) {
  return function (b) {
    return a + b;
  }
}

var two = add(2)
var three = two(1)
var four = two(2)            //与 add(2)(2)效果一样

如果我们定义一般的函数实现加法，那么需要传入两个参数，而add方法每次只传入一个参数，即把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数。
  再回过头来看compose就会比较清晰，它类似与上面的two函数，后续每次调用，都与之前传入的2相加。而compose返回的函数，在后续继续调用时，就会遍历调用传入compose的funcs数组，compose就是对传入的funcs数组进行柯里化。理解了这个方法后，再来看applyMiddleware。applyMiddleware的参数就是一系列中间件。通过compose调用每个中间件，并传入原生dispatch方法，然后返回增强后的dispatch方法，最终返回store。由此可见applyMiddleware方法其实就是增强dispatch，这样在使用dispatch时可以让action流过中间件。

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

下面来看一下中间件的写法

const funActionThunk = ({ dispatch, getState }) => next => action => {
    if (typeof action.payload === 'function') {
        return action.payload(dispatch, getState);
    }
    return next(action);
};
export default funActionThunk;

我们可以来一一看一下中间件的这些参数是从哪里传进来的，首先{ dispatch, getState }是在applyMiddleware中传入的middlewareAPI对象，也就是原始的dispatch和getState对象。next参数其实也是原始的dispatch，就是compose(...chain)(store.dispatch)调用时传入的store.dispatch。action就是我们增强的dispatch分发的action。参数都传入后，我们就可以依据不同的action进行处理了，比如上面的中间件对action.payload进行判断，如果是函数，就直接调用，如果不是，那么调用next，直至最后没有中间件了，此时next就是原始的dispatch（即最初传入的store.dispatch）。

4、bindActionCreators

bindActionCreators方法的目的就是简化action的分发，我们在触发一个action时，最基本的调用是dispatch(action(param))。这样需要在每个调用的地方都写dispatch，非常麻烦。bindActionCreators就是将action封装了一层，返回一个封装过的对象，此后我们要出发action时直接调用action(param)就可以了。

5、react-redux

redux其实是一个通用的库，它不只针对react，还可以用到其它的像vue等库。因此react要想完美的应用redux，还需要封装一层，react-redux就是此作用。react-redux库相对简单些，它提供了一个react组件Provider和一个方法connect。下面的代码是react-redux项目的一般写法。

Provider组件相当于一个外壳，将store传入，并提供getChildContext方法，让后续的子组件可以通过context取到store对象。

connect方法复杂点，它返回一个函数，此函数的功能是创建一个connect组件包在WrappedComponent组件外面，connect组件复制了WrappedComponent组件的所有属性，并通过redux的subscribe方法注册监听，当store数据变化后，connect就会更新state，然后通过mapStateToProps方法选取需要的state，如果此部分state更新了，connect的render方法就会返回新的组件。

export default function connect(mapStateToProps, mapDispatchToProps, mergeProps, options = {}) {
  ...
  return function wrapWithConnect(WrappedComponent) {
    ...
  }
}