随着应用越来越复杂，我们会将多个reducer拆分成多个独立的函数，拆分后每个函数负责独立管理state的一部分。

combineReducers辅助函数的作用，就是把多个不同的reducer函数作用 value 的 object，合并成一个最终的reducer函数，然后对这个reducer调用 createStore方法。

合并后的 reducer 可以调用各个子 reducer，并把它们返回的结果合并成一个 state 对象。 由 combineReducers() 返回的 state 对象，会将传入的每个 reducer 返回的 state 按其传递给 combineReducers() 时对应的 key 进行命名。

示例：

  1. // 创建我们的 reducers。
  2. const _reducers = {
  3.   items(items = [], { type, payload }) {
  4.     if (type === 'ADD_ITEMS') items.push(payload);
  5.     return items;
  6.   },
  7.   isLoading(isLoading = false, { type, payload }) {
  8.     if (type === 'IS_LOADING') return true;
  9.     return false;
  10.   }
  11. };
  13. // 创建根 rootReducer
  14. const rootReducer = combineReducers(_reducers)
  16. // createStore 接受 reducers，创建我们需要的 store。
  17. const store = createStore(rootReducer);
  19. // 拿到组合后的state
  20. const state = store.getState();

rootReducer 返回一个函数 combination(state = {}, action)，再交给 createStore来创建我们需要的 store。
带着示例我们来看源码：

源码

先看辅助函数：

  1. getUndefinedStateErrorMessage，如果一个reducer返回的是一个undefined的state，就会调用

    1. function getUndefinedStateErrorMessage(key, action) {
    2. const actionType = action && action.type
    3. const actionDescription =
    4.  (actionType && `action "${String(actionType)}"`) || 'an action'
    6. return (
    7.  `Given ${actionDescription}, reducer "${key}" returned undefined. ` +
    8.  `To ignore an action, you must explicitly return the previous state. ` +
    9.  `If you want this reducer to hold no value, you can return null instead of undefined.`
    10. )
    11. }

  2. getUnexpectedStateShapeWarningMessage，用于校验未知键、不是对象的state，对于REPLACE类型，不校验。

    1. function getUnexpectedStateShapeWarningMessage(
    2. inputState,
    3. reducers,
    4. action,
    5. unexpectedKeyCache
    6. ) {
    7. const reducerKeys = Object.keys(reducers)
    8. const argumentName =
    9.  action && action.type === ActionTypes.INIT
    10.    ? 'preloadedState argument passed to createStore'
    11.    : 'previous state received by the reducer'
    13. if (reducerKeys.length === 0) {
    14.  return (
    15.    'Store does not have a valid reducer. Make sure the argument passed ' +
    16.    'to combineReducers is an object whose values are reducers.'
    17.  )
    18. }
    20. if (!isPlainObject(inputState)) {
    21.  return (
    22.    `The ${argumentName} has unexpected type of "` +
    23.    {}.toString.call(inputState).match(/\s([a-z|A-Z]+)/)[1] +
    24.    `". Expected argument to be an object with the following ` +
    25.    `keys: "${reducerKeys.join('", "')}"`
    26.  )
    27. }
    29. const unexpectedKeys = Object.keys(inputState).filter(
    30.  key => !reducers.hasOwnProperty(key) && !unexpectedKeyCache[key]
    31. )
    33. unexpectedKeys.forEach(key => {
    34.  unexpectedKeyCache[key] = true
    35. })
    37. if (action && action.type === ActionTypes.REPLACE) return
    39. if (unexpectedKeys.length > 0) {
    40.  return (
    41.    `Unexpected ${unexpectedKeys.length > 1 ? 'keys' : 'key'} ` +
    42.    `"${unexpectedKeys.join('", "')}" found in ${argumentName}. ` +
    43.    `Expected to find one of the known reducer keys instead: ` +
    44.    `"${reducerKeys.join('", "')}". Unexpected keys will be ignored.`
    45.  )
    46. }
    47. }

  3. assertReducerShape，校验reducer的合理性，初始化和返回值不能是undefined。

    1. function assertReducerShape(reducers) {
    2. Object.keys(reducers).forEach(key => {
    3.  const reducer = reducers[key]
    4.  const initialState = reducer(undefined, { type: ActionTypes.INIT })
    6.  if (typeof initialState === 'undefined') {
    7.    throw new Error(
    8.      `Reducer "${key}" returned undefined during initialization. ` +
    9.        `If the state passed to the reducer is undefined, you must ` +
    10.        `explicitly return the initial state. The initial state may ` +
    11.        `not be undefined. If you don't want to set a value for this reducer, ` +
    12.        `you can use null instead of undefined.`
    13.    )
    14.  }
    16.  if (
    17.    typeof reducer(undefined, {
    18.      type: ActionTypes.PROBE_UNKNOWN_ACTION()
    19.    }) === 'undefined'
    20.  ) {
    21.    throw new Error(
    22.      `Reducer "${key}" returned undefined when probed with a random type. ` +
    23.        `Don't try to handle ${ActionTypes.INIT} or other actions in "redux/*" ` +
    24.        `namespace. They are considered private. Instead, you must return the ` +
    25.        `current state for any unknown actions, unless it is undefined, ` +
    26.        `in which case you must return the initial state, regardless of the ` +
    27.        `action type. The initial state may not be undefined, but can be null.`
    28.    )
    29.  }
    30. })
    31. }

主入口

combineReducers 函数的主入口：
接收参数 reducers，是一个对象。

  1.  function combineReducers(reducers) {
  2.   const reducerKeys = Object.keys(reducers)
  3.   const finalReducers = {}
  4.   for (let i = 0; i < reducerKeys.length; i++) {
  5.     const key = reducerKeys[i]
  7.     if (process.env.NODE_ENV !== 'production') {
  8.       if (typeof reducers[key] === 'undefined') {
  9.         warning(`No reducer provided for key "${key}"`)
  10.       }
  11.     }
  13.     // reducers只能是函数， 可以排除掉不正确的
  14.     if (typeof reducers[key] === 'function') {
  15.       finalReducers[key] = reducers[key]
  16.     }
  17.   }
  18.   // 最终的 Reducers
  19.   const finalReducerKeys = Object.keys(finalReducers)
  21.   // This is used to make sure we don't warn about the same
  22.   // keys multiple times.
  23.   let unexpectedKeyCache
  24.   if (process.env.NODE_ENV !== 'production') {
  25.     unexpectedKeyCache = {}
  26.   }
  28.   let shapeAssertionError
  29.   try {
  30.     // 校验所有 reducers 的合理性
  31.     assertReducerShape(finalReducers) 
  32.   } catch (e) {
  33.     shapeAssertionError = e
  34.   }
  36.   // 返回一个新的 reducer，每次dispatch一个action，都会执行一遍这里。
  37.   return function combination(state = {}, action) {
  38.     if (shapeAssertionError) {
  39.       throw shapeAssertionError
  40.     }
  42.     if (process.env.NODE_ENV !== 'production') {
  43.       // 非生产环境，校验state
  44.       const warningMessage = getUnexpectedStateShapeWarningMessage(
  45.         state,
  46.         finalReducers,
  47.         action,
  48.         unexpectedKeyCache
  49.       )
  50.       if (warningMessage) {
  51.         warning(warningMessage)
  52.       }
  53.     }
  55.     // 是否已改变
  56.     let hasChanged = false
  57.     // state 是否改变的标志位。
  58.     const nextState = {}
  59.     // 遍历所有reducers
  60.     for (let i = 0; i < finalReducerKeys.length; i++) {
  61.       const key = finalReducerKeys[i]
  62.       const reducer = finalReducers[key]
  63.       const previousStateForKey = state[key] // 上一个state，也就是旧的state
  64.       const nextStateForKey = reducer(previousStateForKey, action) // 执行reducer，拿到新的state值
  65.       if (typeof nextStateForKey === 'undefined') {
  66.         const errorMessage = getUndefinedStateErrorMessage(key, action)
  67.         throw new Error(errorMessage)
  68.       }
  69.       nextState[key] = nextStateForKey  // 返回值赋值给nextState
  70.       hasChanged = hasChanged || nextStateForKey !== previousStateForKey // 判断state是否发生了变化
  71.     }
  72.     hasChanged =
  73.       hasChanged || finalReducerKeys.length !== Object.keys(state).length
  74.     return hasChanged ? nextState : state // state有变化就返回新的state
  75.   }
  76. }

总结

combineReducers函数的作用就是将多个reducer整合起来，交给createStore创建一个新的reducers。

可以这样理解 combineReducers 就是一个高阶的 reducer方法，因为其返回函数 combination 方法接收的参数是 state和action，其返回值也是一个 state。

在每次 dispatch 时都会执行 combination 函数遍历所有reducers，再调用各自的 reducer。