redux-actions源码分析四 ———— handleActions

上一节末尾也总结了，handleAction只能针对单独type，如果type多了就会不方便应用，而handleActions正是来解决这一问题，它与createActions类似，下面就来对其源码进行一下分析

handleActions

/*
    handleActions接收三个参数，分别为：
        handlers：Object或Map类型，里面包含对每种type的处理
        defaultState：初始状态
        options：一般不需要传递，默认为{}
*/
export default function handleActions(handlers, defaultState, options = {}) {
    /*
        handlers必须为扁平Object或者Map，否则会报错
    */
    invariant(
        isPlainObject(handlers) || isMap(handlers),
        'Expected handlers to be a plain object.'
    );

    /*
        这里调用flattenReducerMap方法
        请先移步到flattenReducerMap方法分析
        经过分析可知道，flattenedReducerMap得到的值就是扁平化的Object
        其key和value分别为type及其对应的数据处理方法
    */
    const flattenedReducerMap = flattenReducerMap(handlers, options);

    /*
        这里遍历flattenedReducerMap，并对每一项分别调用handleActions方法
    */
    const reducers = ownKeys(flattenedReducerMap).map(type =>
        handleAction(type, get(type, flattenedReducerMap), defaultState)
    );

    /*
        这里的reduceReducers方法是引入的reduce-reducers插件
        其主要是将多个reducer合并，但其与redux的combinReducers有差别
        具体内容可以查看github文档
    */
    const reducer = reduceReducers(...reducers, defaultState);

    /*
        最终返回的还是一个普通的reducer函数，只不过是经过上述处理的
    */
    return (state = defaultState, action) => reducer(state, action);
}

flattenReducerMap方法源码分析：

/*
    熟悉吗，这里还是调用flattenWhenNode方法，并把下面的方法参数传入
    请先移步到flattenWhenNode方法分析
*/
export default flattenWhenNode(
    node => (isPlainObject(node) || isMap(node)) && !hasGeneratorInterface(node)
);

flattenWhenNode方法源码分析：

/*
    这里的predicate即为上面传入的那个方法参数
    然后返回一个方法
*/
export default predicate =>

    /*
        这里的map即为上面的handlers
        namespace为'/'
        prefix为undefined
        partialFlatMap、partialFlatActionType为默认值
        还是一样，内部方法先不看，先看下面的，遇到调用再看
    */
    function flatten(
        map,
        { namespace = DEFAULT_NAMESPACE, prefix } = {},
        partialFlatMap = {},
        partialFlatActionType = ''
    ) {
        /*
            connectNamespace方法会接收type参数，然后进行判断
            因为partialFlatActionType为''，所以直接返回了type
            该方法下面的逻辑会在其它地方用到，这里暂且不考虑
        */
        function connectNamespace(type) {
            if (!partialFlatActionType) return type;
            const types = type.toString().split(ACTION_TYPE_DELIMITER);
            const partials = partialFlatActionType.split(ACTION_TYPE_DELIMITER);
            return []
                .concat(...partials.map(p => types.map(t => `${p}${namespace}${t}`)))
                .join(ACTION_TYPE_DELIMITER);
        }

        /*
            connectPrefix同样的，因为partialFlatActionType为''，prefix为undefined
            所以还是返回type
        */
        function connectPrefix(type) {
            if (partialFlatActionType || !prefix) {
                return type;
            }

            return `${prefix}${namespace}${type}`;
        }

        /*
            之前分析过，ownKeys是获取map中的每个key，然后遍历
            分别调用connectPrefix、connectNamespace方法
            请先移步到这两个方法的分析
            经过上面两个函数的分析，这里的nextNamespace还是type
        */
        ownKeys(map).forEach(type => {
            const nextNamespace = connectPrefix(connectNamespace(type));

            /*
                这里调用了get方法，得到key对应的value
            */
            const mapValue = get(type, map);

             /*
                这里做了判断，predicate即上面的isPlainObject
                因为mapValue可以不单单是个函数，如果还是对象，这递归调用flatten方法
                这里因为mapValue已经是函数了，所以进入else逻辑
                而partialFlatMap的初始值是{}
                最终遍历之后得到的partialFlatMap类似于：
                    {
                        INCREMENT: (state, action) => ({
                            ...state, counter: state.counter + action.payload
                        }),
                    ​
                        DECREMENT: (state, action) => ({
                            ...state, counter: state.counter - action.payload
                        })
                    }
                并将结果返回
            */
            if (predicate(mapValue)) {
                flatten(mapValue, { namespace, prefix }, partialFlatMap, nextNamespace);
            } else {
                partialFlatMap[nextNamespace] = mapValue;
            }
        });

        return partialFlatMap;
    };

handleActions实例

/*
    经过上述分析，其最终会转换成普通的reducer函数，与平时开发时写的reducer类似
*/
handleActions(
    {
        INCREMENT: (state, action) => ({
            ...state, counter: state.counter + action.payload
        }),
    ​
        DECREMENT: (state, action) => ({
            ...state, counter: state.counter - action.payload
        })
    },
    { counter: 0 }
)

总结

handleActions内部原理是对传入的Object或者Map遍历，并分别调用handleAction方法，最终还是将自身转换成为一个普通的reducer，因为redux的createStore方法接收的只是一个纯函数的reducer。handleActions弥补了handleAction不能处理多个type的不足，使用起来更加方便。

赏

谢谢你请我吃糖果