接着上一讲的中间件机制继续讲。 上一讲中我们实现了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函数,使其能够接收多个中间件,并且是的这些中间件能够叠加使用。代码如下:
// applyMiddleware
export 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(
(
<Provider store={store}>
<App/>
</Provider>
),
document.getElementById('root')
)
复制代码
其中const store = createStore(counter, applyMiddleware(thunk, arrThunk))
,意味着增强后的dispatch具有如下功能
dispatch(action) = thunk(arrThunk(midApi)(store.dispatch)(action))
复制代码
至此,我们的 mini 版 redux 就开发完成咯,有任何问题或意见欢迎联系我。
另外最近正在写一个编译 Vue 代码到 React 代码的转换器,欢迎大家查阅。