接着上一讲的中间件机制继续讲。 上一讲中我们实现了redux-thunk中间件，使得增强后的dispatch不仅能够接收对象类型的action，还能够接收函数类型的action。 在此我们是否能够在构造一个中间件，使得增强后的dispatch还能处理action组成的数组，如下：

export function buyHouse() {    return {
   type: BUY_House}}export function buyHouseAsync() {    return dispatch => {        setTimeout(() => {            dispatch(buyHouse())        }, 2000)    }}export function buyTwice() {    return [buyHouse(), buyHouseAsync()]}复制代码

构造中间件redux-arrThunk

为此我们决定再构造一个中间件，命名redux-arrThunk，使增强后的dispatch还能处理action组成的数组。代码如下：

const arrThunk = ({dispatch, getState}) => next => action => {    // next为原生的dispatch    // 如果是数组，依次执行数组中每一个action，参数是dispatch和getState    if (Array.isArray(action)) {        return action.forEach(v=>dispatch(v))    }    // 如果不满足条件，则直接调用下一个中间件（使用next）    // 如果满足条件，则需要重新dispatch（调用dispatch）    // 默认直接用原生dispatch发出action    return next(action)}复制代码

中间件叠加使用

因为原理类似第三讲中的redux-thunk，上面的代码并不难，但问题是，我们如何将这两个中间件叠加起来使用，为此我们需要修改之前的applyMiddleware函数，使其能够接收多个中间件，并且是的这些中间件能够叠加使用。代码如下：

// applyMiddlewareexport function applyMiddleware(...middlewares) {    return createStore => (...args) => {        // 第一步 获得原生store以及原生dispatch        const store = createStore(...args)        let dispatch = store.dispatch                const midApi = {            getState: store.getState,            dispatch: (...args) => dispatch(...args)        }        // 第二步 将原生dipatch传入中间件进行扩展增强，生成新的dispatch        const middlewaresChain = middlewares.map(middleware => middleware(midApi))        dispatch = compose(...middlewaresChain)(dispatch)        // dispatch = middleware(midApi)(dispatch)        return {            ...store, // 原生store            dispatch, // 增强扩展后的dispatch        }    }}// compose//compose(fn1, fn2, fn3) return为 fn1(fn2(fn3))export function compose(...funcs) {    if (funcs.length === 0) {        return arg => arg    }    if (funcs.length === 1) {        return funcs[0]    }    return funcs.reduce((ret, item) => (...args) => ret(item(...args)))}复制代码

对比上一讲中的applyMiddleware，这一次主要是在处理中间件时，对中间件进行了遍历，并且通过compose方法使得多个中间件可以叠加使用，即将fn1, fn2, fn3 转换为 fn1(fn2(fn3))

// 之前dispatch = middleware(midApi)(dispatch)// 之后const middlewaresChain = middlewares.map(middleware => middleware(midApi))dispatch = compose(...middlewaresChain)(dispatch)复制代码

因此可以像如下代码一样进行叠加使用多个中间件

import React from 'react'import ReactDOM from 'react-dom'import { createStore, applyMiddleware } from './mini-redux'import { Provider } from './mini-react-redux'import { counter } from './index.redux'import thunk from './mini-redux-thunk'import arrThunk from './mini-redux-arrThunk'import App from './App'const store = createStore(counter, applyMiddleware(thunk, arrThunk))ReactDOM.render(    (        
                
             
        ),    document.getElementById('root'))复制代码

其中const store = createStore(counter, applyMiddleware(thunk, arrThunk))，意味着增强后的dispatch具有如下功能

dispatch(action) = thunk(arrThunk(midApi)(store.dispatch)(action))复制代码

至此，我们的 mini 版 redux 就开发完成咯，有任何问题或意见欢迎联系我。

另外最近正在写一个编译 Vue 代码到 React 代码的转换器，欢迎大家查阅。