2024年Web前端最新Redux源码解析系列 (四)-- 揭秘applyMiddleware工作原理，2024年最新flutter面试

数据结构与算法

这一块在笔试、面试的代码题中考核较多，其中常考的数据结构主要有：数组、链表、队列、栈、Set、Map、哈希表等，不同数据结构有不同的方法以及储存原理，这些算是技术岗的必备知识。算法部分主要分为两大块，排序算法与一些其他算法题。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

排序算法根据考频高低主要有：快速排序、归并排序、堆排序、冒泡排序、插入排序、选择排序、希尔排序、桶排序、基数排序、Timsort这十种，这类考核点要么是算法的时间、空间复杂度、稳定度，要么是直接手写代码，故在理解算法原理的同时，对JS语言版的排序算法代码也要加强记忆。

• 二叉树层序遍历
• B 树的特性，B 树和 B+树的区别
• 尾递归
• 如何写一个大数阶乘？递归的方法会出现什么问题？
• 把多维数组变成一维数组的方法
• 知道的排序算法 说一下冒泡快排的原理
• Heap 排序方法的原理？复杂度？
• 几种常见的排序算法，手写
• 数组的去重，尽可能写出多个方法
• 如果有一个大的数组，都是整型，怎么找出最大的前 10 个数
• 知道数据结构里面的常见的数据结构
• 找出数组中第 k 大的数组出现多少次，比如数组【1，2， 4，4，3，5】第二大的数字是 4，出现两次，所以返回 2
• 合并两个有序数组
• 给一个数，去一个已经排好序的数组中寻找这个数的位 置（通过快速查找，二分查找）

• createStore

• combineReducers

• bindActionCreators

• applyMiddleware

• compose 本篇文章介绍applyMiddleware。

在分析源码applyMiddleware 之前，让我们先看看middleware是个啥。

Redux里我们都知道dispatch一个action,就会到达reducer，而middleware就是允许我们在dispatch action之后，到达reducer之前，搞点事情。

比如：打印，报错，跟异步API通信等等

下面，让我们一步步来理解下middle是如何实现的：

step 1

---

假设我们有个需求，想打印出dispatch的action之后，nextState的值。

如图：

先用一种很简单的方式去实现

let action = toggleTodo(‘2’);

console.log(‘dispatch’, action);

store.dispatch(action);

console.log(‘next state’, store.getState())

Step 2

---

包裹进函数里

function dispatchAndLoge (store, action) {

let action = toggleTodo(‘2’);

console.log(‘dispatch’, action);

store.dispatch(action);

console.log(‘next state’, store.getState())

}

现在目前感觉还不错了呢~ 但是我们并不想每次要用的时候都需要import这个函数进来，而是希望在用dispatch的时候，直接自带这个功能，于是想到了，直接复写store里的dispatch.

Step 3

---

const next = store.dispatch;

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();

最后

面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

96道前端面试题：

• 

常用算法面试题：

• 

前端基础面试题：
内容主要包括HTML，CSS，JavaScript，浏览器，性能优化

• 

atch的功能啦~

function applyMiddleware(store, middlewares) {

middlewares = middlewares.slice();

middlewares.reverse();

最后

面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

96道前端面试题：

• [外链图片转存中…(img-Ev33hYin-1715428917708)]

常用算法面试题：

• [外链图片转存中…(img-pe42N8pF-1715428917709)]

前端基础面试题：
内容主要包括HTML，CSS，JavaScript，浏览器，性能优化

• [外链图片转存中…(img-Y18XyOiV-1715428917709)]