redux源码解读

　　react在做大型项目的时候，前端的数据一般会越来越复杂，状态的变化难以跟踪、无法预测，而redux可以很好的结合react使用，保证数据的单向流动，可以很好的管理整个项目的状态，但是具体来说，下面是redux的一个核心流程图：

　　即整个项目的数据存储在Store中，每个状态下Store会生成一个state，一个state对应着一个view，而用户只能接触到view，不能接触到store，那我们怎么才能让store中的数据发生改变呢？所以，必须要通过view来间接改变，即用户点击，产生action，不能点击一次，创建一个action，所以需要一个action creator，然后将这个action通过dispatch函数送到store中，这个过程中，可以使用一些中间件来处理一些异步操作，然后将数据交给store，store拿到数据之后，通过reducer来根据不同的action的type来处理数据，返回一个新的state，通过新的state，就可以再产生一个新的view了。并且可以看到 store、view、action这样的一个单项数据流。

　　为了更好地理解redux，我们可以读一下redux的源码。

　　首先，我们将redux源码得到，整体目录如下：

　　而redux源码的核心当然是处在src中的，dist、es、lib都不是最重要的，所以，我们展开src，可以看到下面的目录：

　　下面主要说一下整体：

utils下的warning.js文件用于控制台错误日志输出，可以忽略。
index.js 为入口文件，看源码时应该首先看这个文件。
createStore是用于创建store的，所以是主流程，也是比较重要的一环。
其他四个文件 --- applyMiddlewares.js、 bindActionCreators.js、combineReducers.js、compose.js这四个文件属于助攻型文件。

入口文件 index.js

import createStore from './createStore'
import combineReducers from './combineReducers'
import bindActionCreators from './bindActionCreators'
import applyMiddleware from './applyMiddleware'
import compose from './compose'
import warning from './utils/warning'

/*
* This is a dummy function to check if the function name has been altered by minification.
* If the function has been minified and NODE_ENV !== 'production', warn the user.
*/
function isCrushed() {}

if (
  process.env.NODE_ENV !== 'production' &&
  typeof isCrushed.name === 'string' &&
  isCrushed.name !== 'isCrushed'
) {
  warning(
    'You are currently using minified code outside of NODE_ENV === \'production\'. ' +
    'This means that you are running a slower development build of Redux. ' +
    'You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify ' +
    'or DefinePlugin for webpack (http://stackoverflow.com/questions/30030031) ' +
    'to ensure you have the correct code for your production build.'
  )
}

export {
  createStore,
  combineReducers,
  bindActionCreators,
  applyMiddleware,
  compose
}

我们可以看到：在index.js中，主要是从主流程文件、几个辅助api文件以及日志打印文件中获取了接口，然后中间是一些环境方面的警告，可以忽略，最后就通过这个index文件导出了所有我们在redux使用的过程中所需要的api，所以入口文件index.js就是起了一个桥梁了作用，非常简单，但是很重要。

主流程文件: createStore.js

　　createStore.js主要是用于生成store的，我们还可以从最后暴露的对象看出其暴露了几个方法：

  return {
    dispatch,
    subscribe,
    getState,
    replaceReducer,
    [$$observable]: observable
  }

　　也就是说，这个主流程文件整个就是在定义了这么几个方法，下面看卡源码（被精简了，只留下重要部分）：

// 这个action一定是会被最先触发的，从redux-devtools就可以看得出来。
export const ActionTypes = {
  INIT: '@@redux/INIT'
}

// 接受三个参数
// 第一个参数是必须的，reducer，用来根据给定的状态和action来返回下一个状态树，进一步导致页面发生变化。
// 第二个参数是一个状态，这个不是必须的，大部分时候不需要。
// 第三个参数是enhancer，通常是一个中间件，比如使用redux-devtools这个中间件。
export default function createStore(reducer, preloadedState, enhancer) {

  // 当前的reducer  
  let currentReducer = reducer

  // 当前的状态。
  let currentState = preloadedState

  // 可以看出，这个是一个订阅者，state有变化，需要告诉这些Listeners。 
  let currentListeners = []

  // 后续的listeners,是不断更新的。
  let nextListeners = currentListeners

  // 是否dispatch。
  let isDispatching = false

  function ensureCanMutateNextListeners() {
    if (nextListeners === currentListeners) {
      nextListeners = currentListeners.slice()
    }
  }

  // 获取当前的state树
  function getState() {
    return currentState
  }

  /**

   * @param {Function} listener A callback to be invoked on every dispatch.
   * @returns {Function} A function to remove this change listener.
   */
  
  // 接收的是一个函数作为参数， 这个函数会在每一次dispatch的时候被调用。
  function subscribe(listener) {
    if (typeof listener !== 'function') {
      throw new Error('Expected listener to be a function.')
    }

    let isSubscribed = true

    ensureCanMutateNextListeners()
    nextListeners.push(listener)

    // 取消订阅
    return function unsubscribe() {
      if (!isSubscribed) {
        return
      }

      isSubscribed = false

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

  // 唯一触发state改变的方式。 dispatch a action.
  // 这里是dispatch的一个基本的实现，只能提供一个普通的对象。 如果你希望dispatch一个Promise、thunk、obserbable等，你需要包装你的store
  // 创建函数进入一个相应的中间件，如 redux-thunk。  
  // 这个action一定要包含type类型。最后也会返回这个action
  function dispatch(action) {

    // 如果正在dispatch,则抛出错误。
    if (isDispatching) {
      throw new Error('Reducers may not dispatch actions.')
    }

try {
isDispatching = true
currentState = currentReducer(currentState, action)
} finally {
isDispatching = false
}

// dispatch的过程中，每一个listener都会被调用。 因为在subscribe中传入的参数就是一个listener函数。
    const listeners = currentListeners = nextListeners
    for (let i = 0; i < listeners.length; i++) {
      const listener = listeners[i]
      listener()
    }

    return action
  }

  // 替换一个新的reducer
  function replaceReducer(nextReducer) {
    currentReducer = nextReducer
    dispatch({ type: ActionTypes.INIT })
  }

  // observable函数
  function observable() {
    const outerSubscribe = subscribe
    return {
      subscribe(observer) {
        if (typeof observer !== 'object') {
          throw new TypeError('Expected the observer to be an object.')
        }

        function observeState() {
          if (observer.next) {
            observer.next(getState())
          }
        }

        observeState()
        const unsubscribe = outerSubscribe(observeState)
        return { unsubscribe }
      },

      [$$observable]() {
        return this
      }
    }
  }
   
  // store被创建，就会有一个INIT action被处罚，所以每个reducer就会返回他们的初始值了。 
  dispatch({ type: ActionTypes.INIT })

  return {
    dispatch,
    subscribe,
    getState,
    replaceReducer,
    [$$observable]: observable
  }
}

getState方法非常简单，就是获取当前的store中的state，不用过多赘述。

replaceReducer方法也很简单，就是简单的替换reducer。

其中，subscribe用于注册监听事件，然后返回取消订阅的函数，把所有的订阅事件都放在了一个订阅数组里，只要维护这个数组就好了，subscribe的作用就是这么简单。

每次dispatch的时候就会依次调用数组中的监听事件。

store.subscribe()方法总结：

入参函数放入监听队列
返回取消订阅函数

再看看dispatch方法，dispatch是触发state改变的唯一方式，最为核心的就是下面的这段代码了：

    try {
      isDispatching = true
      currentState = currentReducer(currentState, action)
    } finally {
      isDispatching = false
    }

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

这段代码中，首先，将isDispatching设置为了true，然后就调用currentReducer返回了一个新的currentState，这样就成功了改变了当前的状态，最后，改变了状态之后，就开始把subscribe函数中注册的事件开始以此执行。OK！到这里，dispatch方法就比较清楚了。

所以，这里对dispatch方法做一个总结：

调用reducer，传入参数（currentState, action）。
按顺序执行订阅的listener。
返回action。

ok！至此，主流程文件就已经分析完了，整体还是比较简单的，比较重要的一个函数就是dispatch，但也是很好理解的。

下面，主要讲一讲剩下的几个辅助文件：

bindActionCreators.js

bindActionCreators把action creators转成拥有同名keys的对象，使用dispatch把每个action creator包装起来，这样可以直接调用它们。

function bindActionCreator(actionCreator, dispatch) {
  return (...args) => dispatch(actionCreator(...args))
}

export default function bindActionCreators(actionCreators, dispatch) {
  if (typeof actionCreators === 'function') {
    return bindActionCreator(actionCreators, dispatch)
  }

  if (typeof actionCreators !== 'object' || actionCreators === null) {
    throw new Error(
      `bindActionCreators expected an object or a function, instead received ${actionCreators === null ? 'null' : typeof actionCreators}. ` +
      `Did you write "import ActionCreators from" instead of "import * as ActionCreators from"?`
    )
  }

  const keys = Object.keys(actionCreators)
  const boundActionCreators = {}
  for (let i = 0; i < keys.length; i++) {
    const key = keys[i]
    const actionCreator = actionCreators[key]
    if (typeof actionCreator === 'function') {
      boundActionCreators[key] = bindActionCreator(actionCreator, dispatch)
    }
  }
  return boundActionCreators
}

实际情况用到的并不多，惟一的应用场景是当你需要把action creator往下传到一个组件上，却不想让这个组件觉察到Redux的存在，而且不希望把Redux Store或dispatch传给它。

CombineReducers.js

　　这个文件中暴露的方法是我们常用的，因为在写reducer的时候，往往需要根据类别不同，写多个reducer，但是根据createStore可以知道，只有一个reducer可以被传入，所以这里的combineReducers就是为了将多个reducer合并成一个reducer的。具体源码如下（经过精简之后，就只剩下30多行了）：

// 接受一个对象作为参数，这个对象的值是需要被combine的不同的reducer函数。
// 返回一个函数， 这个函数就是一个大的reducer了。
export default function combineReducers(reducers) {
  // 获取reducer的所有的keys数组。
  const reducerKeys = Object.keys(reducers)
  // 最终的reducer对象。
  const finalReducers = {}
  for (let i = 0; i < reducerKeys.length; i++) {
    const key = reducerKeys[i]
    // 将所有的reducer重新放在finalReducers中，相当于浅拷贝。
    if (typeof reducers[key] === 'function') {
      finalReducers[key] = reducers[key]
    }
  }
  // 获取最终的所有的reducers数组。
  const finalReducerKeys = Object.keys(finalReducers)

  // 返回了一个函数，可以看出这个函数和我们一个一个定义的reducer函数是类似的，所以，这就是一个大的reducer函数。  
  return function combination(state = {}, action) {
    let hasChanged = false
    const nextState = {}
    for (let i = 0; i < finalReducerKeys.length; i++) {
      const key = finalReducerKeys[i]
      const reducer = finalReducers[key]
      const previousStateForKey = state[key]
      const nextStateForKey = reducer(previousStateForKey, action)
      nextState[key] = nextStateForKey
      hasChanged = hasChanged || nextStateForKey !== previousStateForKey
    }
    return hasChanged ? nextState : state
  }
}

所以这个combineReducers还是很明确的，就是将所有的reducer组合成一个大的。

compose.js

　　这个函数用于组合传进来的一系列函数，在中间件的时候会用到，可以看到，执行的最终结果就是把一系列函数串联起来：

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

　　在中间件的时候会用到这个函数。

applyMiddleware.js

　　这个函数用于 store 增强。

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)
    }
    chain = middlewares.map(middleware => middleware(middlewareAPI))
    dispatch = compose(...chain)(store.dispatch)

    return {
      ...store,
      dispatch
    }
  }
}

　　用法大致如下：

const store = createStore(reducer,applyMiddleware(…middlewares))
or
const store = createStore(reducer,{},applyMiddleware(…middlewares))

　　比如一个比较常用的redux-thunk中间件，源码的关键代码如下：

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

        return next(action);
      };
    };
  };
}

　　作用的话可以看到，这里有个判断：如果当前action是个函数的话，return一个action执行，参数有dispatch和getState，否则返回给下个中间件。这种写法就拓展了中间件的用法，让action可以支持函数传递。即如果action是一个函数，那么我们就可以进一步来处理了，如果这个action是一个对象，说明就要直接又dispatch来触发了，即这里的action实际上是在真正的dispatch之前所做的一些工作。

一般，我们认为redux属于函数式编程，即函数是第一等公民、数据是不可变的（在reducer中，我们希望每次返回一个新的state，而不是修改旧的state，然后返回，所以这里强调的就是不可变的）、有确定的输入就有确定的输出。 整体来说，可能redux不是纯纯的函数式编程，但是也比较符合函数式编程的风格了。

如下：

const arr = [1, 2, 3];

arr.push(4); //这样不好，看到这代码我就方了，需要从上往下琢磨一下arr到底存的是啥
const newArr = [...arr, 4]; //这样，arr不会被修改，很放心，要修改过的版本用newArr就好了

如下：

const me = {name: 'Morgan'};

me.skill = 'React'; //这样不好，拿不准me里是啥了
const newMe = {...me, skill: 'React'}; //这样，me不会被修改

posted @ 2017-08-30 21:24 Wayne-Zhu 阅读(518) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

曾经，我非常羡慕那些人见人爱的人，我也想要变成那样，可是后来我才明白人见人爱也是需要天赋的，后来我开始默默努力，我想，就算我不能让每个人都喜欢我，至少因为我做的努力能得到别人的尊重。

Wayne Zhu

Keep looking, don't settle.