redux-actions源码分析一 ———— createAction

2018-11-23

redux-actions这个中间件在平时的开发中会经常用到，可以省去繁琐的写法，很方便的写action，下面会用几篇文章分别对它里面的每个Api进行详细分析，还是像之前一样，分析源码的同时结合实际例子，帮助理解。

createAction

源码：

/*
    createAction接收三个参数，除了第一个之外，其它都是可以不传递的
    type: 就是平时定义action要写的type
    payloadCreator: 平时定义action时经常会传递参数（payload），而它正是生成payload的方法
                    这里它有默认值identity，这个identity其实很简单，就是value => value
                    如果不传，它就是很简单的参数=返回值
    metaCreator: 很少会用到，可以忽略
*/
export default function createAction(
    type,
    payloadCreator = identity,
    metaCreator
) {
    /*
        invariant是一个第三方工具，其详细用法可以去github查一下
        这里的意思就是对payloadCreator进行是否为函数、是否为null检验
        如果都不通过，就会报出下面的错误
    */
    invariant(
        isFunction(payloadCreator) || isNull(payloadCreator),
        'Expected payloadCreator to be a function, undefined or null'
    );

    /*
        finalPayloadCreator即为最终的payload生成函数，这里也是做了校验
    */
    const finalPayloadCreator =
        isNull(payloadCreator) || payloadCreator === identity
        ? identity
        : (head, ...args) =>
            head instanceof Error ? head : payloadCreator(head, ...args);

    const hasMeta = isFunction(metaCreator);
    const typeString = type.toString();

    /*
        这个actionCreator就是最终createAction要返回的函数
        它接收任意多个参数，最终会把这些参数传入到上面的finalPayloadCreator
        创建一个对象action，其属性type为createAction传入的type
        其属性payload为经过finalPayloadCreator处理后的payload
        meta属性很少用到，可以不用考虑
        最终导出action
    */
    const actionCreator = (...args) => {
        const payload = finalPayloadCreator(...args);
        const action = { type };

        if (payload instanceof Error) {
            action.error = true;
        }

        if (payload !== undefined) {
            action.payload = payload;
        }

        if (hasMeta) {
            action.meta = metaCreator(...args);
        }

        return action;
    };

    actionCreator.toString = () => typeString;

    return actionCreator;
}

经过上面的分析，可以看到createAction内部的实现其实很简单，主要就是对payload做了一层特殊的处理，将以函数的形式创建，最终createAction导出一个函数，而执行函数后的结果，就是一个正常的action

createAction实际应用

const increment = createAction('INCREMENT')

/*
    这是createAction最简单用法，这里'INCREMENT'即为type
    根据上面分析：createAction最终会返回一个名为actionCreator的函数
    执行这个函数会返回一个action的对象，如果没有传递payloadCreator
    其默认为 value => value，finalPayloadCreator也为 value => value
    而下面执行increment时，并没有传递参数，
    所以actionCreator中定义的常量payload即为undefined，不会放入action中
    最终生成的action为{ type: 'INCREMENT' }
*/
increment()

/*
    执行这个函数，其它的逻辑跟上面一样，但是因为传递了参数1，所以最终的payload
    不会是undefined，因为finalPayloadCreator也为 value => value
    所以payload值为1
    最终生成的action为{ type: 'INCREMENT', payload: 1 }
*/
increment(1)

除了默认的payloadCreator之外，还可以自定义payloadCreator

const decrement = createAction('DECREMENT', value => -value)

/*
    别的逻辑还是一样，只不过这里自定义了payloadCreator，所以finalPayloadCreator
    就是这里自定义的payloadCreator，生成的payload即为-1
    最终的action为{ type: 'DECREMENT', payload: -1 }
*/
decrement(1)

进一步分析：

/*
    可能有人对这个finalPayloadCreator这个判断条件不太理解
    如果不传递payloadCreator没什么好说的，finalPayloadCreator就是value => value
    但如果传递了，即使传递还是 value => value，也会走到else的逻辑
    因为function是引用类型，其在内存中并不是直接保存值，保存的是执行的地址
    而传入的payloadCreator与identity虽然一样，但地址不同，所以也是不相等的
    else的函数又对传递的参数做了原型是否为Error的校验，
    其中head就是传递的第一个参数，args是后续的参数，
    payloadCreator(head, ...args)就是正常执行传递过来的payloadCreator
*/

const finalPayloadCreator =
        isNull(payloadCreator) || payloadCreator === identity
        ? identity
        : (head, ...args) =>
            head instanceof Error ? head : payloadCreator(head, ...args);

总结

createAction内部其实很简单，但也有很多需要思考并注意的地方，但不过怎样，最终还是要生成一个普通的action，只不过让我们在开发时更加方便操作。