理解applyMiddleware需要跟createStore结合.首先来看createStore是怎样创建store的.再来看createStore 的源码createStore的第三个参数enhancer就是applyMiddleware,此时createStore会返回enhancer(createStore)(reducer, preloadedState),也就是createStore在中间件里面去执行了applyMiddleware返回的是函数A(也就是applyMiddleware(…middlewares) =函数A,然后又跑到createStore里面作为第三个参数),所以能把createStore作为参数传进去一个小例子,测试返回函数后是什么东西import compose from ‘./compose’/** * Creates a store enhancer that applies middleware to the dispatch method * of the Redux store. This is handy for a variety of tasks, such as expressing * asynchronous actions in a concise manner, or logging every action payload. * * 创建一个redux store的dispatch方法使用中间件的store增强器. 对于不同的人任务,这将会 * 非常方便,比如可以用非常简单的方式进行异步操作,或者输出action的payload * * See redux-thunk
package as an example of the Redux middleware. *查看redux-thunk
包作为一个redux中间件的例子 * * Because middleware is potentially asynchronous, this should be the first * store enhancer in the composition chain. * * 因为中间件默认是异步的,这应该是合成链中的第一个store增强器 * * Note that each middleware will be given the dispatch
and getState
functions * as named arguments. *注意每个中间件都会以dispatch
and getState
方法作为参数 * @param {…Function} middlewares The middleware chain to be applied.提供的中间件 * @returns {Function} A store enhancer applying the middleware.store增强器应用的中间件 */export default function applyMiddleware(…middlewares) { return (createStore) => (reducer, preloadedState, enhancer) => { const store = createStore(reducer, preloadedState, enhancer) let dispatch = store.dispatch let chain = [] const middlewareAPI = { getState: store.getState, dispatch: (action) => dispatch(action) } chain = middlewares.map(middleware => middleware(middlewareAPI)) dispatch = compose(…chain)(store.dispatch) return { …store, dispatch } }}