Redux源码详细分析五 ———— applyMiddleware

2018-11-13

applyMiddleware这个Api在应用Redux中间件时使用，比如平时开发用的react-redux、redux-thunk、redux-saga等工具，都需要应用applyMiddleware将其与redux结合才可以使用。

applyMiddleware

applyMiddleware的源码也不多，但也需要仔细读一下才能理解：

//applyMiddleware接收任意多个function类型的参数，将其转换成数组传入，并返回一个高阶函数
export default function applyMiddleware(...middlewares) {

    /*
        applyMiddleware会作为createStore的第三个参数传入，先来看一下createStore对应的代码：

            if (typeof enhancer !== 'undefined') {
                if (typeof enhancer !== 'function') {
                throw new Error('Expected the enhancer to be a function.')
                }

                return enhancer(createStore)(reducer, preloadedState)
            }
            先对其进行校验，如果已经传入并且是个function，则返回
                enhancer(createStore)(reducer, preloadedState)
            这里的参数createStore即之前的createStore方法，
            后面两个参数就是createStore传入的前两个参数
    */
    return createStore => (...args) => {
        
        /*
            根据上面分析，这里的store得到的就是createStore(reducer, preloadedState)
        */
        const store = createStore(...args)

        //这里定义的dispatch函数的作用是，当用中间件重新构建createStore还未结束时，应用dispatch会报错
        let dispatch = () => {
            throw new Error(
                `Dispatching while constructing your middleware is not allowed. ` +
                `Other middleware would not be applied to this dispatch.`
            )
        }

        /*
            这里定义的middlewareAPI将作为默认的参数传入每个中间件中，
            其中getState为当前的store.getState，dispatch为上面定义的函数，并将reducer、preloadedState传入，
            这个middlewareAPI的作用就是让中间件可以调用到原来的store
        */
        const middlewareAPI = {
            getState: store.getState,
            dispatch: (...args) => dispatch(...args)
        }

        //遍历传入的中间件，然后将middlewareAPI传入每个中间件中，执行后，最终得到一个中间件数组
        const chain = middlewares.map(middleware => middleware(middlewareAPI))

        /*
            中间件的个数可以为任意多个，调用compose方法，并将store.dispatch作为后续的参数传入，并得到新的dispatch
            最终的样子为：
                dispatch = middleware1(middleware2(middleware3(store.dispatch)))
        */
        dispatch = compose(...chain)(store.dispatch)

        /*
            因为createStore返回多个Api函数，所以这里应用...对其进行扩展，同时用新得到的dispatch替换之前的dispatch
        */
        return {
            ...store,
            dispatch
        }
    }
}

通过上面的分析可以知道，applyMiddleware最终返回的还是一个createStore，只不过是应用了其它中间件进行封装，并更改了dispatch这一Api

applyMiddleware实例：

import { applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import createSagaMiddleware from 'redux-saga'

export const sagaMiddleware = createSagaMiddleware();

/*
    这里引入redux-thunk和redux-saga两个库，应用applyMiddleware时，根据上面分析可知：
    首先会得到store = createStore(reducer, preloadedState)，
    每个中间件都会调用上面提到的middlewareAPI，也就是中间件可以获得原来store的getState、reducer和preloadedState
    得到：
        chain = [newSagaMiddleware, newThunk]
    再chain放入compose方法内，并将store.dispatch作为后续的参数传入
    所以得到的结果是：
        dispatch = newSagaMiddleware(newThunk(store.dispatch))
    最终会返回所有createStore内部的Api方法，并将原有dispatch替换
*/
export default applyMiddleware(
    sagaMiddleware,
    thunk
)

所以，applyMiddleware并不会改变原来createStore内部除dispatch之外的其它方法，因为在日常应用中间件的时候，大多是在处理异步、观察日志等场景下应用，而这些场景都是要在派发action时触发。可以有人会说react-redux这个常用的中间件是要在每个组件中都获取到状态，这不需要更改getState吗？其实这个中间件并不会改变原有的getState方法，因为它是应用了React的context Api将数据传递到每个组件中，后续也会推出react-redux这一中间件的源码分析。

总结

以上的五篇文章分别对Redux中五个Api进行了具体分析，经过详细解读后，其实可以发现，Redux底层的实现原理并不复杂，每一个Api的内部逻辑相对来说都很清晰，但每一个的内部都运用了大量的Javascript的基础知识，像闭包、原型链、高阶函数、ES6等，尤其是闭包，redux可以说将其发挥到了极致，这也正是表明了这个库为什么如此受欢迎。

通过源码分析，可以加深对Redux整体架构的理解，同时在日常开发中使用起来能够更加得心应手。