博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
redux的combineReducers源码,中文翻译
阅读量:6222 次
发布时间:2019-06-21

本文共 6909 字,大约阅读时间需要 23 分钟。

import { ActionTypes } from './createStore'import isPlainObject from 'lodash/isPlainObject'import warning from './utils/warning'/** * ActionTypes 是这个 * export const ActionTypes = { *       INIT: '@@redux/INIT' *  } */function getUndefinedStateErrorMessage(key, action) { //函数名翻译为获取未定义的state错误信息  const actionType = action && action.type  const actionName = (actionType && `"${actionType.toString()}"`) || 'an action'  return (    `Given action ${actionName}, reducer "${key}" returned undefined. ` +    `To ignore an action, you must explicitly return the previous state. ` +    `If you want this reducer to hold no value, you can return null instead of undefined.`  )  //对于action xxx ,reducer yyy 返回undefined  //一定要很明确的返回之前的state,这样就可以忽略一个action  //如果你想这个reducer没有返回值,你可以返回null而不是undefined}//获取与预期不符的state的结构警告信息function getUnexpectedStateShapeWarningMessage(inputState, reducers, action, unexpectedKeyCache) {  const reducerKeys = Object.keys(reducers)  const argumentName = action && action.type === ActionTypes.INIT ?    'preloadedState argument passed to createStore' :    'previous state received by the reducer'  if (reducerKeys.length === 0) {    return (      'Store does not have a valid reducer. Make sure the argument passed ' +      'to combineReducers is an object whose values are reducers.'    )  }  if (!isPlainObject(inputState)) {    return (      `The ${argumentName} has unexpected type of "` +      ({}).toString.call(inputState).match(/\s([a-z|A-Z]+)/)[1] +      `". Expected argument to be an object with the following ` +      `keys: "${reducerKeys.join('", "')}"`    )  }  const unexpectedKeys = Object.keys(inputState).filter(key =>    !reducers.hasOwnProperty(key) &&    !unexpectedKeyCache[key]  )  unexpectedKeys.forEach(key => {    unexpectedKeyCache[key] = true  })  if (unexpectedKeys.length > 0) {    return (      `Unexpected ${unexpectedKeys.length > 1 ? 'keys' : 'key'} ` +      `"${unexpectedKeys.join('", "')}" found in ${argumentName}. ` +      `Expected to find one of the known reducer keys instead: ` +      `"${reducerKeys.join('", "')}". Unexpected keys will be ignored.`    )  }}//声明reducer结构function assertReducerShape(reducers) {  Object.keys(reducers).forEach(key => {    const reducer = reducers[key]    const initialState = reducer(undefined, { type: ActionTypes.INIT })    if (typeof initialState === 'undefined') {      throw new Error(        `Reducer "${key}" returned undefined during initialization. ` +        `If the state passed to the reducer is undefined, you must ` +        `explicitly return the initial state. The initial state may ` +        `not be undefined. If you don't want to set a value for this reducer, ` +        `you can use null instead of undefined.`      )      //reducer xxx 初始化时返回undefined, 如果传给reducer的state是undefined,你一定要      //很明确地返回初始state, 初始state可能是undefined, 如果你不想给这个reducer      //设置value值,你可以用null代替undefined    }    const type = '@@redux/PROBE_UNKNOWN_ACTION_' + Math.random().toString(36).substring(7).split('').join('.')    if (typeof reducer(undefined, { type }) === 'undefined') {      throw new Error(        `Reducer "${key}" returned undefined when probed with a random type. ` +        `Don't try to handle ${ActionTypes.INIT} or other actions in "redux/*" ` +        `namespace. They are considered private. Instead, you must return the ` +        `current state for any unknown actions, unless it is undefined, ` +        `in which case you must return the initial state, regardless of the ` +        `action type. The initial state may not be undefined, but can be null.`      )      //当probed(探索)随机的type时,reducer xxx 返回undefined. 不要在"redux/*"命名空间操作      // ${ActionTypes.INIT},也就是'@@redux/INIT', 或任意的action.他们是私有的.       //相反,对于未知的action,你应该返回当前的state,除非它是undefined.不管action的type是什么,      //你都应该返回初始的state,出示的state可能不是undefined,但可以是null    }  })}/** * Turns an object whose values are different reducer functions, into a single * reducer function. It will call every child reducer, and gather their results * into a single state object, whose keys correspond to the keys of the passed * reducer functions. * * 将一个value值是不同reducer函数的对象变成一个单一的reducer函数,它将会调用每一个子reducer * 将它们的结果组合成一个单一的state对象,这个对象的key对应传进来的reducer的key *  * @param {Object} reducers An object whose values correspond to different * reducer functions that need to be combined into one. One handy way to obtain * it is to use ES6 `import * as reducers` syntax. The reducers may never return * undefined for any action. Instead, they should return their initial state * if the state passed to them was undefined, and the current state for any * unrecognized action. * * reducers是一个对应不同reducer函数的对象,这些reducer函数需要组合成一个reducer. * 一个很方便获取到它的方法就是使用ES6 的`import * as reducers`语法,reducer可能不会 * 返回undefined.相反,它们应该返回初始的state. 如果传给它们的state是undefined,任何 * 不被识别的action都会返回当前的state *  * @returns {Function} A reducer function that invokes every reducer inside the * passed object, and builds a state object with the same shape. *  * 返回一个reducer函数,会触发传进来的对象中的每一个reducer,建立一个有相同结构的state对象 */export default function combineReducers(reducers) {  const reducerKeys = Object.keys(reducers) //将reducers的key提取为数组  const finalReducers = {}  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 {    assertReducerShape(finalReducers)  } catch (e) {    shapeAssertionError = e  }  return function combination(state = {}, action) {    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 = {}    for (let i = 0; i < finalReducerKeys.length; i++) {  //finalReducerKeys就是reducers的key值复制了一份      const key = finalReducerKeys[i]   //第 i 个key      const reducer = finalReducers[key]  //key所对应的reducer      const previousStateForKey = state[key] //把key作为属性赋给state      const nextStateForKey = reducer(previousStateForKey, action)  //返回新的state      if (typeof nextStateForKey === 'undefined') {        const errorMessage = getUndefinedStateErrorMessage(key, action)        throw new Error(errorMessage)      }      nextState[key] = nextStateForKey  //给nextState添加key属性,并赋值,key与reducer名字相同      hasChanged = hasChanged || nextStateForKey !== previousStateForKey    }    return hasChanged ? nextState : state  }}

源码解析请参考

转载地址:http://nrrja.baihongyu.com/

你可能感兴趣的文章
一个小公司的前端笔试HTML CSS JS
查看>>
noip普及组2018T1 标题统计
查看>>
vim配置@year12
查看>>
排序——数据结构课程作业
查看>>
Grunt Gulp Browserify Webpack
查看>>
Shortest Distance from All Buildings
查看>>
rdm代码网址
查看>>
乘方取模计算(模幂计算)
查看>>
Ubuntu安装PyCharm
查看>>
如何将CTB词性标签映射为universalPOs标签
查看>>
BZOJ5299:[CQOI2018]解锁屏幕(状压DP)
查看>>
Mac OSX 快捷键&命令行总览
查看>>
c++面试题之内存分配
查看>>
水果忍者(切西瓜)
查看>>
集合问题
查看>>
HTML
查看>>
渗透测试辅助工具--在线版
查看>>
Python(Handwriting)
查看>>
09-C语言选择结构(二)
查看>>
虚拟机类加载机制
查看>>