redux-actions源码分析三 ———— handleAction

2018-11-28

前面分析了创建action的两个方法，现在来分析一下handleAction方法，handleAction主要用于简化reducer，下面就来对其源码进行分析

handleAction

/*
    handleAction接收三个参数
        type：即为action的type
        reducer：即为要对type进行数据处理的方法
        defaultState：初始的state
*/
export default function handleAction(type, reducer = identity, defaultState) {
    /*
        首先对type进行处理，这里ACTION_TYPE_DELIMITER为'||'
        之后对reducer、defaultState进行校验，不通过会抛出错误
    */
    const types = toString(type).split(ACTION_TYPE_DELIMITER);
    invariant(
        !isUndefined(defaultState),
        `defaultState for reducer handling ${types.join(', ')} should be defined`
    );
    invariant(
        isFunction(reducer) || isPlainObject(reducer),
        'Expected reducer to be a function or object with next and throw reducers'
    );

    /*
        这里校验reducer是否为函数，然后得到nextReducer、throwReducer
    */
    const [nextReducer, throwReducer] = isFunction(reducer)
        ? [reducer, reducer]
        : [reducer.next, reducer.throw].map(
            aReducer => (isNil(aReducer) ? identity : aReducer)
        );

    /*
        最终返回一个方法，再对type进行校验，如果不在上面types数组中，直接返回默认state
    */
    return (state = defaultState, action) => {
        const { type: actionType } = action;
        if (!actionType || types.indexOf(toString(actionType)) === -1) {
            return state;
        }

        /*
            如果type在types数组中，直接调用reducer函数，并把state、action传入
            这里可以看出与普通的reducer类似
        */
        return (action.error === true ? throwReducer : nextReducer)(state, action);
    };
}

handleAction实例

/*
    经过上面分析，当dispatch(increment(1))时，会调用第二个函数参数，得到变化后的count为2
*/
handleAction(
    'INCREMENT',
    (state, action) => {
        return { ...state, count: state.count + action.payload }
    },
    { count: 1 }
)

总结

handleAction方法其实就是对普通的reducer进行了包装，但其只能用于单个type，实际应用中很少会只有一个type，如果有多个type，则需要多次调用handleAction方法，这会很复杂，所以这个Api在开发中应用较少