redux-actions源码分析二 ———— createActions

2018-11-25

上一节对createAction进行了分析，其每次只能创建一个action，如果想要一次创建多个action，这就需要应用createActions这一Api，下面对createActions的源码来分析一下

createActions

createActions的源码会复杂很多，一步一步来分析，不要着急

/*
    createActions接收两个参数actionMap、identityActions
    根据redux-actions的Api文档可以知道，这个actionMap是定义的一个含有多个action的对象
    identityActions是定义任意个数的常量
*/
export default function createActions(actionMap, ...identityActions) {
    /*
        这里对identityActions进行了一次校验，会获取identityActions最后一个元素
        检验其是否为是一个扁平的对象，正常我们传递的都是作为type的普通字符串
        所以会options的值就是{}
    */
    const options = isPlainObject(getLastElement(identityActions))
        ? identityActions.pop()
        : {};
    
    /*
        这里还是像之前说过的，对参数进行校验，如果校验不通过会报出错误
    */
    invariant(
        identityActions.every(isString) &&
        (isString(actionMap) || isPlainObject(actionMap)),
        'Expected optional object followed by string action types'
    );

    /*
        在调用createActions时，传递的参数可以全部是字符串，所以这里对actionMap进行判断
        如果是字符串，直接调用actionCreatorsFromIdentityActions方法
        请移步到actionCreatorsFromActionMap方法分析
    */
    if (isString(actionMap)) {
        return actionCreatorsFromIdentityActions(
            [actionMap, ...identityActions],
            options
        );
    }

    /*
        如果actionMap不是字符串，会调用actionCreatorsFromActionMap方法
        请先移步到actionCreatorsFromActionMap方法分析
        后续的参数identityActions则调用actionCreatorsFromIdentityActions方法
        请先移步到actionCreatorsFromIdentityActions方法分析
        经过分析可以知道，最终返回的结果是经过调用createAction以及camelCase转换后的结果
        所以还是可以通过对象解构的方式获取到每个action方法，即：
            const { increment, decrement, asyncIncrement } = createActions({
                    INCREMENT: value => value,
                    DECREMENT: value => -value
                }, 'ASYNC_INCREMENT')
    */
    return {
        ...actionCreatorsFromActionMap(actionMap, options),
        ...actionCreatorsFromIdentityActions(identityActions, options)
    };
}

在分析actionCreatorsFromIdentityActions之前先分析一下arrayToObject这个方法，因为它会在很多地方用到

/*
    其实从名字上也可以看出，它主要是将array转换为object
    这里应用了数组的reduce方法，分别对每个元素调用callback方法
    并将结果放入到{}中
*/
export default (array, callback) =>
    array.reduce(
        (partialObject, element) => callback(partialObject, element),
        {}
    );

actionCreatorsFromIdentityActions方法源码分析：

/*
    actionCreatorsFromIdentityActions方法接收两个参数identityActions、options
    根据上面的分析可以知道identityActions是一个字符串数组
    而options就是个普通的{}
*/
function actionCreatorsFromIdentityActions(identityActions, options) {

    /*
        根据上面的分析，这里会对identityActions每一个元素调用第二个方法参数
        而这个方法最终生成的对象就是一个包含所有type的一个大的对象
        下面的identity之前说过，就是 value => value 这个函数
        所以最终的actionMap就是类型于：
            {
                'INCREMENT': value => value,
                'DECREMENT': value => value
            }
        这样的对象
    */
    const actionMap = arrayToObject(
        identityActions,
        (partialActionMap, type) => ({ ...partialActionMap, [type]: identity })
    );

    /*
        这里再对生成的actionMap调用actionMapToActionCreators方法，请先到下面看方法分析
        根据下面分析可以知道，actionCreators就是一个包含type-actionCreator的对象
    */
    const actionCreators = actionMapToActionCreators(actionMap, options);

    /*
        再一次调用了arrayToObject方法，这里以actionCreators的key作为第一个参数
        而传入的第二个方法其实不用仔细分析也能知道，只是把type转换为驼峰的形式
        所以最终的对象根actionCreators基本一致，只不过把actionCreators的key进行了驼峰转换
        这也就是我们可以通过对象解构的方式获取到每个action方法，即：
        const { increment, decrement, asyncIncrement } 
            = createActions('INCREMENT', 'DECREMENT', 'ASYNC_INCREMENT')
    */
    return arrayToObject(
        Object.keys(actionCreators),
        (partialActionCreators, type) => ({
            ...partialActionCreators,
            [camelCase(type)]: actionCreators[type]
        })
    );
}

actionMapToActionCreators方法源码分析：

/*
    actionMapToActionCreators接收actionMap这个参数，据上面的分析
    actionMap就是类似
        {
            'INCREMENT': value => value,
            'DECREMENT': value => value
        }
    这样的对象
    下面的prefix可以理解其为undefined，namespace的值为一个常量'/'
    因为这个方法内部还嵌套一个函数，所以先不要看嵌套的函数，先看下面返回值的内容，
    当遇到这个函数的调用的时候，再回头来分析
*/
function actionMapToActionCreators(
    actionMap,
    { prefix, namespace = DEFAULT_NAMESPACE } = {}
) {
    function isValidActionMapValue(actionMapValue) {
        if (isFunction(actionMapValue) || isNil(actionMapValue)) {
            return true;
        }

        if (isArray(actionMapValue)) {
            const [payload = identity, meta] = actionMapValue;
            return isFunction(payload) && isFunction(meta);
        }

        return false;
    }

    /*
        这里还是调用了arrayToObject方法，传递的第二个方法参数稍有复杂
        别着急，还是一步一步分析
        先获取到actionMap中的所有的key，作为arrayToObject的第一参数
    */
    return arrayToObject(
        Object.keys(actionMap),
        /*
            还记得上面分析的arrayToObject函数吗，就是调用了数组的reduce方法
            所以这里初始的partialActionCreators就是空对象{}
            type就是Object.keys(actionMap)每个元素，也就是actionMap的key
        */
        (partialActionCreators, type) => {
            /*
                这里的actionMapValue就是每个key对应的value
                下面还是做了校验，如果不通过报错
            */
            const actionMapValue = actionMap[type];
            invariant(
                isValidActionMapValue(actionMapValue),
                'Expected function, undefined, null, or array with payload and meta ' +
                `functions for ${type}`
            );

            /*
                因为上面分析了prefix就是undefined，所以prefixedType的值就是type
            */
            const prefixedType = prefix ? `${prefix}${namespace}${type}` : type;

            /*
                这里对actionMapValue进行是否为数组校验，然后调用createAction
                createAction就是redux-actions的Api
                最终返回的一个包含type和actionCreator这个key-value的对象
                而这个对象的形式就类似于：
                    {
                        'INCREMENT': incrementActionCreator,
                        'DECREMENT': decrementActionCreator
                    }
                还记得上一篇分析的createAction吗，它的返回值就是一个方法，
                执行这个方法，也就得到了最基本的action
                actionMapToActionCreators分析完了，再回到之前的地方
            */
            const actionCreator = isArray(actionMapValue)
                ? createAction(prefixedType, ...actionMapValue)
                : createAction(prefixedType, actionMapValue);
            return { ...partialActionCreators, [type]: actionCreator };
        }
    );
}

actionCreatorsFromActionMap方法源码分析：

/*
    actionCreatorsFromActionMap接收actionMap、options两个参数
    根据上面的分析，actionMap类似于：
        {
            INCREMENT: value => value,
            DECREMENT: value => -value
        }
    而options就是空对象{}
*/
function actionCreatorsFromActionMap(actionMap, options) {
    /*
        这里调用了flattenActionMap这个方法
        请先移步到flattenActionMap方法的分析
        经过分析可以知道，flatActionMap的值是将对象扁平化
    */
    const flatActionMap = flattenActionMap(actionMap, options);

    /*
        这里再调用actionMapToActionCreators方法
        请先移步到actionMapToActionCreators方法分析
        经过分析可以知道，调用之后的结果就是将每一项调用creatAction
        所以结果类似于：
            {
                'INCREMENT': incrementActionCreator,
                'DECREMENT': decrementActionCreator
            }
    */
    const flatActionCreators = actionMapToActionCreators(flatActionMap);

    /*
        这里调用了unflattenActionCreators方法
        请先移步到unflattenActionCreators的方法分析
        经过分析可以知道，返回的结果是经过驼峰转换后的结果
        这与actionCreatorsFromIdentityActions方法类似
    */
    return unflattenActionCreators(flatActionCreators, options);
}

flattenActionMap方法源码分析：

/*
    flattenActionMap调用了flattenWhenNode方法
    并传入是否为扁平对象这个方法作为参数
    请移步到flattenWhenNode方法分析
*/
export default flattenWhenNode(isPlainObject);

flattenWhenNode方法源码分析：

/*
    flattenWhenNode接收一个predicate参数，并返回一个函数
    predicate为上面传入的isPlainObject
    返回的flatten方法中的参数分别为：
        map：就是上面传入的actionMap
        namespace：常量'/'
        prefix：undefined
        partialFlatMap：{}
        partialFlatActionType：''
    函数里面还有函数，还是一样当调用的时候再分析
*/
export default predicate =>
    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是个Map类型的，则取出其中的key，并用Array.from转换成数组
            如果是Object类型，则用getOwnPropertyNames方法取出自身的key
            所以最终得到的是含有所有key的数组
        */
        ownKeys(map).forEach(type => {
            /*
                遍历每个key，这里分别调用了connectNamespace、connectPrefix方法
                请先移步到这两个方法的分析
                经过上面两个函数的分析，这里的nextNamespace还是type
            */
            const nextNamespace = connectPrefix(connectNamespace(type));

            /*
                这里调用了get方法，因为map可能是Map或者Object类型
                应用get方法得到key对应的value
            */
            const mapValue = get(type, map);

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

        return partialFlatMap;
    };

unflattenActionCreators方法源码分析

/*
    unflattenActionCreators的参数分别为：
        flatActionCreators：即上面传入的flatActionCreators
        namespace为常量'/'
        prefix为undefined
*/
export default function unflattenActionCreators(
    flatActionCreators,
    { namespace = DEFAULT_NAMESPACE, prefix } = {}
) {
    /*
        unflatten的方法参数分别为：
            flatActionType即传入的type
            partialNestedActionCreators为{}
            partialFlatActionTypePath为字符串转化后的数组
    */
    function unflatten(
        flatActionType,
        partialNestedActionCreators,
        partialFlatActionTypePath
    ) {
        /*
            这里对partialFlatActionTypePath去除第一个元素调用了camelCase方法
            还记得分析createAction时说的吗，camelCase就是转化驼峰形式
        */
        const nextNamespace = camelCase(partialFlatActionTypePath.shift());

        /*
            这里对partialFlatActionTypePath做是否为空的判断，别忘了有件事
            上面数组调用了shift方法，而shift方法会改变原来的数组
            最终在partialNestedActionCreators即空{}中放入key、value
                key为经过驼峰转换后的值
                value就是传入的key对应的value
            如果partialFlatActionTypePath不为空，则递归调用unflatten方法
        */
        if (isEmpty(partialFlatActionTypePath)) {
            partialNestedActionCreators[nextNamespace] =
                flatActionCreators[flatActionType];
        } else {
            if (!partialNestedActionCreators[nextNamespace]) {
                partialNestedActionCreators[nextNamespace] = {};
            }
            unflatten(
                flatActionType,
                partialNestedActionCreators[nextNamespace],
                partialFlatActionTypePath
            );
        }
    }

    const nestedActionCreators = {};
    /*
        这里获取flatActionCreators自身的属性key并遍历
        因为prefix为undefined，所以unprefixedType为type
        接着调用unflatten方法
        请先移步到unflatten方法的分析
        经过分析后可知，最终的结果其实主要对key做了驼峰转换
    */
    Object.getOwnPropertyNames(flatActionCreators).forEach(type => {
        const unprefixedType = prefix
            ? type.replace(`${prefix}${namespace}`, '')
            : type;
        return unflatten(
            type,
            nestedActionCreators,
            unprefixedType.split(namespace)
        );
    });

    return nestedActionCreators;
}

createActions实例

/*
    下面这几种方式都可以，经过上面的分析，如果不传入Object，则直接调用createAction
    传入的话，会遍历调用，如果传入的不是扁平Object，则递归遍历，再调用
    最终将key进行驼峰转换
*/
const { increment, decrement, asyncIncrement } = createActions('INCREMENT', 'DECREMENT', 'ASYNC_INCREMENT')

const { increment, decrement, asyncIncrement } = createActions({
    INCREMENT: value => value,
    DECREMENT: value => -value
}, 'ASYNC_INCREMENT')

const { increment, decrement, asyncIncrement } = createActions({
    COUNT: {
        INCREMENT: value => value,
        DECREMENT: value => -value
    }
}, 'ASYNC_INCREMENT')

总结

createActions方法看上去很复杂，但其内部的逻辑很清晰，主要目的就是遍历每个元素，然后分别调用createAction方法，最终还是生成普通的action，只不过如果只用createAction方法只能单独生成，而createActions可以同时生成多个，减少代码量，更加方便书写，也很清晰。