在 Redux 中，Middleware 是洋葱模型的重要组成部分，它允许你在 action 创建函数到达 reducer 之间执行自定义的逻辑。Middleware 可以用于实现日志记录、异步操作、错误处理等场景。在本文中，我们将介绍 Redux Middleware 的开发与实践，为你提供深度的学习和指导意义。
Middleware 基本概念及机制
首先让我们来了解 Middleware 的基本概念。Middleware 是一系列的处理函数，依次执行至 reducer，根据各自的功能可以分为以下几类：
- 修改 store：修改 store 的值，比如更改某个属性、控制某个异步操作等。
- 处理 action：单纯处理 action，比如日志记录、验证、派发其它 action 等。
- 处理 API：处理 API 调用的情况。
Middleware 通过 applyMiddlewares 函数调用，该函数是 Redux 的核心插件的创建函数，下面是一个基本的中间件执行流程示意图：
我们可以看到，applyMiddlewares() 函数负责逐级处理 Middleware，而每个 Middleware 会执行下一个 Middleware 的 dispatch 函数并将结果向前传递，最后到达 reducer 进行更新。
Middleware 的基本机制是通过闭包实现的，一个 Middleware 可以通过 next 对象获取下一个 Middleware 的 dispatch 函数并执行。比如下面是一个简单示例代码：
-- -------------------- ---- ------- -- ---------- ---- ----- ---------- - ---- -- ------ -- - --------------------------- ------------ ------ ------------ - -- ----- ---------- - -------- -- ---------------------------- ----- ----------------- --展开代码
在上面的示例中，middleware 函数会输出当前 action 的 type，然后调用下一个 Middleware 的 dispatch 方法并传入 action 对象，与之前介绍的中间件机制是相同的。
Middleware 的实践
接下来我们将用实例来介绍如何编写 Middleware，并实现一个简单的请求记录中间件。
编写 Middleware
首先，我们需要编写一个 Middleware，来完成记录请求的功能。middleware 可以存储和输出请求相关的信息，比如请求开始时间、请求 URL 等。下面是一个简单的记录请求信息的 Middleware 示例代码：
-- -------------------- ---- ------- -- ------- ---------- ----- ----------------------- - ----- -- - -- ------- --- --------- - ---- --- --- - ---- -- -- ---------- ---- ------ ---- -- ------ -- - -- --------- --- -- ------------ --- ---------------- - --------- - --- ---------------- --- - ------------------ ------------------------- ----- ------- ---------- - -- --------------- -- ------------ --- --------------- - ----- ------- - --- ---------------- ----- -------- - ------- - --------- ------------------------- --- ------- -------- -- --------------- - -- ----- ---------- ------ ------------ - -展开代码
在上面的代码中，我们实现了一个 requestLoggerMiddleware，该 Middleware 会在请求开始和结束时记录请求相关的信息，并输出到控制台。接下来我们需要集成该 Middleware 到我们的 Redux 应用中。
集成 Middleware
要在 Redux 中集成 Middleware，我们需要使用 applyMiddleware 函数来打造一个高阶 Store 创建函数 (store enhancer)。applyMiddleware 函数接收一个或多个 Middleware，并返回一个 Store 创建函数。下面是示例代码：
-- -------------------- ---- ------- -- -- ----- ---- ------ - ------------ --------------- - ---- ------- -- ----- ---------- ------ ----------------------- ---- --------------------------------------- -- --- ------- ----- ------- - ------- ------- -- - ------ ------------- - -- ----- -- -------------- ----- - - -- --- ----- -------- ----- ------------------------- - ---------------- ------------------------ -- -- ----------------------- - ---------- -- -------------- -- -- ----- ----- ----- - ---------------------------------- ---展开代码
在上面的代码中，我们使用 applyMiddleware 函数，将 requestLoggerMiddleware 添加到 Middleware 列表中。然后，我们将 createStore 函数和 Middleware 列表传入到 applyMiddleware 函数中，得到一个增强后的创建函数 createStoreWithMiddleware。最后，我们使用 createStoreWithMiddleware 函数在 Reducer 和初始 state 的基础上创建一个 store。
使用 Middleware
现在，我们已经成功地集成了 requestLoggerMiddleware 到我们的 Redux 应用中，并创建好了 store。接下来，我们将发起一个简单的请求，并记录请求相关的信息。下面是代码示例：
-- -------------------- ---- ------- -- --------- ---------------- ----- ---------------- -------- - ---- -------------------------- - -- -- ------ ------------- -- - ---------------- ----- --------------- -------- - ---- -------------------------- - -- -- -----展开代码
在上面的代码中，我们发起了一个简单的请求，并在其中启用 requestLoggerMiddleware 这个 Middleware。然后，我们推迟 3 秒钟来模拟请求处理时间，当异步请求结束后，我们将调用 dispatch 来通知 Middleware 请求已经结束。在控制台输出中，我们将看到类似 [Middleware] Start request 'https://example.com/test' 和 [Middleware] End request 'https://example.com/test' in 3001ms 的信息。
结束语
在本文中，我们介绍了 Redux 中 Middleware 的基础概念及机制，并通过实例演示了如何编写、集成和使用 Middleware。Middleware 允许我们在 action 到 reducer 的处理过程中添加自定义逻辑，可以帮助我们实现日志记录、异步操作、错误处理等常见场景。对前端开发同学而言，Middleware 是 Redux 中一个重要的技术点，学习掌握 Middleware 开发与实践，可以提高代码质量、开发效率和程序性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c2caf8314edc2684c542f7
