Redux源码详细分析二 ———— combineReducer

上一篇分析了createStore，这篇来分析一下combineReducer。当业务复杂的时候，会将reducer拆开，但createStore传入的只能是一个reducer，这个时候就需要combineReducer将所有的reducer结合起来。

combineReducer

看一下combineReducer的源码来进行分析：

//combineReducers方法接收对象形式的reducers，也就是{ a: reducerA, b: reducerB }
export default function combineReducers(reducers) {

    //获取reducers的key，然后进行遍历，放入到finalReducers，其实相当于深拷贝一份reducers
    const reducerKeys = Object.keys(reducers)
    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 = {}
    }

    //这里调用了校验方法assertReducerShape，检查每个reducer是否有默认状态
    let shapeAssertionError
    try {
        assertReducerShape(finalReducers)
    } catch (e) {
        shapeAssertionError = e
    }

    /*  
        最终返回combination，而combination的两个参数是state和action，这正是reducer结构，
        所以combineReducers最终返回的还是一个reducer，只不过就是经过封装之后的reducer
    */
    return function combination(state = {}, action) {

        //如果某个reducer没有返回默认状态，则会报错
        if (shapeAssertionError) {
            throw shapeAssertionError
        }

        //调用getUnexpectedStateShapeWarningMessage对reducers、state、action等做进一步校验
        if (process.env.NODE_ENV !== 'production') {
            const warningMessage = getUnexpectedStateShapeWarningMessage(
                state,
                finalReducers,
                action,
                unexpectedKeyCache
            )
            if (warningMessage) {
                warning(warningMessage)
            }
        }

        //设定一个state是否变化的状态，以及改变后的state的初始值
        let hasChanged = false
        const nextState = {}

        /*
            遍历每个reducer，同时找到该reducer对应的state，然后把这个state和action传入到reducer中，
            如果在reducer中找到对应的action.type则进行状态更新，否则返回原始状态，
            最终会判断当前后两个state是否相同，如果相同则返回之前传入的state，否则会返回改变后的state

            这里注意一个问题，在createStore时，会默认派发一次action，而这次派发会得到所有reducer的初始状态，
            然后将这些状态拼到一个大的state中，以reducers的key作为这个大state的key，value就是每个reducer对应初始state，
            这样state[key]就可以获取到当前reducer对应的state
        */
        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
    }
}

------------校验函数---------------

//这个函数的作用是校验每个reducer是否有返回默认状态，如果没有回报错，如果确实不用返回默认状态，则返回null替代什么都不返回
function getUndefinedStateErrorMessage(key, action) {
    const actionType = action && action.type
    const actionDescription =
        (actionType && `action "${String(actionType)}"`) || 'an action'

    return (
        `Given ${actionDescription}, 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.`
    )
}

//这个函数的主要作用是对传入的reducers、传入的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 (action && action.type === ActionTypes.REPLACE) return

    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.`
            )
        }

        if (
            typeof reducer(undefined, {
                type: ActionTypes.PROBE_UNKNOWN_ACTION()
            }) === '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.`
            )
        }
    })
}

通过上述的分析，其实combineReducers方法就是组合所有传入的reducer，最终返回一个组合后的reducer，其本质还是个reducer，因为createStore接收的第一个参数必须是个纯函数的reducer。当派发action进行state更新时，这个组合后的reducer会遍历所有传入的reducer，找到action.type对应的reducer并进行更改，最终会为了优化，只返回有更改的state。

combineReducers实例：

const numState = { num: 1 }
const strState = { str: 'hello' }

const numReducer = (state=numState, action) => {
    switch(action.type){
        case 'INCREMENT':
            return { ...state, num: state.num+1 }
        default: 
            return state
    }
}

const strReducer = (state=strState, action) => {
    switch(action.type){
        case 'CHANGE':
            return { ...state, str: state.str+' world!' }
        default: 
            return state
    }
}

const reducers = combineReducers({ numR: numReducer, strR: strReducer })

/*
    这里通过combineReducers组合了numReducer、strReducer返回了reducers，放入createStore中，
    而createStore会默认派发一次type为随机数的action，获取最终的组合的state，对于这个例子，则是：
        state = {
            numR: { num: 1 },
            strR: { str: 'hello' }
        }
*/
const store = createStore(reducers)

/*
    当派发下面这个change的action时，首先会遍历所有的reducer：
    1、第一个找到numReducer，然后根据state[numR]找到其状态是numState={ num: 1 }，并将numState以及change的action传入，
       因为没有对应的type，所以返回默认值，而这个默认值与之前找到的numState相同，则不改变state
    2、第二个找到strReducer，根据state[strR]找到其状态是strState={ str: 'hello' }，并将strState以及change的action传入，
        在strReducer中找到对应的type，将strState改为{ str: 'hello world!' }并返回，因为跟之前的strState不一样，
        所以会将state中strR的value改成{ str: 'hello world!' }，最终就可以取得更新之后state
*/
const change = () => ({ type: 'CHANGE' })
dispatch(change())

结合源码分析以及实际例子可以清晰知道combineReducers的内部实现原理，其实并不复杂，与单个reducer的逻辑基本一致，只不过加了一层封装。

赏

谢谢你请我吃糖果