Redux 是一种 JavaScript 应用程序状态容器。它提供了一个可以将整个应用程序状态组织在一起的中央存储区域。Redux 的概念很简单，但有一个函数，被称为“reducer”，每当应用程序中发生任何更改时，都会被调用。本文将会介绍 Redux 中间件的概念、作用和使用。
什么是中间件
中间件指的是 Redux 中介于 action 和 reducer 之间的一组函数。它们对传递的 action 进行操作，并对下一个中间件或应用程序的 reducer 进行调用。中间件可以用来添加额外的行为比如日志、错误报告、带有延迟加载的异步调用等。通过中间件，可以将相同的功能功能共享在整个应用程序中，这样可以大大简化应用程序代码。
经典中间件案例 - 日志中间件
在经典的 Redux 教程中，通常会用一个最简单的日志中间件作为开始介绍 Redux 中间件的用法。它大致是这个样子：
const logger = store => next => action => {
console.log('dispatching', action)
let result = next(action)
console.log('next state', store.getState())
return result
}这段代码看起来很奇怪，因为它使用了大量的函数式编程的技术。它实际上是一个高阶函数，也就是一个返回一个函数的函数。它的作用如下：
- 第一部分
store => next => action => {...}定义了它接收一个 store 的参数，返回一个函数，这个函数接收一个 next 参数并返回另一个函数，最后这个函数接收一个 action 参数并返回一些值。 - 第二部分的
console.log('dispatching', action)会在每次分派 action 时打印日志。 - 第三部分的
let result = next(action)"会调用下一个中间件，也就是 reducer 本身，来处理当前的 action。 - 第四部分的
console.log('next state', store.getState())最后打印下一个状态来表示行为和下一个状态已经被成功处理。
这是一个非常简单和有用的例子，它让我们更好地理解 Redux 中间件以及如何编写自己的中间件。我们可以对其进行更多的进一步扩展，以达到您的业务需求。
使用中间件
使用中间件非常简单。Redux 提供了一个 applyMiddleware() 函数。只需将您想要使用的中间件作为参数传递即可。比如，如果您想使用上述代码中的日志中间件，您可以这样写：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- ------- ------ ----- ---- ------------- ------ ------ ---- -------------------- ------ ----------- ---- ------------ ----- ---------- - ------- ------- ----- ----- - ------------ ------------ ------------------------------ -
可以使用数组语法来添加多个中间件。
总结
在本文中，我们详细介绍了 Redux 中间件的概念、作用和使用方法，并以日志中间件为例，向读者展示了中间件编写和使用的过程。中间件是 React 生态系统中的一个非常重要的概念，它能够将部分逻辑和功能简单地分离出来。中间件概念在任何项目中都非常适用，希望本文能给大家在使用 Redux 过程中，带来帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654a049a7d4982a6eb43b37a