redux 源码解读-

原创于 2018-09-25 15:50:33 发布 · 168 阅读

0 ·

CC 4.0 BY-SA版权

reux 专栏收录该内容

4 篇文章

订阅专栏

本文深入探讨了Redux中combineReducers函数的工作原理，详细解释了如何将多个reducer组合成一个整体reducer，以及如何处理state的更新。通过代码示例，展示了函数内部的逻辑流程，包括状态合法性检查和最终state的生成。

这里直接贴代码：
export default function combineReducers(reducers) { // reducers ： {}
  const reducerKeys = Object.keys(reducers) // 获得传进来对象的key
  const finalReducers = {} // 声明finalReducers 这用来存储最终的reducers
  for (let i = 0; i < reducerKeys.length; i++) { // 这个循环是用来筛选数据的。
    const key = reducerKeys[i] //获得key

    if (process.env.NODE_ENV !== 'production') { // 如果是生产环境
      if (typeof reducers[key] === 'undefined') { // 如果reducers[key] 是 undefinded 抛出错误
        warning(`No reducer provided for key "${key}"`)
      }
    }

    if (typeof reducers[key] === 'function') { // 筛选reducers【key】 如果是函数才保存
      finalReducers[key] = reducers[key]
    }
  }
  const finalReducerKeys = Object.keys(finalReducers) // 获得 finalReducers keys

  let unexpectedKeyCache
  if (process.env.NODE_ENV !== 'production') {
    unexpectedKeyCache = {}
  }

  let shapeAssertionError
  try {
    assertReducerShape(finalReducers) // 判断finalReducers的合法性。
  } catch (e) {
    shapeAssertionError = e
  }
// 这里返回一个函数。这个函数就是传入到createStore的函数。
  return function combination(state = {}, action) {
    console.log(shapeAssertionError);
    if (shapeAssertionError) {
      throw shapeAssertionError
    }

    if (process.env.NODE_ENV !== 'production') {
      const warningMessage = getUnexpectedStateShapeWarningMessage( // 判断数据的合法性
        state,
        finalReducers,
        action,
        unexpectedKeyCache
      )
      if (warningMessage) {
        warning(warningMessage)
      }
    }

    let hasChanged = false // 是否改变的flag
    const nextState = {} // 存储最终的state
    for (let i = 0; i < finalReducerKeys.length; i++) { // 遍历 finalReducerKeys
      const key = finalReducerKeys[i] // 获得key
      const reducer = finalReducers[key] // 获得对应的reducer
      const previousStateForKey = state[key] // 获得key对应的state
      const nextStateForKey = reducer(previousStateForKey, action) // 获得根据key 改变后的state
      if (typeof nextStateForKey === 'undefined') {
        const errorMessage = getUndefinedStateErrorMessage(key, action)
        throw new Error(errorMessage)
      }
      nextState[key] = nextStateForKey // 将改变后的key 存储到 nextState 对应的key
      hasChanged = hasChanged || nextStateForKey !== previousStateForKey // 判断是否改变，是否需要更新state
    }
    return hasChanged ? nextState : state // 如果改变了 返回新的state 没改变则返回旧state。
  }
}