redux源码分析-白红宇

Redux is a predictable state container for JavaScript apps. 官网第一句就很全面的介绍了redux。一个可预测的状态管理工具。redux 是如何做到的呢？

单一的数据源 (states)

states是只读且不可变化的 (每次改变返回新值)

通过纯函数改变states (reducer, 无副作用, 相同的输入就有相同的输出)

改变states方式具有可描述性且单一 (action)

数据流

这个大家都很熟悉了吧，就不再讲了

源码解读

createStore

func createStore(reducer, preloadedState, enhancer) -> ({ dispatch, subscribe, getState, replaceReducer,[$$observable]: observable })

export default function createStore(reducer, preloadedState, enhancer) {  // preloadedState 可以不传，确定真实的参数  if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {    enhancer = preloadedState    preloadedState = undefined  }  if (typeof enhancer !== 'undefined') {    return enhancer(createStore)(reducer, preloadedState)  }  let currentReducer = reducer  let currentState = preloadedState  let currentListeners = []  let nextListeners = currentListeners  let isDispatching = false  function ensureCanMutateNextListeners() {    if (nextListeners === currentListeners) {      nextListeners = currentListeners.slice()    }  }  function getState() {    return currentState  }  function subscribe(listener) {    let isSubscribed = true    ensureCanMutateNextListeners()    nextListeners.push(listener)    return function unsubscribe() {      isSubscribed = false      ensureCanMutateNextListeners()      const index = nextListeners.indexOf(listener)      nextListeners.splice(index, 1)    }  }  function dispatch(action) {    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()    }    return action  }  function replaceReducer(nextReducer) {    currentReducer = nextReducer    dispatch({ type: ActionTypes.REPLACE })  }  function observable() {    //...  }  dispatch({ type: ActionTypes.INIT })  return {    dispatch,    subscribe,    getState,    replaceReducer,    [$$observable]: observable,  }}复制代码

为了篇幅减少些，上面的代码我删掉了部分错误检查。其实都很好理解，就有一点需要注意一下，为什么要用两个变量（currentListeners，nextListeners）来储存listener。这是因为redux允许在subscirbe中执行unsubscribe。例如:

const unsubscribe1 = store.subscribe(() => {  unsubscribe1()})const unsubscribe2 = store.subscribe(() => {  unsubscribe2()})dispatch(unknownAction);复制代码

如果不缓存dispatch的listener的话那么在dispatch里循环listeners时就会有问题。另外也可以发现，如果你绑定了多个subscribe函数，即使在第一个subscription里执行了所有的unSubscribe，subscription还是会全部执行一遍另外 observable 是为了和其他一些observable库配合使用，当目前为止还没用过。

applyMiddleware

用法

const logger = ({ getState }) => next => action => {  console.log('will dispatch logger1', action)  const returnValue = next(action)  console.log('state after dispatch logger1', getState())}const logger2 = ({ getState }) => next => action => {  console.log('will dispatch logger2', action)  const returnValue = next(action)  console.log('state after dispatch logger2', getState())}const store = createStore(  todos,  preload,  applyMiddleware(logger1, logger2),);// will dispatch logger1// will dispatch logger2// state after dispatch logger2// state after dispatch logger1复制代码

源码

export default function applyMiddleware(...middlewares) {  return createStore => (...args) => {    const store = createStore(...args)    let dispatch = () => {      throw new Error(        `Dispatching while constructing your middleware is not allowed. ` +          `Other middleware would not be applied to this dispatch.`      )    }    const middlewareAPI = {      getState: store.getState,      dispatch: (...args) => dispatch(...args)    }        // chainItem：next => action => {...}    const chain = middlewares.map(middleware => middleware(middlewareAPI))    dispatch = compose(...chain)(store.dispatch)    return {      ...store,      dispatch    }  }}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)))}// compose(logger1, logger2) => (...arg) => logger1Next(logger2Next(...arg))// 合成之后的dispatch就成了这个样子：const dispatch = (action) => logger1Next(logger2Next(store.dispatch))(action);// 假如还有logger3， 那么应该是这个样子const dispatch = (action) => logger1Next(logger2Next(logger3Next(store.dispatch)))(action);复制代码

可以compose原因是middle模式统一：store => next => action => {} 在执行完 const chain = middlewares.map(middleware => middleware(middlewareAPI))之后 chainItem: next => action => {} 本质是 接收一个dispatch，再返回一个合成的dispatch

bindActionCreators

用法

bindActionCreators({ actionCreator1, actionCreator2, ...}, dispatch) => ({ boundAction1, boundAction2, ... })

源码

// 返回 boundActionfunction bindActionCreator(actionCreator, dispatch) {  return function() {    return dispatch(actionCreator.apply(this, arguments))  }}export default function bindActionCreators(actionCreators, dispatch) {  // 仅仅传入一个actionCreator  if (typeof actionCreators === 'function') {    return bindActionCreator(actionCreators, dispatch)  }  if (typeof actionCreators !== 'object' || actionCreators === null) {    throw new Error()  }  // 传入一个对象时，绑定所有key，并返回一个对象  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}复制代码

combineReducers

由于redux仅有一个store，所以当项目复杂的时候，数据需要分类，这时就会用到此函数。作用是将多个分开的reducers合并。

原型：（reducer1，reducer2， reducer3，...） => combinedReducer

export default function combineReducers(reducers) {  const reducerKeys = Object.keys(reducers)  const finalReducers = {}  // 遍历检查 reducer 不应该为 undefined  for (let i = 0; i < reducerKeys.length; i++) {    const key = reducerKeys[i]    if (process.env.NODE_ENV !== 'production') {      if (typeof reducers[key] === 'undefined') {        warning(`No reducer provided for key "${key}"`)      }    }    if (typeof reducers[key] === 'function') {      finalReducers[key] = reducers[key]    }  }  const finalReducerKeys = Object.keys(finalReducers)  let unexpectedKeyCache  if (process.env.NODE_ENV !== 'production') {    unexpectedKeyCache = {}  }  let shapeAssertionError  try {    // 检查 reducer 必须设置初始值，不可以返回 undefined    assertReducerShape(finalReducers)  } catch (e) {    shapeAssertionError = e  }  // combinedReducer  return function combination(state = {}, action) {    if (shapeAssertionError) {      throw shapeAssertionError    }    if (process.env.NODE_ENV !== 'production') {      // 检查 state 是否合法，例如state必须是对象、state应该有相对应的reducer等      // 使用了combineRudcer之后，state就是对象了，原来的state都放在了相对应的key下面      // 例如：combineReducers({ todos: reducer1, todoType: reducer2 });      // store 变成了 { todos: todoState, todoType: todoTypeState };      const warningMessage = getUnexpectedStateShapeWarningMessage(        state,        finalReducers,        action,        unexpectedKeyCache      )      if (warningMessage) {        warning(warningMessage)      }    }    let hasChanged = false    const nextState = {}    // 将action分发给每个reducer， 如果该改变就返回新的。    // 否则返回旧值，类似于你在每个reduer中的做法。    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)      if (typeof nextStateForKey === 'undefined') {        const errorMessage = getUndefinedStateErrorMessage(key, action)        throw new Error(errorMessage)      }      nextState[key] = nextStateForKey      hasChanged = hasChanged || nextStateForKey !== previousStateForKey    }    return hasChanged ? nextState : state  }}复制代码

总结

redux源码还是比较好理解的，记住reducer一定要保证是纯函数。这对于测试和与其他的库配合至关重要。例如 react-redux。感兴趣的朋友可以看看我的react-redux源码分析

下周会给大家带来redux-saga这个中间件源码解读，感兴趣的请关注～

数据流

源码解读

createStore

applyMiddleware

用法

源码

bindActionCreators

用法

源码

combineReducers

总结

参考阅读