前言
上一章节 我们已经解析了Redux 的createStore 的基本使用方法。其中有涉及到第三个参数enhancer, 其对应的就是中间件的概率,我们这一章节我对其进行简单的分析.
Demo
下面代码是一个我们使用了中间件的一个简单的demo 我可以根据下面的步骤执行脚本,可以运行demo 查看效果:
1
git clone git@github.com:bluebrid/redux-learning.git
2
git fetch
3
git checkout middleware
4
npm i
5
npm start
下面是创建一个有中间件的Store 的demo:
import { createStore, applyMiddleware, compose } from '../redux'
import thunk from '../reduxThunk'
import { createLogger } from 'redux-logger'
import api from '../middleware/api'
import rootReducer from '../reducers'
import DevTools from '../containers/DevTools'
const configureStore = preloadedState => {
const store = createStore(
rootReducer,
preloadedState,
compose(
applyMiddleware(thunk, api, createLogger()),
DevTools.instrument()
)
)
if (module.hot) {
module.hot.accept('../reducers', () => {
store.replaceReducer(rootReducer)
})
}
return store
}
export default configureStore
复制代码
下面我们会针对这个代码,进行一步步深入的分析。
compose
从第一章节,我们已经知道第三个参数是一个enhancer ,其实也就是一个中间件的概念,但是为我们从上面的脚本看到,第三个参数居然是执行了一个compose 的方法, 我接下来就分析下这个compose 方法,代码:
export default function compose(...funcs) {
if (funcs.length === 0) {
return arg => arg
}
if (funcs.length === 1) {
return funcs[0]
}
return funcs.reduce((a, b) => (...args) => a(b(...args)))
}
复制代码
如果传入的中间件的个数为:0,返回一个空函数,则相当于什么也不操作, 如果传入的参数长度为: 1, 则直接返回这个函数, 下面才是重点,return funcs.reduce((a, b) => (...args) => a(b(...args)))
TODO.....
作者:bluebrid
链接:https://juejin.im/post/5b8cf2e86fb9a01a20229635
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。