文章首发于个人博客 https://github.com/mcuking/bl...相关代码请查阅 https://github.com/mcuking/bl...react
接着上一讲的中间件机制继续讲。
上一讲中咱们实现了redux-thunk中间件，使得加强后的dispatch不只可以接收对象类型的action，还可以接收函数类型的action。
在此咱们是否可以在构造一个中间件，使得加强后的dispatch还能处理action组成的数组，以下：git
export function buyHouse() {
return {type: BUY_House}
}
export function buyHouseAsync() {
return dispatch => {
setTimeout(() => {
dispatch(buyHouse())
}, 2000)
}
}
export function buyTwice() {
return [buyHouse(), buyHouseAsync()]
}
为此咱们决定再构造一个中间件，命名redux-arrThunk，使加强后的dispatch还能处理action组成的数组。代码以下：github
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函数，使其可以接收多个中间件，而且是的这些中间件可以叠加使用。代码以下：redux
// 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)
所以能够像以下代码同样进行叠加使用多个中间件app
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具备以下功能dom
dispatch(action) = thunk(arrThunk(midApi)(store.dispatch)(action))
至此，咱们的mini-redux就开发完成咯，有任何问题或意见欢迎联系我。ide
相关文章以下：函数