Redux源码阅读_3

combineReducers.ts

函数重载声明

首先是对combineReducers函数的重载，重载了三个函数，主要区别是传参reducers类型的不同。

// 重载函数
export default function combineReducers(
  reducers: ReducersMapObject
): Reducer>
export default function combineReducers(
  reducers: ReducersMapObject
): Reducer, A>
export default function combineReducers(
  reducers: M
): Reducer<
  CombinedState>,
  ActionFromReducersMapObject
>

函数结构

然后看看combineReducers函数的结构。

combineReducers函数结构

可以看到combineReducers是个高阶函数，返回值也是一个函数，返回的函数接收state与action两个变量。在官方手册给的用法，combineReducer之后是直接可以作为参数传入给createStore（具体分析见Redux源码阅读_1（上））来生成store的，但是源码的返回值却是个函数，这是怎么回事？

带着这个问题继续看……

函数体内声明的变量定义了两种特殊的类型，ReducersMapObject和StateFromReducersMapObject，看看这两种类型的定义。

export type Reducer = (
  state: S | undefined,
  action: A
) => S

export type ReducersMapObject = {
  [K in keyof S]: Reducer
}

export type StateFromReducersMapObject = M extends ReducersMapObject
  ? { [P in keyof M]: M[P] extends Reducer ? S : never }
  : never

可以看到：

• Reducers是入参为state与action，且返回一个state的函数（state类型为S）。

• ReducersMapObject是value值为Reducer类型的Object。（之前以为ReducerMapObject是key值为state，value值为Reducer类型的Map，看了发现命名不太对。。定义的key是[K in keyof S]，state 为 S 类型，而我们定义的state又是Object，那state的key就是string，那么ReducerMapObject的key也是string类型，所以他应该是个Object，而不是Map）

• StateFromReducersMapObject是value值为是state的Object（之前以为类型是key值为Reducer类型，value为state的Map，但是定义的M继承自ReducersMapObject，那么 M 的 key 类型为 string，那么 P 类型就是 string，所以他的类型应该是Object而不是Map）。

现在就可以回答上面的问题了，combineReducers返回一个接受state与action的函数，而redux里定义的reducer也是这样的一个函数，所以combineReducers的返回值类型其实就是一个Reducer……（被自己蠢到了，因为想看源码就把ts快速过了一遍，类型这一块刚看有点懵，看源码的时候一直在纠结这个变量是啥类型、那个变量是啥类型的问题。。）

函数实现

combineReducers函数内部主要操作：

• 将value类型为function的所有reducers复制到finalReducers
• 返回combine函数

combine函数的操作：

• 新建 nextState : StateFromReducersMapObject 变量
• 遍历finalReducers，计算当前state与nextState值，并将nextState赋值给对应key值的nextState，修改hasChanged标识变量的值
• 根据hasChanged标识变量确定是返回传入参数state还是新建变量nextState

由combine函数操作可知，redux返回的state都是全新的state，而不是在之前的state上做修改，其内存地址有变化

具体代码如下：

export default function combineReducers(reducers: ReducersMapObject) {
  const reducerKeys = Object.keys(reducers)
  const finalReducers: ReducersMapObject = {}
  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)

  // This is used to make sure we don't warn about the same
  // keys multiple times.
  let unexpectedKeyCache: { [key: string]: true }
  if (process.env.NODE_ENV !== 'production') {
    unexpectedKeyCache = {}
  }

  let shapeAssertionError: Error
  try {
    assertReducerShape(finalReducers)
  } catch (e) {
    shapeAssertionError = e
  }

  return function combination(
    state: StateFromReducersMapObject = {},
    action: AnyAction
  ) {
    if (shapeAssertionError) {
      throw shapeAssertionError
    }

    if (process.env.NODE_ENV !== 'production') {
      const warningMessage = getUnexpectedStateShapeWarningMessage(
        state,
        finalReducers,
        action,
        unexpectedKeyCache
      )
      if (warningMessage) {
        warning(warningMessage)
      }
    }

    let hasChanged = false
    const nextState: StateFromReducersMapObject = {}
    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
    }
    hasChanged =
      hasChanged || finalReducerKeys.length !== Object.keys(state).length
    return hasChanged ? nextState : state
  }
}