Ending
Tip：由于文章篇幅有限制，下面还有20个关于MySQL的问题，我都复盘整理成一份pdf文档了，后面的内容我就把剩下的问题的目录展示给大家看一下
如果觉得有帮助不妨【转发+点赞+关注】支持我，后续会为大家带来更多的技术类文章以及学习类文章！（阿里对MySQL底层实现以及索引实现问的很多）
吃透后这份pdf，你同样可以跟面试官侃侃而谈MySQL。其实像阿里p7岗位的需求也没那么难（但也不简单），扎实的Java基础+无短板知识面+对某几个开源技术有深度学习+阅读过源码+算法刷题，这一套下来p7岗差不多没什么问题，还是希望大家都能拿到高薪offer吧。
store.dispatch = function (action) {
let action = toggleTodo(‘2’);
console.log(‘dispatch’, action);
next(action)
console.log(‘next state’, store.getState())
}
这样下一次我们在用dispatch的时候就自动附带了log的功能，这里的每一个功能，我们都称之为一个middleware，用来增强dispatch的作用。
接下来我们就需要思考，如何可以连接多个middleware，比如一个middle完成打印功能，一个完成报错功能
先把middleware包装成函数写上来
function patchStoreToAddLogging(store) {
let next = store.dispatch
store.dispatch = function dispatchAndLog(action) {
console.log(‘dispatching’, action)
let result = next(action)
console.log(‘next state’, store.getState())
return result
}
}
function patchStoreToAddCrashReporting(store) {
//此时这个dispatch 就是打印log的功能
let next = store.dispatch
store.dispatch = function dispatchAndReportErrors(action) {
try {
// 执行打印log
return next(action)
} catch (err) {
// 执行错误检测
console.error(‘Caught an exception!’, err)
Raven.captureException(err, {
extra: {
action,
state: store.getState()
}
})
throw err
}
}
}
这样我们在用的时候，就可以
// 第一步先将store.dipatch 赋给打印功能
patchStoreToAddLogging(store);
// 第二步先执行第一步的打印功能，在执行自己的功能
patchStoreToAddCrashReporting(store);
这样我们就完成了使用多个middleware。
但是這裏有個不好的地方，就是使用兩個middleware就調用了兩次dispatch
我们应该希望的是很多middleware一层一层的执行，有点像给一个礼物包装上一个又一个的盒子，而这盒子就类似中间件。
这里我们用替代了store.dispatch的方式，其实我们可以直接return store.dispatch，就可以在后面实现一个链式调用。
step 4
function logger(store) {
let next = store.dispatch
return function dispatchAndLog(action) {
console.log(‘dispatching’, action)
let result = next(action)
console.log(‘next state’, store.getState())
return result
}
}
这里需要一个applyMiddleware的方法，可以将这两个middleware连起来。
它主要做一件事：
将上一次返回的函数赋值给store.dispatch
下面是applyMiddleware的雏形，先将参数整理好，然后将每一次middleware返回的函数都赋值给store.dispatch
function applyMiddleware(store, middlewares) {
middlewares = middlewares.slice()
middlewares.reverse()
// Transform dispatch function with each middleware.
middlewares.forEach(middleware =>
// 由于每次middle会直接返回返回函数，然后在这里赋值给store.dispatch,
// 下一个middle在一开始的时候，就可以通过store.dispatch拿到上一个dispatch函数
store.dispatch = middleware(store)
)
}
解释下代码，当我们将[logger1，logger2]作为一个中间件数组传入到applyMiddleware，你猜会发生什么？
在这个middlewares.forEach的循环中，遍历到第一个logger，
store.dispatch = middleware(store)
就相当于
store.dispatch = function Logger1(action) {
console.log(‘Logger1 dispatching’, action)
let result = next(action)
console.log(‘Logger1 next state’, store.getState())
return result
}
注意，这里的next是store之前的dispatch。
也就是说
这个store现在的dispatch方法为
store.dispatch = function Logger1(action) {
console.log(‘Logger1 dispatching’, action)
let result = next(action)
console.log(‘Logger1 next state’, store.getState())
return result
}
然后再遍历到第二个logger
store.dispatch = function Logger2(action) {
console.log(‘Logger2 dispatching’, action)
let result = next(action)
console.log(‘Logger2 next state’, store.getState())
return result
}
注意，到这里的时候，next是等于之前的那个store.dispatch，也就是说这里的next是上面的Logger2
next = function Logger1(action) {
console.log(‘Logger1 dispatching’, action)
let result = next(action)
console.log(‘Logger1 next state’, store.getState())
return result
}
所以现在这个箭头指向的store的dispatch是什么呢？
没错，就是现在这个样子
store.dispatch = function Logger2(action) {
console.log(‘Logger2 dispatching’, action)
let result = function Logger1(action) {
console.log(‘Logger1 dispatching’, action)
let result = next(action)
console.log(‘Logger1 next state’, store.getState())
return result
}
console.log(‘Logger2 next state’, store.getState())
return result
}
看，实际上，现在的store的dispatch是被logger1包装起来，然后再被logger2包装起来。像极了一个礼物呗几个盒子包起来了。
原理实际上就是不断地更新store.dispatch
接下来，我们就可以这样用
applyMiddleware(store, [logger, crashReporter])
刚刚说过，在applyMiddle里必须要给store.dispatch赋值，否则下一个middleware就拿不到最新的dispatch。
但是有别的方式，那就是在middleware里不直接从store.dipatch里读取next函数，而是将next作为一个参数传入，在applyMiddleware里用的时候把这个参数传下去。
step 5
function logger(store) {
return function wrapDispatchToAddLogging(next) {
return function dispatchAndLog(action) {
console.log(‘dispatching’, action)
let result = next(action)
console.log(‘next state’, store.getState())
return result
}
}
}
接着，在applyMiddleware里有可以不用立刻对store.dispatch赋值啦,可以直接赋值给一个变量dispatch，作为middleware的参数传递下去，这样就能链式的增强dispatch的功能啦~
function applyMiddleware(store, middlewares) {
middlewares = middlewares.slice();
middlewares.reverse();
let dispatch = store.dispatch;
middlewares.forEach(middleware => {
dispatch = middleware(store)(dispatch)
})
return Object.assign({}, store, {dispatch})
}
用es6的柯西化写法，可以写成下面的形式，其实这个next我个人觉得叫previous更为合适，因为它指代的是上一个store.dispatch函数。
const logger = store => next => action => {
console.log(‘dispatching’, action)
let result = next(action)
console.log(‘next state’, store.getState())
return result
}
提供报错信息的中间件
const crashReporter = store => next => action => {
try {
return next(action)
} catch (err) {
console.error(‘Caught an exception!’, err)
Raven.captureException(err, {
extra: {
action,
state: store.getState()
}
})
throw err
}
}
由此我们可以看到所以middleware要传入的参数就是三个，store,next,action。
接下来，看一个实例，redux-thunk 的源码，我们知道，它用于异步API，因为异步 API action creator返回的是一个funciton，而不是一个对象，所以redux-thunk做的事情 其实很简单，就是看第三个参数action是否是function,是的话，就执行它，如果不是， 就按照原来那样执行next(action)
function createThunkMiddleware(extraArgument) {
return (store) => next => action => {
if(typeof action === ‘function’) {
return action(dispatch, getState, extraArgument)
}
return next(action)
}
}
const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;
export default thunk;
最近我根据上述的技术体系图搜集了几十套腾讯、头条、阿里、美团等公司21年的面试题，把技术点整理成了视频（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节，由于篇幅有限，这里以图片的形式给大家展示一部分
ent)
}
return next(action)
}
}
const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;
export default thunk;
[外链图片转存中…(img-cD2t2mkV-1715005437834)]
最近我根据上述的技术体系图搜集了几十套腾讯、头条、阿里、美团等公司21年的面试题，把技术点整理成了视频（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节，由于篇幅有限，这里以图片的形式给大家展示一部分
[外链图片转存中…(img-soRXH1aX-1715005437835)]
381
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
