redux-thunk源码分析

2018-11-16

前面分析了redux所有api的源码，接下来分析一下redux常用中间件的源码。因为redux只能处理同步的数据变化，但很多时候需要ajax异步获取数据，所以就需要应用相关中间件来处理。这篇文章就来分析一下异步处理常用中间件redux-thunk的源码。

applyMiddleware

因为应用中间件需要用到applyMiddleware这一api，所以要结合applyMiddleware的源码一起来分析。

export default function applyMiddleware(...middlewares) {
    /*
        之前分析过，applyMiddleware会作为createStore的第三个参数传入，
        最终会生成：enhancer(createStore)(reducer, preloadedState)
    */
    return createStore => (...args) => {
        /*
            所以，下面的store也就是去除掉enhancer之后并由createStore生成的函数
        */
        const store = createStore(...args)
        let dispatch = () => {
            throw new Error(
                `Dispatching while constructing your middleware is not allowed. ` +
                `Other middleware would not be applied to this dispatch.`
            )
        }
        /*
            这里获取到store的getState，以及根据上面的dispatch函数来设置新的dispatch
            将这些传入到中间件中
        */
        const middlewareAPI = {
            getState: store.getState,
            dispatch: (...args) => dispatch(...args)
        }
        /*
            遍历每个中间件，并将middlewareAPI作为参数传入，并应用compose方法，将处理后的middleware
            和store原有的dispatch传入，再一次生成新的dispatch，替换掉上面的dispatch
        */
        const chain = middlewares.map(middleware => middleware(middlewareAPI))
        dispatch = compose(...chain)(store.dispatch)

        /*
            最终导出store的每一项和dispatch，这里应用对象的解构使得新的dispatch替换了store原有的dispatch
        */
        return {
            ...store,
            dispatch
        }
    }
}

redux-thunk

本以为redux-thunk内部实现会很复杂，但其源码就这几行，但要理解这几行代码也并非易事，还是要仔细分析一下。

结合上面以及之前的文章分析的applyMiddleware，来看一下redux-thunk的源码

/*
    因为下面导出了thunk，而thunk是直接执行的createThunkMiddleware函数
    也就是导出来createThunkMiddleware的返回值
*/
function createThunkMiddleware(extraArgument) {
    /*
        这里应用的箭头函数，并以函数作为返回值一层一层传递下去，换成es5的写法是：
        function({ dispatch, getState }){
            return function(next){
                return function(action){
                    if (typeof action === 'function') {
                        return action(dispatch, getState, extraArgument);
                    }
                    return next(action);
                }
            }
        }
        第一个函数的参数{ dispatch, getState }正是上面middlewareAPI，
            这里是应用了对象的解构，但是由于下面重新对dispatch进行赋值，
            所以在我们写的action中的dispatch参数是增强后的dispatch
            也就是compose(...chain)(store.dispatch)
        第二个函数的参数next正是上面分析过的store原有的dispatch方法，
            这只是在只有一个中间件的时候，如果有多个中间件，且redux-thunk
            不是最后一个的话，next则是经过别的中间件处理后的函数
        第三个函数的参数action正是我们平时写的action
        然后对action进行判断，如果为函数，则将上面的dispatch、getState传入action中
        如果不是函数，则直接返回next(action)，也就是store.dispatch(action)
    */
    return ({ dispatch, getState }) => next => action => {
        if (typeof action === 'function') {
            return action(dispatch, getState, extraArgument);
        }
        return next(action);
    };
}
const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;
export default thunk;

所以，我们平时在应用redux-thunk的时候，会定义一个函数，并返回一个新的函数，同时以dispatch getState作为参数

举例说明一下：

export const increment = () => {
    return (dispatch, getState) => {
        setTimeout(() => {
            dispatch({
                type: INCREMENT
            })
        }, 1000)
    }
}

这就是一个典型的应用redux-thunk异步action的写法，而返回函数的参数dispatch getState也正是上面我们分析过的

总结

通过上面逐行代码的分析可以知道，正常redux定义的action只能是对象类型，但使用redux-thunk后，可以以函数作为action，而异步执行的操作可以在放在action函数体内，并在异步操作结束后再dispatch。