redux-actions源码分析五 ———— combineActions

2018-12-02

前面分析了redux-actions的四个Api，combineActions也是其很重要并且很常用的Api，之前写的不同type的处理函数都是分开写的，但是如果有关联的操作，还是需要分别写，而combineActions正好可以将它们结合起来，使得代码更加简便，下面对其源码进行分析一下

combineActions

/*
    isValidActionType会校验type是否为String、Function、Symbol类型
*/
function isValidActionType(type) {
    return isString(type) || isFunction(type) || isSymbol(type);
}

/*
    isValidActionTypes会校验types数组是否为空
    如果不为空再分别调用isValidActionType方法
*/
function isValidActionTypes(types) {
    if (isEmpty(types)) {
        return false;
    }
    return types.every(isValidActionType);
}

/*
    combineActions接收任意个数的actionType
    先对其进行isValidActionTypes校验，不通过会报错
*/
export default function combineActions(...actionsTypes) {
    invariant(
        isValidActionTypes(actionsTypes),
        'Expected action types to be strings, symbols, or action creators'
    );

    /*
        这里会遍历actionsTypes的每一项，然后调用toString方法做字符串转换
        最终用'||'连接，生成一个大的字符串
        然后返回一个对象，key为toString，value为一个函数返回combinedActionType
    */
    /*
        这里着重说一下为什么这么处理：
        还记得在分析handleAction这个Api的时候，刚开始会先按'||'切割，然后判断是否在其中
        const types = toString(type).split(ACTION_TYPE_DELIMITER);
        所以这里用了常量'||'进行连接
    */
    const combinedActionType = actionsTypes
        .map(toString)
        .join(ACTION_TYPE_DELIMITER);
    
    /*
        这里为什么会返回一个key为toString的对象呢？
        请看下面的combineActions实例，里面会有详细解释
    */
    return { toString: () => combinedActionType };
}

combineActions实例

看过redux-actions的文档，可以知道combineActions的用法

/*
    这是combineActions的正常用法，可以看到它会放入到handleActions第一参数Object中
    如果正常以变量值作为Object的key，则会成为Object的属性
    所以应用es6语法[]，这样就会把变量的值作为key
    而[]正好调用的是内部变量的toString方法，这也就说明了上面为什么返回的Object的
    key是toString，其value为函数，调用后直接能得到上面的combineActionType
*/
handleActions({
    [combineActions(increment, decrement)]: (state, payload) => {
        return { ...state, num: state.num + payload.num }
    }
}, { num: 1 })

combineActions其它地方其实跟handleActions都很类似，但是数据处理函数会稍有不同，因为传入的值是需要满足所有map的，这就需要对payload有不同的要求，并不能像以前分开的一样，即使传入的相同得到的也是不同的结果

总结

以前写的reducer是根据type来区分的，而combineActions则是根据传入的数据进行区分的。相对来说，更适合将操作相似的reducer结合在一起，如果偏差很大，用起来会很麻烦，所以实际应用中如果不能分清哪些操作相似，还是尽量少用，因为可能需要对传入的数据进行转换。

整体总结

以上用了5篇文章分别从源码的角度并结合实例详细分析了redux-actions的Api，可以看出，我们平时开发应用广泛的createActions、handleActions都是基于createAction、handleAction进行实现的，只不过其内部做了很多处理，而且也支持了像Map、Array这些类型，但是他们终究还是要生成redux能够是别的action、reducer。但使用redux-actions后，可以简化开发时的书写，使得代码更加清晰易懂。

其实redux-actions还有另外一个Api，createCurriedAction，但其应用非常非常少，官方文档都没有具体说明用法，而且它也是基于其它库开发的，所以这里就先不做介绍了，能用好之前介绍的5个Api，足以开发正常应用了。

读后收获

读过redux-actions源码后，从中收获了很多，简单总结一下：

1、通过原型的方式可以判断出一个对象是否为扁平对象

2、通过以函数作为参数的方式来实现复杂的功能

3、函数还可以再返回函数，以此来达到高阶函数的效果

4、数组操作的Api中，有一些会改变原有数组，这一点一定要熟知

5、基本类型、引用类型的类型判断方式，以及其Api的操作方式，得到结果是什么样子的

6、es6语法中一些语法内部的实现，以及其底层应用了什么方法，比如上面说的以[变量]作为Object的key是调用了toString方法

7、理解中间件设计的中心思想，简化代码编写、易于理解、阅读清晰

8、阅读源码可以清晰的知道每个Api的正确使用方式，以及明白这样做最终结果是什么样子的。而不是看了文档只是照搬照抄，过于局限。

….

其实还有很多，就不再一一列举了，但有一点很重要，那就是js基础，任何框架、库都是基于基础的，所以打好基础是重中之重。