今天在看 redux
源码的时候,在中间件这里有几个疑问:
这是 redux-thunk
:
function createThunkMiddleware(extraArgument) {
// #1 #2
return ({ dispatch, getState }) => next => action => {
if (typeof action === 'function') {
return action(dispatch, getState, extraArgument);
}
return next(action);
};
}
const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;
export default thunk;
这是一个自定义的 logger
中间件:
// #3 #4 #5
const logger = store => next => action => {
console.log('dispatching', action)
let result = next(action)
console.log('next state', store.getState())
return result
}
redux 中 applyMiddleware
的部分源码:
const middlewareAPI = {
getState: store.getState,
dispatch: action => dispatch(action)
}
// 注册中间件调用链
chain = middlewares.map(middleware => middleware(middlewareAPI)) // 调用中间件并返回结果
// 传入dispatch供各个中间件使用,这里会有一连串的函数组合,最后一个函数先执行,然后依次项前一项执行,所以要考虑中间件的顺序 返回加强后的dispatch
dispatch = compose(...chain)(store.dispatch)
redux 的 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)))
}
这里我想问下,就是在执行 applyMiddleware(thunk,logger)
的时候,logger
函数返回的第三个函数 #5
作为 thunk #1函数的参数
,最后返回 #2
为 dispatch
函数,如果这时候的 dispatch
一个action
是函数的话,那么不就是执行下面 if
:
if (typeof action === 'function') {
return action(dispatch, getState, extraArgument);
}
那么由logger
传给thunk
的函数不就是不执行了?也就是 #1
号函数的参数是logger
传过来的函数
这是闭包的一个巧妙使用,具体可以参考我写的这篇文章:https://segmentfault.com/a/11...